如何将 props 发送到组件以响应条件？

Question

我正在尝试将一个 prop 传递给 react 中的亲戚，前提是它满足特定条件。

我知道你可以创建一种条件来发送像这样的道具：

<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?那么它必须作为 prop 通道传递。

如果为 false 且 contentId 存在且恰好等于 channel，则通过 channel。

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

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

Answer 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;
  })()}
/>;

此外，您的代码将无法运行，因为您尝试在以下位置与对象进行比较：

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

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

Answer 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，因此您可以在 child 中使用它，例如 conditionalProps? 来查看它是否存在。

如何将 props 发送到组件以响应条件？

How to send props to a component in react with conditional?

html

javascript

web-applications

reactjs