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

【问题标题】：react - conditional rendering inside component return functionreact - 组件返回函数内的条件渲染
【发布时间】：2019-04-15 19:55:51
【问题描述】：

我想了解为什么 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 的最佳方法是什么？

【问题讨论】：

标签： reactjs

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

试试这个：

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

【讨论】：

【解决方案3】：

箭头函数语法可以接受要返回的值或要执行的代码块。在第一个示例中，您给出了一个值：<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} />
}

【讨论】：

现在说得通了。我总是省略第二个 return 语句。感谢您的澄清。

【解决方案4】：

您没有在map 函数参数中返回任何内容。您可以使用 三元表达式并使用 es6 箭头符号轻松做到这一点：

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

【讨论】：

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