Question

我的应用程序中具有以下两个组件：

<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传递到两个组件-Comp2和Comp3。

Comp2收到'prop1'的字符串值作为'test1'-符合预期。

但是，Comp3接收与对象相同的属性'prop1'而不是字符串。因此，在Comp3中，prop1不等于字符串'test1'，但在Json对象的形状中等于'prop1：test1'。我无法弄清楚为什么当以非常相似的方式定义两个组件时，相同的属性会以不同的类型传递给其他人。

有人可以帮助我了解这是怎么回事吗？提前谢谢您。

Answer 1

请记住，功能组件仅采用一个参数，称为props。因此，无论您要访问的prop为何，都必须将其引用为props.prop。在组件中，您可以使用object destructuring来获取这些值，如下所示。

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

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

由于您正在使用props（这是一个对象），因此会出现您的错误。

反应作为``对象''传递的``字符串''道具

1 个答案: