Reactjs中无法从CategoryLink向Store组件传递props及多props使用问题

问题原因 #

你的代码存在循环依赖问题，这是导致props传递失败的核心原因：

• CategoryLink.jsx 中导入了 Store 组件
• 同时 Store.jsx 中又导入了 CategoryLink 组件

两个组件互相导入会导致模块加载异常，其中一个组件拿到的是未完成的模块实例，自然无法正常接收传递的props。

解决步骤 #

1. 先删除不必要的导入：检查你的Store.jsx代码可以发现，你导入了CategoryLink但并未在render方法中使用该组件，直接删掉Store.jsx里的这行导入代码即可：

import CategoryLink from "../ComponentList/CategoryLink";

删除这行后循环依赖被打破，你在CategoryLink中传递的test prop就能在Store组件中通过this.props.test正常访问，你当前在componentDidMount中写的console.log(this.props)就能正常打印出test字段。 #

多props使用方法 #

React组件传递和使用多个props没有额外限制，你只需要在调用组件时直接追加属性即可，示例如下：

// CategoryLink中调用Store时传递多个props
<Store test="test" propA="文字值" propB={123} propC={{name:"自定义对象"}} />

在Store组件中直接通过this.props.属性名访问即可，和你现在访问this.props.match的方式完全一致。withRouter高阶组件会把你自定义传递的props和路由相关props合并到同一个this.props对象中，不会覆盖你自定义的属性。 #

内容的提问来源于stack exchange，提问作者svcodes