如何有条件地将道具传递给 React JS 中的组件答案

【问题标题】：How to pass props conditionally to a component in React JS如何有条件地将道具传递给 React JS 中的组件
【发布时间】：2021-02-09 21:55:51
【问题描述】：

我有一个名为“Switch”的组件，它需要一些参数，例如标签、名称、onChange、选定等。

现在，在我的场景中，我正在调用 API 并获得响应。在 JSON 响应中，我的字段值为“是”或“否”。

如果值为“是”，我需要将“切换”传递给组件，否则不要传递任何内容。

          <Switch
            label={field.label}
            name={field.fieldID}
            disabled={field.disabled}
            onChange={this.getNextFields}
            checked
          >
            {field.control.modes[0].options.map((option, index) => {
              return (
                
                  <Strong>{option.key}</Strong>
                
              );
            })}
          </Switch>

如何通过？我正在尝试使用三元运算符。但没有运气。非常感谢您的帮助。

【问题讨论】：

使用三元运算符，如果为假则返回 undefined。例如：
我试过了，但问题是“checked”不带任何值，如果“是”，我需要将“checked”传递给组件，否则不传递任何东西。 @ValeriF21 感谢您的回复
使用某个 prop 传递 undefined 与不传递任何内容相同，在这两种情况下，如果您尝试在 Component 中访问此 prop，则值将是 undefined。
我已将条件添加为 "checked={field.value === 'Yes' ? true : (field.value==="No"? false : undefined)}" 它是按预期工作。感谢您的时间和回复。

标签： javascript reactjs react-props react-component

【解决方案1】：

您可以在 prop 定义中使用三元运算符。

<Switch
  label={field.label}
  name={field.fieldID}
  disabled={field.disabled}
  onChange={this.getNextFields}
  checked={{ Yes: true, No: false }[field.value]}
>
  {field.control.modes[0].options.map((option, index) => {
    return <Strong>{option.key}</Strong>;
  })}
</Switch>

【讨论】：

我试过了，但问题是“checked”不带任何值，如果“是”，我需要将“checked”传递给组件，否则不传递任何东西。
@vg527 我已经更新了代码 sn-p 以使用检查的 propname 而不是“switched”。 checked 本身就是一个布尔属性。 React JSX 允许你传递布尔属性，可选值为 true 或 false。您可以显式传递 true 或 false，如我的代码 sn-p 所示。
太棒了，成功了！我对“checked={field.value === 'Yes' ? true : (field.value==="No"? false : undefined)}”的条件进行了轻微更改，如果这是错误的，请更正。
@vg527 是的，这也可以。但我们可以做得更好。让我们明确地将 Yes 和 No 映射到 true 和 false。然后我们使用括号表示法获得值。如果该值既不是 Yes 也不是 No，则该值将是未定义的。查看更新后的代码 sn-p。
这也有效。谢谢队友，非常感谢！