reactjs - 反应 .map 函数中的 if 语句

Question

如果条件为真，我试图仅将函数映射到 listItems，否则跳过它。我一直在尝试不同的东西，但我不想在列表完成之前返回。

我有这个代码：

    const listItems = (
      <ul>
        {desclist.map((point, index) =>
        if (point.length < 2) {
            <li key={index}>
              <p>{point}</p>
            </li>
          )}
        }
      </ul>
    );

    return listItems;
  }

标签： reactjsfunctiondictionaryconditional

Answer 1

如果你在.map函数中返回一些东西，它不会结束函数的循环，仍然会继续迭代。相反，您返回的内容将被放入.map返回的结果数组中。这意味着如果在内部.map您根据 if 语句返回一个组件，否则返回一个组件，否则结果将是一个包含所有返回组件的数组。

const listItems = (
    <ul>
        {
            desclist.map((point, index) =>
                if (point.length < 2) {
                    return <li key={index}>
                        <p>{point}</p>
                    </li>;
                }
            );
        }
    </ul>
);