turn fragment 進行 標簽 定義 reverse ons col ever

零、this.props 可以接收到 外界的傳值 和 此組件標簽內部自定義的方法 例： <one vals={message} sendVal={this.handleReverse.bind(this)}></one> 此時在子組件中打印this.props this.props = { vals : ‘**‘, sendVal : fn } 由此我們可以進行父子組件之間傳值 一、父傳子 在子組件標簽中用自定義屬性進行傳遞，接收的時候通過this.props進行接收 /* 父組件【自定義屬性為 val 傳的值為message】 */

1
 
 <Fragment>
2     <one val={message}></one>
3 </Fragment>

/* 子組件【this.props對象中會出現 自定義屬性,可以通過this.props.<屬性名> 獲取傳值 】 */

1 render(){
2     let {val} = this.props;
3     return (
4         <Fragment>
5             <div>接收來自父組件的傳值：{val}</div>
6
 
         </Fragment>
7     )
8 }      

二、子傳父 在子組件標簽內部用自定義屬性定義一個方法傳遞給子組件 子組件調用這個方法傳遞參數 /* 父組件 */

 1 render(){
 2     return (
 3         <Fragment>
 4             <one send={this.handleRevese.bind(this)}></one>
 5         </Fragment>
 6     )
 7 }
 8
 
  
 9 handleRevese(params){
10     console.log(‘來自子組件的傳值‘ + params);
11 }    

/* 子組件 */

 1 render(){
 2     return (
 3         <Fragment>
 4             <button onClick={this.handleSend.bind(this)}>向父組件傳值</button>                      
 5         </Fragment>
 6     )
 7 }
 8  
 9 handleSend(){
10     this.props.send(this.state.mess);
11 }

三、非父子【使用自己封裝的$on $emit $off】 One組件

 1 render(){
 2     return (
 3         <div>
 4             <button onClick={this.handleTwo.bind(this)}>發送給Two組件</button>
 5         </div>
 6     )
 7 }
 8  
 9 handleTwo(){
10     Observer.$emit("handle",this.state.oneVal);
11 }       

Two組件

 1 constructor(){
 2     super();
 3     this.state = {
 4         oneVal:""
 5     }
 6     Observer.$on("handle",(val)=>{
 7         this.setState({
 8             oneVal:val
 9         })
10     })
11 }
12  
13 render(){
14     let {oneVal} = this.state;
15     return (
16         <div>接收到one組件的值為：{oneVal}</div>
17     )
18 }   

React 父子組件和非父子組件傳值