react常见问题

react组件传值，大概有下面几种方法：

props

context

redux

react-router 路由切换时通过url传值（少量非机密数据，其实也是props传）。

 

 React中组件之间的传值方法有很多，按照不同的组件间关系可以把组件传值的方法分为父子组件传值，跨级组件传值和非嵌套关系组件传值。

父子组件常用的传值方法是当父组件给子组件传值时通过props，子组件向父组件传值通过回调函数来传值。跨级组件常用的传值方法是props一层一层的传，或者使用context对象，将父组件设置为生产者而子组件都设置对应的contextType即可。非嵌套关系组件传值的方法是使用共同的父级组件进行props传值，或者通过context传值，推荐使用发布/订阅的自定义事件传值。

————————————————

React组件间传值的方法有哪些？_油墨香^_^的博客-CSDN博客

 

父组件通过props传递给子组件；

父组件通过props向子组件传入一个方法，子组件在通过调用该方法，将数据以参数的形式传给父组件，父组件可以在该方法中对传入的数据进行处理；

1.props.params（推荐）

当页面跳转到UserPage页面之后，取出传过来的值：

上面的方法可以传递一个或多个值，但是每个值的类型都是字符串，没法传递一个对象,如果传递的话可以将json对象转换为字符串，然后传递过去，传递过去之后再将json字符串转换为对象将数据取出来

2.query（不推荐:刷新页面参数丢失）

query方式使用很简单，类似于表单中的get方法，传递参数为明文

3.state（不推荐，刷新页面参数丢失）

state方式类似于post方式，使用方式和query类似

特别提示：

1，获取参数时要用this.amprops.match.params.ne

2，如果在子组件里打印要记得传this.props，如下：

通过redux来传值的实现

1，我们先写一个createAction的函数

2，在reducer里面：

当action触发reducer时，会把action的result传给reducer的params。写好这里，我们就可以在组件中传给adction params了。

先把actionCreator拿出来。

在组件的某个需要的地方，可以直接向它传我们要放进redux里的数据：

这时，我们就可以在另外一个组件中取到刚刚放进去的数据。

另外一个组件：

把redux中的params数据映射到example上。

下面，就可以用了：

利用共同的父组件context对象进行传值

具体操作是创建一个context对象，需要输入默认值。在父组件中使用生产者标签将需要传值的所有子组件包裹起来。子组件通过指定contextType获取到这个context对象，直接调用this.context即可获得值。 

来自 <React组件间传值的方法有哪些？_油墨香^_^的博客-CSDN博客>