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

【问题标题】：Referencing state for loop rendered elements in reactreact中循环渲染元素的引用状态
【发布时间】：2018-03-29 18:52:49
【问题描述】：

在这里查看我的代码笔：

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 元素的方式不是响应式的。

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

【问题讨论】：

你为什么不用this way - docs？

标签： reactjs

【解决方案1】：

在 componentWillMount 中设置状态并不是像 react docs. 中所述的好习惯。

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

【讨论】：

【解决方案2】：

您想使用 componentWillUpdate() 而不是 componentWillMount()。 componentWillMount() 是一个回调，在 render() 之前只被调用一次，所以在这个方法中设置状态不会触发重新渲染。

【讨论】：

嗯，我真的不想每次都重新渲染所有项目。
@dwjohnston 看看这个codepen然后-codepen.io/anon/pen/YrdZdz?editors=1111

【解决方案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

在此处编写代码：https://codepen.io/kiwideejay/pen/boOqQg?editors=1111

【讨论】：