Question

在我的反应应用程序中，我有一个按钮，点击它调用一个方法。该方法从数组中创建一些元素：

let output = [1, 2, 3].map((value, index) =>
     <span key={index}>
       {value}
     </span>
);

通过改变方法的状态将这些元素插入到dom中：

this.setState({
  inputTextContainer: output
})

并且在render（）中具有状态值：

{inputTextContainer}

我的问题是我可以在跨状态元素中添加类，这些元素会在状态发生变化时发生变化吗？如下所示：

let output = [1, 2, 3].map((value, index) =>
     <span key={index} className={example}>
       {value}
     </span>
);

这个问题是它添加了className，但是没有更新状态更改。

Answer 1

保持您所在州的一系列物品。

componentDidMount(){
  this.setState({
     values: [{
           value: 1,
           className: 'example'
        },{
           value: 2,
           className: 'anotherOne'
        }
     ]}
  )}
}

并在render（）中添加如下内容：

render(){
    <div>
         {this.state.values.map((obj, index) => 
            <span key={index} className={obj.className}>
               {obj.value}
            </span>
         )}
    </div>
}

将状态值添加到方法中创建的元素的类名

1 个答案: