Javascript React-处理动态内联样式的理想方法

有了这两种处理内联样式的方案，哪一种是根据组件状态“切换”CSS属性的理想方法？还是更好的方法

1。创建一个样式变量，在该变量中查询组件的状态以做出决策，这样在JSX中指定样式时只使用一个对象。请参阅-此方法也未在中介绍

render（）{
常量样式={
pStyle:{
borderRadius:this.state.isCircle？'50%：'0px'，//查询当前状态
高度：this.state.isCircle？'100px'：'auto'，//查询当前状态
显示：“内联块”，
宽度：“100px”，
textAlign:'中心'，
过渡：“所有0.5秒轻松输入输出”，
边框：“纯色2件浅蓝色”
}
}
返回(
嗨
)
}

2.创建多个对象来表示组件的每个CSS状态，这样您就必须在JSX中查询组件的状态，并将对象与ES6的object.assign合并。看到了吗

render（）{
常量样式={
pStyle:{
显示：“内联块”，
宽度：“100px”，
textAlign:'中心'，
过渡：“所有0.5秒轻松输入输出”，
边框：“纯色2件浅蓝色”
}, 
pStyleCircle:{//仅当状态为Circle时应用此选项
边界半径：“50%”，
高度：“100px”，
}
}
返回(
Hi
)
}

---

这两种方法都有效，但哪一种方法应该优于另一种，以及为什么？

我认为没有合适的方法。这里有很多变量

在我个人和诚实的观点中，我会说第二个更容易理解和维护，即使我不喜欢使用内联样式，我也会用

CSS

和不同的修饰符类做一些类似的事情，只需要一些必要的道具

---

为了记录在案，您可以使用

CSS

和。

我认为没有一个正确的方法来做这件事。这里有很多变量

在我个人和诚实的观点中，我会说第二个更容易理解和维护，即使我不喜欢使用内联样式，我也会用

CSS

和不同的修饰符类做一些类似的事情，只需要一些必要的道具

对于记录，您可以使用

CSS

和执行相同的操作

render(){
    const style = {
      pStyle : {
        borderRadius: this.state.isCircle ? '50%' : '0px', //query the current state
        height: this.state.isCircle ? '100px' : 'auto', //query the current state
        display: 'inline-block',
        width: '100px',
        textAlign: 'center',
        transition: 'all 0.5s ease-in-out',
        border: 'solid 2px lightblue'
      }
    }
    return(
      <div>
        <p style={style.pStyle} onClick={this.HandleClick}>Hi!</p>

      </div>
    )
}

render(){
    const style = {
      pStyle : {
        display: 'inline-block',
        width: '100px',
        textAlign: 'center',
        transition: 'all 0.5s ease-in-out',
        border: 'solid 2px lightblue'
      }, 
      pStyleCircle : { //this will only be applied when state is Circle
        borderRadius: '50%',
        height: '100px',
      }
    }
    return(
      <div>
        <p style={Object.assign({},style.pStyle, this.state.isCircle && style.pStyleCircle)} onClick={this.HandleClick}>Hi!</p>
      </div>
    )
  }