Question

是否有机会将此代码设为DRY？

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

优化React代码

2 个答案: