#reactjs
Вопрос:
Я хочу создать компонент, который будет использоваться таким образом:
<OptionContainer>
<Option value={value1} />
<Option value={value2} />
<Option value={value3} />
</OptionContainer>
Могу ли я каким-то образом получить доступ к значению параметра внутри компонента контейнера? Проблема в том, что контейнер получает параметры как дочерние элементы(как уже созданные объекты) и не может передавать что-либо в props. Есть ли какие-то решения?
Комментарии:
1. Вы не должны, это один из принципов реакции. Поток данных идет от родителей к детям, что делает его однонаправленным, вы никогда не должны передавать реквизиты от детей к родителям. Однако вы можете передать дочерним элементам функции, которые редактируют данные от родителя. Я не до конца понял вашу проблему и рассудил, что в этом и была проблема, если ваша проблема не та, о которой упоминалось, скажите мне, и я отредактирую свой ответ.
2. @Gabri, Обычно мы передаем данные и функции через реквизит от родителя к ребенку, и в этом случае мы должны передать эти данные реквизиту родителя. Но в моем случае мы передаем значение компоненту <Option>, поэтому у родителей нет этих данных. Кроме того, родитель получает уже созданные объекты вместо того, чтобы просто получать данные и самостоятельно создавать опцию.
3. Тогда лучший способ справиться с этим-передать состояние родителю и отредактировать его внутри детей, взгляните на мой ответ ниже.
Ответ №1:
Вы должны абстрагироваться от реквизитов, переданных в OptionContainer.
Его ответственность заключается в создании дополнительных компонентов, в противном случае вы нарушаете правило единой ответственности, что может привести к снижению ремонтопригодности кода, усложнению поиска и исправления ошибок и т.д.
Это также препятствует повторному использованию OptionContainer, так как вы вынуждены всегда передавать html-код, специфичный для реакции, вместо простых данных, таких как:
[
{ value: "option1" },
{ value: "option2" }
]
что значительно усложняет создание такого реквизита.
Если вы должны были получить массив уже созданных объектов в результате ответа серверной части, то вы действительно привязываете себя к одной технологии (реагируете в этом сценарии) и делаете вызовы API вообще непереносимыми.
С учетом сказанного я настоятельно рекомендую провести рефакторинг родительского компонента OptionContainer для передачи реквизитов в виде абстрактного набора данных, упомянутого выше, вместо синтаксиса, специфичного для конкретной платформы.
Ответ №2:
Вы можете получить доступ, но, как написал Габри, я категорически против этого. Мне это никогда не было нужно
const childrenData = React.Children.map(children, child => child.props)
Ответ №3:
Вместо доступа к данным детей от родителя лучшим подходом было бы предоставить данные родителю и передать их детям вместе с функцией для их редактирования.
const OptionContainer = () => {
const [value, setValue] = useState(0);
return (
<Option value={value} changeValue={setValue} />
);
}