React中用三元运算符渲染样式

第一种是行内样式-style

当常量Re为true时,页面中渲染文字为红色

// 导入react依赖包
import React from 'react'
import ReactDOM from 'react-dom/client'


const root = ReactDOM.createRoot(document.getElementById('root'))


const Re = true
const jsx = <div style={{ color: Re ? 'red' : 'yellow' }}>你好React</div>


root.render(jsx )

第二种为类名-className  

// 导入react依赖包
import React from 'react'
import ReactDOM from 'react-dom/client'
//这里要导入css文件
import './base.css'


const root = ReactDOM.createRoot(document.getElementById('root'))

const Re= true


const jsx1 = <div className={Re? 'red' : 'green'}>你好React</div>

root.render(jsx1)

bass.css 文件中的代码 

.red {
  color: red;
  /* background-color: skyblue; */
}

.green {
  color: green;
}

代码仅供参考~~~ 

(我还是一个纯纯小白)