Question

我已经看过许多带有三元的React教程，就像{shown && <h2>Hai!<h2>}一样。

无论如何，我在尝试使用对象的prop作为第一个表达式时遇到语法错误（例如：{status.shown && <h2>Hai!<h2>}。有人可以解释一下吗？我正在使用create-react-app样板文件。

修改

好的，我刚才意识到错误发生在.map循环中。这是我的代码。

{fields.map((field, key) => (
    {field.type === "checkbox" && (
        <Form.Checkbox
            key={key}
            name={field.name}
            label={field.label}
        />
    )}
    {field.type === "text" && (
        <Form.Input 
            key={key}
            name={field.name}
            type={field.type}
            label={field.label}
            placeholder={field.placeholder}    
        />
    )}
))}

显示Unexpected token, expected ,

Answer 1

它意味着在JSX表达式中使用。您可以将其包裹在div或Fragment：

周围

{
  fields.map((field, key) => (
    <div>
      {field.type === 'checkbox' && (
        <Form.Checkbox key={key} name={field.name} label={field.label} />
      )}
      {field.type === 'text' && (
        <Form.Input
          key={key}
          name={field.name}
          type={field.type}
          label={field.label}
          placeholder={field.placeholder}
        />
      )}
    </div>
  ));
}

在这种情况下，仅使用switch或if语句可能更简单：

{
  fields.map((field, key) => {
      if (field.type === 'checkbox') {
        return <Form.Checkbox key={key} name={field.name} label={field.label} />
      } 
      ...

如果您只有2个案例，则可以使用三元运算符：

{
  fields.map((field, key) =>
    (field.type === 'checkbox' ? (
      <Form.Checkbox key={key} name={field.name} label={field.label} />
    ) : (
      <Form.Input
        key={key}
        name={field.name}
        type={field.type}
        label={field.label}
        placeholder={field.placeholder}
      />
    )));
}

Answer 2

例如

{ field === "checkbox" && fields.map((field, key) => (<div>.....</div>))}

或

{ field === "checkbox" && shown && fields.map((field, key) => (<div>.....</div>))}

验证应该在地图之前进行

或

{ fields.map((field, key) => (
<div>
 {field.type === "checkbox" && <div>....</div>}
</div>))
}

使用带对象prop的条件渲染时出现语法错误

2 个答案: