react中信息传递的几种方式

react中信息传递的几种方式

2018-11-27 20:25 by 张继祥, ... 阅读, ... 评论, 收藏, 编辑

1.父传子 父亲挂载一个属性 儿子通过this.props.属性接收

2.子传父  父亲挂载一个方法 儿子通过this.props调用这个方法并传递需要传递的参数 父亲然后接收

3.路由传参  

        1.先安装 npm install react-router-dom --save-dev //这里可以使用cnpm代替npm

        2.定义路由

const BasicRoute = () => ( <HashRouter> 

<Switch> 

    <Route exact path="/" component={Home}/> 

    <Route exact path="/detail" component={Detail}/> 

</Switch> </HashRouter> );

当页面跳转的时候  通过这样传递

this.props.history.push({

    pathname:'/detail',

    state:{

    id:3

}

})

然后通过这样接收

this.props.history.location.state

 

4.状态提升 简而言之就是说将多个组件需要共享的状态提升到离他们最近的那个公共父亲身上 然后父亲通过props分发给子组件

 

 

5.context

先在顶级父组件定义

 

当使用Context时 必须认证

 

在所有的子组件都可以调用

 

6.也就是我们都使用的redux 了