React 父子组件和非父子组件传值

发布时间：2020-12-15 20:39:47 所属栏目：百科来源：网络整理

导读：? 零、 this .props ? ? 可以接收到?外界的传值和?此组件标签内部自定义的方法 ? ? ? 例： ?? ?? ? one vals={message} sendVal={this.handleReverse.bind(this)}/one ? ? ? 此时在子组件中打印this.props ?? ?? ? this.props = { ?? ??? ?? ? vals : ‘**

零、 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 }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!