1.父组件向子组件传值（通过props传值）：
父组件通过属性的方式传递参数，子组件通过props来接收父组件传递过来的参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>高阶函数_函数柯里化</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
class Father extends React.Component {
//父组件（直接定义一个属性传值即可）
render() {
return (
<div>
<Child desc="父组件通过属性的方式传递参数，子组件通过props来接收父组件传递过来的参数" />
</div>
)
}
}
class Child extends React.Component {
//子组件（通过this.props.父组件定义的属性 来接收父组件传递过来的参数）
render() {
return (
<div>
<h1>{this.props.desc}</h1>
</div>
)
}
}
//渲染组件
ReactDOM.render(<Father />, document.getElementById('test'));
</script>
</body>
</html>
总结: 将父组件的值直接通过props传入子组件，子组件直接使用该值即可。
子向父传值(（回调函数）)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>组件子传父</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
class Father extends React.Component {
state = {
bgcolor: 'pink',
};
bgChange = (color) => {
this.setState({
bgcolor: color,
});
}
render(props) {
return (
<div style={{ background: this.state.bgcolor }}>
<Children
changeColor={
this.bgChange
}
/>
{/*changeColor 子组件的参数=color 当做形参*/}
</div>
);
}
}
class Children extends React.Component {
/*子组件（通过this.props.事件名(参数)的方式向父组件传递参数）*/
handerClick = () => {
this.props.changeColor('blue');
{
/*执行父组件的changeColor 并传参 必须和父组件中的函数一模一样*/
}
};
render() {
return (
<div>
<button onClick={this.handerClick}>改变父组件背景</button>{' '}
{/*子组件执行函数*/}
</div>
);
}
}
//渲染组件
ReactDOM.render(<Father />, document.getElementById('test'));
</script>
</body>
</html>总结: 将父组件的改变状态的方法传入子组件的props,绑定给子组件中的某些触发事件譬如按钮的点击，输入框输入等等，得到子组件的值或状态或动作再调用父组件的方法得到子组件中的值。
3.兄弟间传值
兄弟间传值由于没有任何嵌套关系，但是两个兄弟组件之间会有一个共同的父组件，我们都是结合父子传值的方式来实现兄弟之间的传值的，即先其中一个子组件（兄弟组件）向父组件传值，然后父组件接收到这个值之后再将值传递给另外一个子组件（兄弟组件）
所以结合上述两种情况，很容易想到将需要共享的值和方法使用上述的方法传至共同的父组件，由父组件再传入。
建议使用react-redux或者dva框架
下面这个例子，我们来将之前的实例眼神里下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>组件子传父</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
class Father extends React.Component {
state = {
bgcolor: 'pink',
name: '触发按钮我接受兄弟Children1的数据',
};
bgChange = (color, name) => {
console.log('color,,,', color, name);
this.setState({
bgcolor: color,
name,
});
};
render(props) {
return (
<div style={{ background: this.state.bgcolor }}>
<Children1 changeColor={this.bgChange} />
<Children2 name={this.state.name} />
{/*changeColor 子组件的参数=color 当做形参*/}
</div>
);
}
}
class Children1 extends React.Component {
/*子组件（通过this.props.事件名(参数)的方式向父组件传递参数）*/
state = {
name: '我已经拿到了数据哦',
};
handerClick = () => {
this.props.changeColor('blue', this.state.name);
{
/*执行父组件的changeColor 并传参 必须和父组件中的函数一模一样*/
}
};
render() {
return (
<div>
<button onClick={this.handerClick}>改变父组件背景</button>{' '}
{/*子组件执行函数*/}
</div>
);
}
}
class Children2 extends React.Component {
render() {
return (
<div>
<h1>{this.props.name}</h1>
</div>
);
}
}
//渲染组件
ReactDOM.render(<Father />, document.getElementById('test'));
</script>
</body>
</html>
