React组件简单介绍
组件是 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中搞定。
