react - 组件返回函数内的条件渲染

IT技术 reactjs
2021-04-28 16:18:19

我想了解为什么 react 会这样。

这有效

class Feed extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const posts = [{ id: 1, title: 'post-1' }, { id: 2, title: 'post-2' }];
    return (
      <>
        {posts.map(post => (
          <Post key={post.id} title={post.title} />
        ))}
      </>

但这不

class Feed extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const posts = [{ id: 1, title: 'post-1' }, { id: 2, title: 'post-2' }];
    return (
      <>
        {posts.map(post => {
          // changes are here
          if (post.id < 2) {
            <Post key={post.id} title={post.title} />;
          }
        })}
      </>

它只是返回空白。没有错误。

react没有呈现这个的原因是什么？什么是仅渲染的最佳方法post-1？

4个回答

箭头函数语法可以接受要返回的值或要执行的代码块。在第一个示例中，您提供一个值：<Post key={post.id} title={post.title} />。但是，在第二个示例中，您提供了一个代码块（通过使用 {}）。因此，您需要像这样添加return之前<Post key={post.id} title={post.title}>：

{posts.map(post => {
  if (post.id < 2) {
    return <Post key={post.id} title={post.title} />;
  }
})}

或将 if 更改为 && 以保持隐式返回行为：

{posts.map(post =>
  (post.id < 2) && <Post key={post.id} title={post.title} />
}

你必须把它改成 return <Post ... />;

您没有在函数参数中返回任何内容map。您可以使用三元表达式并使用 es6 箭头符号轻松完成此操作：

 posts.map(post => (post.id < 2) ? <Post key={post.id} title={post.title} /> : null)

第二个不起作用，因为您忘记了return语句。

试试这个：

  <>
    {posts.map(post => {
      // changes are here
      if (post.id < 2) {
        return <Post key={post.id} title={post.title} />; //added return statement
      }
    })}
  </>
其它你可能感兴趣的问题
上一篇如何在 React Router 3.x 中配置基本名称 下一篇虚拟 DOM 究竟存储在哪里？