react 父组件向子组件传递函数

Posted 淘金王存储仓

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react 父组件向子组件传递函数相关的知识,希望对你有一定的参考价值。

这段时间一直在使用react,由于这react是单向数据绑定,总感觉有点不适用,毕竟之前一直都在使用angular,但学习还是要继续,做了一个迭代的项目,都差点忘记要总结一下这个react了,现在可以写点东西了。(react 新手,仅仅参考)

1.react一开始我更理解为是一个各种代码片段,由于之前接触了一段时间meteor,感觉有点相似。在使用之前都要在app.js中将一总的父组件通过import导入,另外在route中的path中写入链接

例如:import createHistory from ‘history/createHashHistory‘;

<Route path="/mediahome" component={MediaHome}/>

 

2.父组件页面中,使用

class ShoppingCar extends React.Component {
    constructor() {
        super();
        this.state ={
            myCar : []
        };
    }
    componentDidMount() {
      //进行渲染   
}
    
}

 说明:使用class并且继承,说明这种方式里面都是一种对象的形式,在调用的时候也要使用这种点的形式

constructor首先设置属性,可以理解为js中的var ;先设置一个变量;

componentDidMount 在这里可以请求一些数据,请求结束之后在渲染页面

如果父组件要传递参数给子组件可以在子组件的路由中加入 ,然后在子组件中用this.props获取,同理,从父组件向子组件传递函数也是如此,在子组件使用this.props调用函数,将子组件的值返回到父组件中调用更新。

 

以上是关于react 父组件向子组件传递函数的主要内容,如果未能解决你的问题,请参考以下文章

React教程:父子组件传值(组件通信)

[React] 子组件向父组件通信:回调函数

React 中组件间通信的几种方式

React:快速上手——组件通信

React 组件通信之发布订阅模式

父组件向子组件传递数据