React - 组件返回函数中的条件渲染

Question

我希望了解为什么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？

- Darius Mandres

Answer 1

您需要将其更改为return <Post ... />;。

- izb

Answer 2

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

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

- neonfuz

---

现在我明白了。我总是漏掉第二个返回语句。谢谢你的澄清。 - Darius Mandres

Answer 3

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

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

- Riley Steele Parsons

---

你使用的三元表达式是不正确的。请检查我的编辑。 - Hemadri Dasari

Answer 4

第二个不起作用是因为您忘记了return语句。 尝试这样做：

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

- You Nguyen