Возможно ли отправить условие как prop в React?

#javascript #reactjs #components #react-props #conditional-rendering

#javascript #reactjs #Компоненты #react-props #условный рендеринг

Вопрос:

Мне было интересно, есть ли способ отправить условие в качестве prop дочернему компоненту, которому требуется некоторый условный рендеринг и итерация набора динамических объектов.

Допустим, я хочу, чтобы один из этих объектов был отображен условно, поэтому a сделайте что-то вроде этого:

 const Content = [{
  object: "One",
  value: one,
  name: "object1"
 }, {
  object: "Two",
  value: two, 
  name: "object2",
  condition: object1.value === "One" 
}]

Итак, в зависимости от значения первого объекта, который может быть, скажем, тегом select, я хочу, чтобы отображался второй.

Тогда у нас есть наш объект:

Затем внутри компонента я буду выполнять итерацию объекта и условно отображать входные данные или выборки.

Есть идеи? Заранее спасибо.

Редактировать:

Это компонент

 function FormCase ({ onSubmit, register, content }) {
    return (
        <Form id="form" onSubmit={onSubmit}>
            <Row className="form-row">
                {content.map((obj, idx) => {
                    return (
                        obj.conditional amp;amp;
                            <div className="form-group" key={idx}>
                                <label>{obj.name}</label>
                                <input className="form-control" value={obj.value} />
                            </div>  
                    )
                })}
            </Row>
            <Row className="submit-row">
                <input type="submit" value="Create" />
            </Row>
        </Form>        
    )
}

1. Не могли бы вы предоставить более подробную информацию о вашем коде? Сейчас этот вопрос не так ясен.

2. Не могли бы вы также добавить код?

3. Я добавил туда некоторый код.

4. Глядя на ваш код, вы уже добились условного отображения. просто измените obj.conditional на obj.condition. Если условие будет истинным, произойдет рендеринг. Кстати — никогда не используйте индекс в качестве ключа, используйте уникальное значение для каждого дочернего элемента.

Ответ №1:

 const content = [{
  object: "One",
  value: one,
  name: "object1"
 }, {
  object: "Two",
  value: two, 
  name: "object2",
  condition: value => value === "One" 
}]

// while rendering

const toRender = content.filter(item => !item.condition || item.condition("some value"));

// or filter function of your choice

затем просто отобразите отфильтрованные элементы.

Редактировать:

 function FormCase ({ onSubmit, register, content }) {
    return (
        <Form id="form" onSubmit={onSubmit}>
            <Row className="form-row">
                {content.map((obj, idx) => {
                    if (idx > 0) { // don't check the condition for first
                      return (
                        obj.condition amp;amp; obj.condition(content[idx-1].value) amp;amp;
                            <div className="form-group" key={idx}>
                                <label>{obj.name}</label>
                                <input className="form-control" value={obj.value} />
                            </div>  
                    )
                    } else {
                      return (
                           <div className="form-group" key={idx}>
                                <label>{obj.name}</label>
                                <input className="form-control" value={obj.value} />
                            </div>  
                    )
                  }
                })}
            </Row>
            <Row className="submit-row">
                <input type="submit" value="Create" />
            </Row>
        </Form>        
    )
}

Итак, вы просто передаете функцию как condition в вашем content массиве. Во время рендеринга вы должны проверить condition значение предыдущего элемента в качестве параметра для вашей функции.

Вы должны настроить логику — что делать, когда в вашем condition объекте не определена content функция.