Можно ли в React отправить условие как свойство?

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

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

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 &&
                            <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>        
    )
}

reactjs javascript components conditional-rendering react-props
person Jose Peres    schedule 18.08.2020    source источник
comment
Не могли бы вы дать более подробную информацию в своем коде? Этот вопрос сейчас не так ясен.   -  person Yunus Emre    schedule 18.08.2020
comment
Не могли бы вы также добавить код?   -  person Harmandeep Singh Kalsi    schedule 18.08.2020
comment
Я добавил туда код.   -  person Jose Peres    schedule 18.08.2020
comment
Глядя на свой код, вы уже достигли условного рендеринга. просто измените obj.conditional на obj.condition. Если условие будет истинным, произойдет рендеринг. Кстати - никогда не используйте индекс в качестве ключа, используйте уникальное значение для каждого дочернего элемента.   -  person nir shabi    schedule 19.08.2020

Ответы (1)


arrow_upward
0
arrow_downward 

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 && obj.condition(content[idx-1].value) &&
                            <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 с предыдущим значением элемента в качестве параметра для вашей функции.

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

person slawciu    schedule 18.08.2020
comment
Мне это не очень понятно. Должен ли я отправлять переменную toRender в качестве условия? - person Jose Peres; 18.08.2020
comment
Я отредактировал ответ, используя код, который вы добавили в вопрос - person slawciu; 19.08.2020