问题描述: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的内容.
原创很有趣, 希望能帮助到各位大佬! 一起进步.