Question

有两种方案可以处理内联样式，哪一种是切换＆＃39;切换的理想方式。 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合并＃39; s 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

我认为没有正确的方法来做到这一点。你在这里有很多变数。

在我个人和诚实的意见中，我会说第二个更容易理解，更容易维护，即使我不喜欢使用内联风格，我会＆＃39 ;我们用CSS和不同的修饰符类做了类似的东西，只需要必要的道具。

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

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

1 个答案: