地图函数内的 Reactjs 条件

Question

我在这里查看了一堆问题并一遍又一遍地阅读文档，但是无论我做什么，这似乎都不起作用。

如果 X 为真，这应该返回一件事，如果不是，则返回另一件事。它在 map 函数中，因为我需要同时为多个事物完成此操作。

     function ContentProcessing(props) {

        return (
            <div>
                props.content.map(content => {
                        {content.type === "card" ? (
                            <Card title={content.title} />
                        ) : (
                            <Content title={content.title} paragraph={content.guideline} />
                        )}
                })
            </div>
        );
    }

<Card /> 和 <Content /> 返回一个字符串

However I get the error
./src/App.js
Syntax error: /src/App.js: Unexpected token, expected , (79:13)

  77 |      <div>
  78 |          props.content.map(content => {
> 79 |                  {content.type === "card" ? (
     |                          ^
  80 |                      <Card title={content.title} />
  81 |                  ) ? (
  82 |                      <Content title={content.title} paragraph={content.guideline} />

我不明白为什么这不起作用。

原文由 Leonardo Petrucci 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

问题：

1- 使用 {} 将表达式放入 jsx（将 map 放入 div）。

2- 你正在使用 {} 意味着 arrow function 的块体，所以你需要在函数体内使用 return ，否则默认情况下 map 返回未定义。

3- 您正在使用 {} 两次，所以第二次 {} 将被视为对象，而 content.type 密钥将被视为无效的原因，这就是密钥的原因你得到错误。

4- 忘记在元素上定义键。

用这个：

 return (
    <div>
        {
            props.content.map(content => content.type === "card" ? (
                    <Card title={content.title} />
                ) : (
                    <Content title={content.title} paragraph={content.guideline} />
                )
        )}
    </div>
);

原文由 Mayank Shukla 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我相信有几件事是错误的。您没有在第一个 div 中添加花括号。在地图中，您添加了两次花括号，因此您可以删除一个或添加一个 return 语句。您还添加了“？” （第二个应该是“：”）。

这应该有效：

 function ContentProcessing(props) {
      return (
        <div>
          {props.content.map(content =>
            content.type === "card" ? <Card title={content.title} /> : <Content title={content.title} paragraph={content.guideline} />
          )}
        </div>
      );
    }

如果添加大括号，还可以在映射中添加 if else 语句：

 function ContentProcessing(props) {
        return (
          <div>
            {props.content.map((content) => {
              if (content.type === "card") {
                return (<Card title={content.title} />);
              }
              return (<Content title={content.title} paragraph={content.guideline} />);
            })}
          </div>
        );
      }

原文由 Rodius 发布，翻译遵循 CC BY-SA 3.0 许可协议