Taro 动态样式、条件渲染

小半 • 2022年5月17日上午11:00 • 前端开发 • 阅读 403

Taro是一套遵循 React 语法规范的多端开发解决方案，所以开发的时候离不了组件的思想。同样开发中也肯定会涉及到关于样式的问题，所以这里主要列出几种常见样式渲染；

以下的代码可以直接粘贴查看效果，注意 import；

import { View, Text } from ‘@tarojs/components’
import ‘./sueRef.less’
import classNames from ‘classnames’
import { useState } from ‘@tarojs/taro’

function UsrRef()

const show = true;

const [four,setFour] = useState(false)

const [bg,setBg] = useState('red')

const [change, setChange] = useState({
  background:'unset',
  color:'unset'
})

const Change=()=>{
  setChange({
    background:'blue',
    color:'red'
  })
}


return(
  <View>

      <Text style={{color:bg}}>标签样式</Text>

      <Text style={{color:'chartreuse'}}>标签样式</Text>

      <Text className ='changeOne ft'>默认多种样式</Text>

      <Text className ={classNames(show?'one':'changeOne')}>条件渲染</Text>

      <Text className = {classNames(four?'ft':'four')} onClick={()=>{setFour(true)}}>匿名函数条件渲染</Text>

      <Text style={{background:change.background,color:change.color}} onClick={Change}>点击事件改变样式</Text>

      <Text style={{background:change.background,color:change.color}} onClick={()=>{setChange({background:'green', color:'#ccc'})}}>匿名函数改变样式</Text>

  </View>
)

}
export default UsrRef

上面 import === >>>sueRef.less

@color:yellow;

.one{
color: @color;
font-size: 18px;
}
.four{
color: @color;
}
.changeOne{
color: blueviolet;
}

.ft{
font-style: oblique;
}

备注：以上样式都是在 H5 端做的测试，欢迎大家查看留言；

文章由极客之家整理，本文链接：https://www.bmabk.com/index.php/post/6357.html