优化 React 代码

Question

有机会让这段代码变干吗？

let allPosts = this.state.posts.map((item, i, arr) => {
  if (i === arr.length - 1) {
    return <Post
      key={item._id}
      post={item}
      nickname={this.props.nickname}
      ref={this.lastPostRef}
    /> 
  }

  return <Post
    key={item._id}
    post={item}
    nickname={this.props.nickname}
  />
});

完美的解决方案是

...
nickname={this.props.nickname}
if (i === arr.length - 1) {
  ref={this.lastPostRef}
} ...

但它在 React 中不起作用。

Answer 1

为什么不直接让属性未定义？

 return <Post 
    key={item._id}
    post={item}
    nickname={this.props.nickname}
    ref={ i === arr.length - 1 ? this.lastPostRef : undefined }
 />

Answer 2

有一种更简洁的方法可以不带任何条件地执行此操作：

let allPosts = this.state.posts.map((item, i, arr) => {
  return <Post
      key={item._id}
      post={item}
      nickname={this.props.nickname}
      ref={el => this.lastPostRef = el}
    /> 
});

在循环的每次迭代中，最后一个 post ref 将更新为最新元素。到地图结束时，最后一个 post 将设置为最后一个 post 参考。魔法！

优化 React 代码

Optimizing React code

javascript

arrays

dry

reactjs