时间戳

首页 > 解决方案 > 优化 React 代码

javascript - 优化 React 代码

问题描述

有没有机会让这个代码干燥？

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 中不起作用。

标签： javascriptarraysreactjsdry

解决方案

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

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

推荐阅读