Question

<div className="col-md-9">
           <span style={{color:this.props.todo.done ?'#e6e6e6' : '#4d4d4d'},
                        {textDecoration: this.props.todo.done ? '#e6e6e6 line-through' : 'none'}
                    }
           >
               {this.props.todo.value}
           </span>
</div>

我知道上面的一个是错误的，但是无论如何还是要在span标记内添加多个样式属性并使之起作用。如您所见，我希望他们两个都能工作。谢谢

Answer 1

尝试一下，我只是删除了多余的卷曲的背包

<div className="col-md-9">
       <span style={
                     {
                       color:this.props.todo.done ?'#e6e6e6' : '#4d4d4d',
                       textDecoration: this.props.todo.done ? '#e6e6e6 line-through' : 'none'
                     }
                }
       >
           {this.props.todo.value}
       </span>
</div>

Answer 2

仍然可以像这样优化代码，以便您的渲染方法看起来很整洁。

创建样式JSON对象的变量。

const customStyle = {
  color: this.props.todo.done ? "#e6e6e6" : "#4d4d4d",
  textDecoration: this.props.todo.done ? "#e6e6e6 line-through" : "none"
};

将customStyle对象作为道具传递给样式元素。

<div className="col-md-9">
   <span style={customStyle}>{this.props.todo.value}</span>
</div>;

在react中使用多个Style属性

2 个答案: