优化 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

有一种更简洁的方法可以在没有任何条件的情况下执行此操作：

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 都将使用最新的元素进行更新。在地图结束时，最后一篇文章将被设置为最后一篇文章参考。魔法！

Answer 2

为什么不让属性未定义？

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