問題描述：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的內容.
原創很有趣, 希望能幫助到各位大佬! 一起進步.
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/295679.html
標籤：其他
上一篇：Android Gradle plugin requires Java 11 to run. You are currently using Java 1.8