组件是 React 的核心,因此了解如何利用它们对于创建优秀的设计结构至关重要。
组件之间传递信息方式:
1.(父组件)向(子组件)传递信息
2.(子组件)向(父组件)传递信息
3.没有任何嵌套关系的组件之间传值(比如:兄弟组件之间传值)
下面结合实例详细说明种传递信息的方式。
以下的例子是我的个人见解,希望对你们有所帮助。
一、(父组件)向(子组件)传递信息>>>主要是通过prop进行
来看下面例子
//父组件 var MyContainer = React.createClass({ getInitialState: function () { return { checked: false }; }, render: function() { return ( <ToggleButton text="Toggle me" checked={this.state.checked} /> ); } }); // 子组件 var ToggleButton = React.createClass({ render: function () { // 从(父组件)获取的值 var checked = this.props.checked, text = this.props.text; return ( <label>{text}: <input type="checkbox" checked={checked} /></label> ); } });
以上这个例子,子组件通过 prop拿到了text值以及checked的属性值;那么当子组件要拿到祖父级组件的信息,也是可以通过prop进行逐层的获取。
二、(子组件)向(父组件)传递信息
// 父组件 var MyContainer = React.createClass({ getInitialState: function () { return { checked: false }; }, onChildChanged: function (newState) { this.setState({ checked: newState }); }, render: function() { var isChecked = this.state.checked ? 'yes' : 'no'; return ( <div> <div>Are you checked: {isChecked}</div> <ToggleButton text="Toggle me" initialChecked={this.state.checked} callbackParent={this.onChildChanged} /> </div> ); } }); // 子组件 var ToggleButton = React.createClass({ getInitialState: function () { return { checked: this.props.initialChecked }; }, onTextChange: function () { var newState = !this.state.checked; this.setState({ checked: newState }); //这里将子组件的信息传递给了父组件 this.props.callbackParent(newState); }, render: function () { // 从(父组件)获取的值 var text = this.props.text; // 组件自身的状态数据 var checked = this.state.checked; //onchange 事件用于单选框与复选框改变后触发的事件。 return ( <label>{text}: <input type="checkbox" checked={checked} onChange={this.onTextChange} /></label> ); } });
以上例子中,在父组件绑定callbackParent={this.onChildChanged},在子组件利用this.props.callbackParent(newState),触发了父级的的this.onChildChanged方法,进而将子组件的数据(newState)传递到了父组件。
这样做其实是依赖 props 来传递事件的引用,并通过回调的方式来实现的。
三、没有任何嵌套关系的组件之间传值(比如:兄弟组件之间传值)
// 兄弟相传 //1.引入React模块 import React from 'react'; import Son1 from './Son1'; import Son2 from './Son2'; //2.声明类,要继承React.Component class Father extends React.Component{ constructor(){ super(); this.state={ message:"" } } // 这个函数用来接收Son1.js组件的数据函数 Son1data(msg){ this.setState({ message:msg, }) } //3.重写渲染方法 render(){ return( <React.Fragment> <Son1 Son1data={this.Son1data.bind(this)} ></Son1> <Son2 mess={this.state.message}></Son2> </React.Fragment> ) } } //4.向外暴露 export default Father; //子组件1的js代码 //1.引入React模块 import React from 'react'; // Son1子组件 //2.声明类,要继承React.Component class Son1 extends React.Component{ //按钮点击事件函数 Son1click(){ this.props.Son1data('这是从Son.js中生成的数据'); } //3.重写渲染方法 render(){ return( <React.Fragment> <button onClick={this.Son1click.bind(this)}>Son1.js数组中获取的数据</button> </React.Fragment> ) } } //4.向外暴露 export default Son1; //子组件2的js代码 //1.引入React模块 import React from 'react'; //2.声明类,要继承React.Component class Son2 extends React.Component{ //3.重写渲染方法 render(){ return( <React.Fragment> {this.props.mess} {console.log(this.props.mess)} </React.Fragment> ) } } //4.向外暴露 export default Son2;
props都有什么用
1.1.props属性
- 先在组件上通过自定义属性赋值。
- 函数组件中,在函数上定义形参props,在函数中 props.属性名。
- 类组件中,通过 this.props.属性名。
1.2.props的作用
- 用于组件之间传值。
1.3.props的特点
- 只读,值不能被修改。
总结
1.父组件通过state向子组件传值,子组件通过props获取父组件所传的值。
2.子组件通过prop获取父组件中定义的函数方法,但是需要在父组件调用子组件的标签中写明。
3.父组件通过refs调用子组件中声明的方法,但是需要给子组件添加一个ref节点
4.组件之间的交流也不一定要沉在这些直接性的关联的东西,我们的思维还可以提神一个高度,可以在action-reduce中搞定。