Блог

Я пытаюсь передать реквизит относительному дочернему элементу в 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 amp;amp; this.props.some) ?  
    (this.props.some.conv amp;amp; (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 channel.

Если это значение равно false и ContentID существует, а также точно равно channel, то channel передается.

Если ни один из этих случаев не является истинным, необходимо передать значение null или пустую строку » (у меня нет проблем ни с одним из двух)

Я не очень уверен, что то, что я сделал, правильно, и я уверен, что это не лучший способ выполнить это

Если вы используете ES7, вы можете попробовать оператор распространения null:

 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() и сравните две строки.

1. Если у вас есть только несколько условий, вы можете вложить их в троичный оператор следующим образом

    conditionalProps = a>b?"value1":b>c?"value2":c>d?"value3":"value4"
     

Итак, я проверяю a>b и, если это удовлетворяет, назначаю "value1" еще одну проверку другого условия и так далее в одной строке.

2. Вы могли бы написать функцию для проверки многих условий.

   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 в поле условия не были выполнены, поэтому вы можете использовать это в своем дочернем like conditionalProps? , чтобы проверить, существует ли оно.