当前位置:首页 » 《关注互联网》 » 正文

iPhone6s, iPhone6 P上通过dom.style或者 ref.current.style 的方式设置样式报错, 但是其他手机上可以正常运行的问题及解决方法_Alan_developer的博客

29 人参与  2021年08月23日 14:43  分类 : 《关注互联网》  评论

点击全文阅读


问题描述:iPhone6s, iPhone6 P上通过dom.style或者 ref.current.style 的方式设置样式报错, 但是其他手机上可以正常运行的问题及解决方法

介绍:最近在开发h5项目封装表单提交不通过文案的时候, 遇到了个兼容性的问题, iOS 10 以下不支持 dom.style 的方式来设置元素的样式, 但是其他手机都是ok的, 如下图代码:

@Override
		...
		if(pictureUrl !== ''){
			tipMessage.current.style = 'color:red;'//此处代码ios 10不生效
		}
		...
        return() {
            <div ref={tipMessage}></div>
        }
        ...

后面了解到 ios 10以下不支持这样方式,解决办法如下:


解决方案:

方案一:dom.style的方式不支持, 可以使用 dom.style.color 的方式直接来设置, 如下:

@Override
		...
		if(pictureUrl !== ''){
			tipMessage.current.style.color = 'red'// ok了
		}
		...
        return() {
            <div ref={tipMessage}></div>
        }
        ...

但是这种方式不是很优雅, 下面看第二种方式:

方案二:dom.style的方式不支持, 可以通过动态className的方式来设置样式, 可以定义一个状态, 正常状态下className的类名为正常样式下的类名, 并设置对应的样式, 特殊提示文案下的将状态改变, 这个时候切换为提示文案下的 className, 如下:

我这里用到是 函数组件, 类组件同理;

@Override
		import React,{useState} from 'react';
		...
		const [tipMessageClass, setTipMessageClass] = useState('normal');//useState创建一个状态,用来控制变量名
		...
		if(pictureUrl !== ''){
			setTipMessageClass('abnormal');//当需要提示文案红色高亮时,改变状态的值,这样就可以改变className,从而改变样式
		}
		...
        return() {
            <div className={tipMessageClass === 'norma' ? 'normal': 'abnormal'}>提示文案</div>
        }
        ...

当然了, 可能一个dom很多时候都不会只有一个唯一的className, 这个时候也可以通过安装classnames这个库, 用第三方库的形式改变classnames, 这样不会覆盖和影响原来的类名, 具体classnames安装和引入口怎么使用, 可以查看classnames的使用文档, 也可以我后面持续更新一篇关于classnames的内容.

原创很有趣, 希望能帮助到各位大佬! 一起进步.


点击全文阅读


本文链接:http://zhangshiyu.com/post/26010.html

方式  文案  样式  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 陆寒澈沈秋晚小说完本+外篇(相逢难逃别离)畅享阅读
  • 雪上春霜删减内容修复版本(温观意陆一然)_雪上春霜删减内容修复版本(温观意陆一然)
  • 全书浏览重生高考填报志愿时我放任全班上大专+后续(叶淼淼宋津年颜禾晚)_重生高考填报志愿时我放任全班上大专+后续(叶淼淼宋津年颜禾晚)全书结局
  • 他的甜撩藏不住附加黎初谢时晏:结局+番外免费品鉴(他的甜撩藏不住)全本浏览阅读连载中
  • 全文他死遁后逼疯清冷女权臣+完结+后续(苏煜顾宛柔)列表_全文他死遁后逼疯清冷女权臣+完结+后续
  • 暑假毕业旅游,班花将我们身份证交给黑导游(江诗晗)全书浏览_暑假毕业旅游,班花将我们身份证交给黑导游全书浏览
  • 重生到高考前,我放任竹马为爱私奔新上热文_裴文远柳雨文远完结版_小说后续在线阅读_无删减免费完结_
  • 雨织离歌浮生浅节选_沈翊鸣苏之雨小姐完整文本_小说后续在线阅读_无删减免费完结_
  • 鬓边不是牡丹红精选(盛惟芳萧既明贺锦)_鬓边不是牡丹红精选盛惟芳萧既明贺锦
  • 宋岑月傅忠焜:结局+番外免费品鉴:结局+番外评价五颗星
  • 桑榆非晚半春休,姜晚榆沈淮遇完本_完本桑榆非晚半春休,姜晚榆沈淮遇
  • 大逃杀游戏老公一千万赌我死人气节选(萧铎纪云笙白茵茵)全书浏览_大逃杀游戏老公一千万赌我死人气节选全书浏览

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1