React 'String' 道具作为 'object' 传递

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 }) => (
...
...
)

所以您的错误是预料之中的，因为您正在使用 props 这是一个对象。

React 'String' 道具作为 'object' 传递

React 'String' prop passing down as an 'object'

reactjs

react-proptypes