该篇文章所使用的方法，是react提供的父子页面数据交互，如果熟练掌握react-redux，可以完全省略以下内容。。。
个人还是比较喜欢这种直接传值方法的，比较直接，简单易懂（主要是因为一开始redux运用的不熟练）在一些大型的项目开发当中，一定会用到redux，请各位同学要好好练习，今后会对redux做一个专门的整理。
- 父组件的值传递给子组件
class TodoList extends Component {
constructor(props) {
super(props);
this.state = {
inputValue: '传我，传我'
}
}
render() {
return (
<Children childData={this.state.inputValue} /> //Children是子组件的名称，childData是自己起的名字，inputValue是父组件state中定义的状态
)
}
export default TodoList;
上面代码中，我们需要先给子组件设置一个属性，这个属性名称随你喜好，然后把父组件state中的需要传递的数据和子组件的这个属性绑定，绑定方法就是childData={this.state.inputValue}，这样父组件中的工作就完成了。然后是子组件中如何使用，如下：
class Children extends Component {
constructor(props) {
super(props)
}
render() {
return (
<div onClick={this.handleClick}>
<p> 点我触发事件</p>
</div>
)
}
handleClick = () => {
console.log(this.props.childData);
}
}
通过props拿到之前在父页面中绑定的属性。
- 父组件的方法，怎么传递给子组件
class TodoList extends Component {
constructor(props) {
super(props);
this.state = {
inputValue: '传我，传我'
}
}
render() {
return (
<div onClick={this.onClick}>点击触发</div>
<Children
childData={this.state.inputValue}
childClick={this.onClick}
/> //Children是子组件的名称，childData是自己起的名字，inputValue是父组件state中定义的状态
)
}
onClick = () => {
console.log('父组件事件触发');
}
export default TodoList;
子组件中使用父组件的方法时，同样的需要从props中拿到绑定好的方法,下面为子组件
render() {
return (
<div onClick={this.handleClick}>
点击触发
</div>)
}
handleClick() {
let { childClick } = this.props;
childClick()
}
- 说完父传子，该子传给父了
还是上面的代码，子传给父只要把执行父方法的时候，把要传递的数据，当作参数，传递给父就可以了
render() {
return (
<div onClick={this.handleClick}>
点击触发
</div>)
}
handleClick() {
let { childClick } = this.props;
childClick(this.state.data)//这个this.state.data就是存在子里面的数据，要传递给父
}
父组件别忘了在自己的方法里，接收一下子传递过来的参数
class TodoList extends Component {
constructor(props) {
super(props);
this.state = {
inputValue: '传我，传我'
}
}
render() {
return (
<div onClick={this.onClick}>点击触发</div>
<Children
childData={this.state.inputValue}
childClick={this.onClick}
/>
)
}
onClick = (data) => {
console.log('子传递过来的数据'， data);//这里接收了子传递过来的数据
}
export default TodoList;
OK，父子间传值，传方法，Lv1，已经学会了，接下来Lv2
- 子组件的方法怎么传递给父组件
这个需要分类讨论了，在没有使用redux的时候，情况如下
class TodoList extends Component {
constructor(props) {
super(props);
this.state = {
inputValue: '传我，传我'
}
}
render() {
return (
<Children onRef={this.onRef} /> //可以简写成onRef={(el) => this.onRef = el 写成这种形式，下方的onRef也可以省略了
<button onClick={this.click} >click</button>
)
}
onRef = () => {
this.Children = ref;
}
onClick = () => {
this.Children.childClick()
}
export default TodoList;
下面是子组件，需要先通过父组件中绑定的onRef，把子组件传递过去
componentDidMount(){
this.props.onRef(this)
}
react中this表示的是组件本身，这里是通过执行父组件的onRef方法，把this（子组件）传递给父组件，然后在父组件中就可以调用了，上面生命后期表示，在组件完成挂载后，去把this传给父
- 最后一个问题，一般项目或者实际开发中，都会使用到react-redux来管理状态，在使用了redux后，上面的父调子方法就不管用了，那么怎么解决
导致上面哪种方法失效的原因是redux属于高阶组件，他会包裹住我们的子组件，导致ref无法获取，解决方法是在连接器的参数上设置一下
//使用了redux后会设置连接器
export default connect(stateToProps, null, null, { withRef: true })(Children)
//正常暴露组件的形式
export default Children
注意：这个是子组件最下面的连接器，因为使用了redux，我们的子组件不是直接被暴露出去的，所以导致父组件无法直接通过onRef获取到
当然withRef开启后，还是不能直接使用，父组件在调用子方法的时候，需要增加如下使用
onClick = () => {
this.Children.getWrappedInstance.childClick();
}
上面就是父子组件之间，传值的所有方法了，最后一种方法可能不太好记忆，我个人最开始是记住子组件用了redux之后，就会比较皮，因为他能获取到所有的state，所以会不服管教，这时候需要在他的屁股上（最下方）盖一个戳儿，告诉他，你得乖乖的，让父亲指挥你，让你干嘛你干嘛，当然父亲手里得拿一个鸡毛掸子（getWrappedInstance）才能震慑住他，因为他盖完戳儿了还是很皮，还是能获取到所有state
当你弄明白redux的使用规则的时候，就不用这么麻烦的记忆了，可能有时候项目比较简单，没必要使用到redux，完全可以只用父子传值搞定。
推荐大家看一下张培小姐姐的关于withRef的使用，能更好理解
https://www.jianshu.com/p/b567056c9d09
