Question

我想了解为什么反应如此表现。

这有效

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的最佳方法是什么？

Answer 1

您必须将其更改为return <Post ... />;

Answer 2

箭头函数语法可以接受要返回的值或要执行的代码块。在第一个示例中，您提供一个值：def couple(men_choice, women_choice): engagements = [] for i, x in enumerate(men_choice): engagements.append((i, x[0])) return engagements。但是，在第二个示例中，您给出了一个代码块（使用{}）。因此，您需要像这样在<Post key={post.id} title={post.title} />之前添加return：

<Post key={post.id} title={post.title}>

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

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

Answer 3

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

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

Answer 4

第二个没有用，因为您忘记了return语句。

尝试一下：

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

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

4 个答案: