Question

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

如果X为真，这应该返回一件事，如果不是则返回别的东西。它位于地图功能中，因为我需要一次完成多项任务。

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

我不知道为什么这不起作用。

Answer 1

的问题：

1-使用{}将表达式放在jsx中（将地图放在div中）。

2-你正在使用{}表示arrow function的块体，所以你需要在函数体内使用return，否则默认map返回undefined。

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>
);

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>
        );
      }

Answer 3

您的三元运算符的语法错误。你有condition ? a ? b。正确的语法是condition ? a : b。

尝试

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

Answer 4

代码存在多个问题。

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

删除了额外的括号。

条件运算符语法错误。expression ? expression : expression

映射函数内的Reactjs条件

4 个答案: