反应“字符串”道具作为“对象”传递

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'，而是等于 Json 对象形状的 'prop1: test1'。当两个组件以非常相似的方式定义时，我无法弄清楚为什么相同的属性会以不同的类型传递给这两个组件。

有人可以帮我理解这是怎么回事吗？非常感谢您。

Answer 1

请记住，功能组件只接受一个参数，它被称为props。因此，无论prop您想访问什么，都必须将其引用为props.prop. 在您的组件中，您可以使用这些值，object destructuring如下所示。

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

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

所以你的错误是意料之中的，因为你正在接受propswhich 是一个对象。