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

Question

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

1. 创建一个样式变量，您可以在其中查询组件的状态以做出决定，这样在 JSX 中分配样式时就可以只使用一个对象。看到它working here - 此方法也未在 this top question 中解决。

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>
    )
}

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

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>
    )
  }

两种方法都有效，但是应该使用哪一种而不是另一种，为什么？

Answer 1

我认为没有正确的方法可以做到这一点。这里有很多变量。

以我个人和诚实的观点，我会说第二个更容易理解并且更易于维护，即使我不喜欢使用内联样式，我也会做一些事情与 CSS 和不同的修饰符类类似，只需必要的 props。

仅供记录，您可以使用 CSS 和 classnames 执行相同的操作.