Question

请在此处查看我的代码笔：

https://codepen.io/kiwideejay/pen/zEyZdj?editors=1111

关键是：

  componentWillMount() {        

        let items = this.props.objs.map((v,i) =>{       
            return <li 
                      className = {(this.state.i === i) ? "selected" : ""} > 
                         {v} - {this.state.i} - {i}
                   </li> 
        }); 

        this.setState({items:items});
      }

这很直接 - 我想有条件地设置每个元素的类，具体取决于this.state.i的值。但是 - 我猜测我生成这些dom元素的方式没有反应灵敏。

这样做的正确方法是什么？

Answer 1

您想使用componentWillUpdate（）而不是componentWillMount（）。 componentWillMount（）是一个只在render（）之前调用一次的回调，因此在此方法中设置状态不会触发重新渲染。

Answer 2

在component react docs.中说明在componentWillMount中设置状态不是一种好的做法。

在安装发生之前立即调用
componentWillMount()。它在render()之前调用，因此同步设置状态在这种方法中不会触发重新渲染。避免引入任何此方法中的副作用或订阅。

而不是将项目设置为状态然后渲染您只需映射渲染功能，或者您可以分离函数并在渲染中调用它。如果您仍希望将项目置于状态，则应使用componentDidMount生命周期方法。

如果你问我，你设置className的方式就好了。

示例

renderListItems = () => { return this.props.objs.map((v,i) => { return ( <li className={(this.state.i === i) ? "selected" : ""}> {`${v} - ${this.state.i} - ${i}`} </li> ) }); } render() { return( <div> <ul> {this.renderListItems()} </ul> <div> ) }

Answer 3

原来你不需要在渲染功能之前将项目设置为变量。只需在render()方法的return语句中呈现它们。

  render() {                
    return <div>

      <ul> 
        {this.props.objs.map((v,i) =>{       
              return <li 
                           className = {(this.state.i === i) ? "selected" : ""} > 
                                  {v} - {this.state.i} - {i} 
                     </li> 
        })}
      </ul>

     //snip

Codepen：https://codepen.io/kiwideejay/pen/boOqQg?editors=1111

在react中引用循环渲染元素的状态

3 个答案: