該篇文章所使用的方法，是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的使用，能更好理解
http://www.lxweimin.com/p/b567056c9d09
