如何将道具发送到组件以响应条件？答案

【问题标题】：How to send props to a component in react with conditional?如何将道具发送到组件以响应条件？
【发布时间】：2020-12-25 04:50:03
【问题描述】：

我正在尝试将一个道具传递给一个相对的孩子做出反应，只有当它满足某些条件时。

我知道你可以像这样设置一种条件来发送道具：

<SomeComponent

ConditionalProp={
(this.state.exampleData === 'some string') ? this.state.exampleData : null
}

/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

但我需要做更多的验证，到目前为止，这就是我所拥有的：

<MyComponent

ConditionalProps={ 
  (this.props.channel && this.props.some) ?  
    (this.props.some.conv && (this.props.some.conv.id === this.props.channel.conv.id) ? 
        this.props.channel :''
    (this.state.contentId === this.props.channel)? this.props.channel:''
): null

}

/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

让我解释一下，我想做的是：如果 channel 和 some 存在，将验证两种可能的情况：如果 some.conv 存在并且 some.conv.id 是 === channel.conv.id？那么它必须作为道具通道传递。

如果为 false 且 contentId 存在且与 channel 完全相等，则通过 channel。

如果这两种情况都不成立，则必须传递 null 或空字符串 ''（我对这两种情况都没有问题）

我不太确定我所做的是否正确，我确信这不是执行它的最佳方式

【问题讨论】：

标签： javascript html reactjs web-applications

【解决方案1】：

如果你用的是ES7，可以试试null propagation operator：

this.props.channel?.conv?.id === this.props.some?.conv?.id

所以你不必检查 this.props.channel 和 this.props.channel.conv 是否存在。

你也可以试试匿名函数：

<MyComponent
  ConditionalProps={(() => {
    if (this.props.some?.conv?.id === this.props.channel?.conv?.id) {
      // some more code
      // return ...
    }

    return null;
  })()}
/>;

此外，您的代码将无法正常工作，因为您尝试在以下位置与 Object 进行比较：

this.state.contentId === this.props.channel

例如{} === {} 将是false。使用 JSON.stringify() 并比较两个字符串。

【讨论】：

【解决方案2】：

如果你只有几个条件，你可以像这样将它们嵌套在三元运算符中
```
conditionalProps = a>b?"value1":b>c?"value2":c>d?"value3":"value4"
```

所以我正在检查a>b，如果满意，则分配"value1"，否则在一行中检查另一个条件等等。

您可以编写一个函数来检查许多条件。

const conditionalProps = makeConditionalProps(channel)

和功能（请替换为您的条件。它只是一个例子）

  const makeConditionalProps = (channel,some) => {
    let propsToReturn = false;
    if (channel.somecondition==true) {
      if (channel.conv.id == some.channel.id){
          propsToReturn = "whatEverProps"
       }
    }
   return propsToReturn;
}

在你的组件中

<MyComponent
ConditionalProps={conditionalProps} />

请注意，conditionalProps 字段在条件不满足时为 false，因此您可以在您的孩子中使用它，例如 conditionalProps? 来查看它是否存在。

【讨论】：