Реагируйте как «Строка», пропуская как «объект»

Question

У меня есть 2 компонента, как показано ниже в моем приложении:

<Comp1>
...
    <Comp2 prop1='test1' prop2='test2'/>
    <Comp3 prop1='test1 />
</Comp1>

Компоненты Comp2 и Comp3 выглядят следующим образом:

const Comp2 = (prop1, prop2) => {
...
...
}
Comp2.propTypes = {
prop1: PropTypes.string.isrequired,
prop2: PropTypes.string.isrequired,
}


const Comp3 = prop1 => (
...
...
)
Comp2.propTypes = {
prop1: PropTypes.string.isrequired,
}

Как мы видим из вышеизложенного, я передаю строковое значение 'test1' из Comp1 на 2 компонента - Comp2 и Comp3.

Comp2 получает строковое значение для «prop1» как «test1» - как и ожидалось.

Однако Comp3 получает то же свойство 'prop1', что и объект, а не строку. Таким образом, в Comp3 значение prop1 не равно строке 'test1', но равно значению 'prop1: test1' в форме объекта Json. Я не могу понять, почему одно и то же свойство передается как разные типы для обоих компонентов, когда они определены очень похожим образом.

Может ли кто-нибудь помочь мне понять, как это происходит? Большое спасибо заранее.

Answer 1

Пожалуйста, помните, что функциональные компоненты принимают только один параметр, и он называется props. Таким образом, к какому бы prop вы не обращались, вы должны ссылаться на него как props.prop. В ваших компонентах вы можете взять эти значения с object destructuring, как показано ниже.

const Comp2 = ({prop1, prop2}) => {
...
...
}

const Comp3 = ({ prop1 }) => (
...
...
)

Итак, ваша ошибка ожидается, потому что вы берете props, который является объектом.