react组件之间通讯代码展示与总结

1. 父组件给子组件传值:props

//父组件
import Children from "./children"
import React from 'react'
class Parents extends React.Component { 
    constructor(props) { 
        super(props);   
    }
    render() { 
        return (
            <div>
                <h1>我是父组件</h1>
                <Children title="我是子组件"></Children>
            </div>
        );
    }
}

export default Parents;


//子组件
import React from 'react'
class Children extends React.Component { 
    constructor(props) { 
        super(props);
        this.state = {   };
    }
    render() { 
        return (
            <div>
                <h2>{ this.props.title}</h2>
            </div>
        );
    }
}

export default Children;

2. 父组件给子组件传方法props

//父组件
import Children from "./children"
import React from 'react'
class Parents extends React.Component { 
    constructor(props) { 
        super(props);   
    }
    ChildrenClick=()=>{ 
        alert("其实我是写在父组件中的方法，但是我被子组件调用了，嘻嘻！")
    }
    render() { 
        return (
            <div>
                <h1>我是父组件</h1>
                <Children title="我是子组件" func = { this.ChildrenClick}></Children>
            </div>
        );
    }
}

export default Parents;


//子组件
import React from 'react'
class Children extends React.Component { 
    constructor(props) { 
        super(props);
        this.state = {   };
    }
    render() { 
        return (
            <div>
                <h2>{ this.props.title}</h2>
                <button onClick={ this.props.func}>我是子组件的button按钮，我是来负责调用父组件方法的！</button>
            </div>
        );
    }
}

export default Children;

3. 将整个父组件传递给子组件props

//父组件
import Children from "./children"
import React from 'react'
class Parents extends React.Component { 
    constructor(props) { 
        super(props); 
        this.state = { 
            count: 20
        }  
    }
    ChildrenClick=()=>{ 
        alert("其实我是写在父组件中的方法，但是我被子组件调用了，嘻嘻！")
    }
    render() { 
        return (
            <div>
                <h1>我是父组件</h1>
                <Children title="我是子组件" func = { this.ChildrenClick} parentComponent={ this}></Children>
            </div>
        );
    }
}

export default Parents;


//子组件
import React from 'react'
class Children extends React.Component { 
    constructor(props) { 
        super(props);
        this.state = {   };
    }
    parentAll=(data)=>{ 
        alert("data",data.state.count)
    }
    render() { 
        return (
            <div>
                <h2>{ this.props.title}</h2>
                <button onClick={ this.props.func}>我是子组件的button按钮，我是来负责调用父组件方法的！</button>
                <button onClick={ () => {  this.parentAll(this.props.parentComponent)}}>不要小瞧我，我可以获取到整个父组件，包含父组件中的所以实例方法！</button>
            </div>
        );
    }
}

export default Children;

4. 父组件获取子组件的数据ref

//父组件
import React from 'react';
import Children from "./Children"
class Parents extends React.Component { 
    constructor(props) { 
        super(props);
    }
    ParentsClick=()=>{ 
        console.log("info:", this.refs.a.state.info)
    }
    render() { 
        return (
            <div>
                <h1>我是父组件</h1>
                <button onClick={ this.ParentsClick}>我在父组件中，我可以获取子组件的数据！</button>
                <Children ref="a"></Children>
            </div>
        );
    }
}
export default Parents;


//子组件
import React from 'react';
class Children extends React.Component { 
    constructor(props) { 
        super(props);
        this.state = {  
            info:"我是子组件"
         };
    }
    render() { 
        return (
            <div>
                <h2>我是子组件</h2>
            </div>
        );
    }
}
export default Children;

5. 父组件调用子组件的方法ref、props

第一种方法：通过refs

//父组件
import React from 'react';
import Children from "./Children"
class Parents extends React.Component { 
    constructor(props) { 
        super(props);
    }
    ParentsClick=()=>{ 
        console.log("info:", this.refs.a.state.info)
        this.refs.a.WindowAlert()
    }
    render() { 
        return (
            <div>
                <h1>我是父组件</h1>
                <button onClick={ this.ParentsClick}>我在父组件中，我可以获取子组件的数据！</button>
                <Children ref="a"></Children>
            </div>
        );
    }
}
export default Parents;


//子组件
import React from 'react';
class Children extends React.Component { 
    constructor(props) { 
        super(props);
        this.state = {  
            info:"我是子组件"
         };
    }
    WindowAlert=()=>{ 
        alert("我是子组件:::children");
    }
    render() { 
        return (
            <div>
                <h2>我是子组件</h2>
            </div>
        );
    }
}
export default Children;

第二种方法：通过props

//父组件
import React from 'react';
import Child from "./Child"
class Parents extends React.Component { 
    constructor(props) { 
      super(props)
    }
    childClick = (e) => { 
        this.child.onShow()
    }
    render() { 
      var data = this.props.customData
        return (
            <div className="asd">
            	<h1>父组件通过onRef方法调用子组件的方法</h1>
              <Child onRef={ (ref)=>{  this.child = ref}} data={ data}></Child>
              <div onClick={ this.childClick}>调用子组件的函数</div>
            </div>
        );
    }
}
export default Parents;


//子组件
class Child extends React.Component { 
  constructor(props) { 
    super(props)
  }
    componentDidMount() { 
        this.props.onRef(this)
      //this.props.onRef（this）这里的参数指向子组件本身
    }
    onShow(){ 
        console.log('子组件的方法被父组件调用')
    }
    render() { 
        return (
            <section>
                <div style={ { color:"red"}}>子组件用this.props调用父组件的函数</div>
            </section>
        );
    }
}
export default Child;

6. 父组件获取整个子组件ref

//父组件
import React from 'react';
import Children from "./Children"
class Parents extends React.Component { 
    constructor(props) { 
        super(props);
    }
    ParentsClick=()=>{ 
        console.log("info:", this.refs.a.state.info)
        this.refs.a.WindowAlert();
        console.log(this.refs.a.refs.b.outerHTML)
    }
    render() { 
        return (
            <div>
                <h1>我是父组件</h1>
                <button onClick={ this.ParentsClick}>我在父组件中，我可以获取子组件的数据！</button>
                <Children ref="a"></Children>
            </div>
        );
    }
}
export default Parents;


//子组件
import React from 'react';
class Children extends React.Component { 
    constructor(props) { 
        super(props);
        this.state = {  
            info:"我是子组件"
         };
    }
    WindowAlert=()=>{ 
        alert("我是子组件:::children");
    }
    render() { 
        return (
            <div>
                <h2 ref="b">我是子组件</h2>
            </div>
        );
    }
}
export default Children;

7. 兄弟组件之间的传值refs、props

/** * 功能描述：子组件1可以获得子组件2的数据、方法、实例方法 */

// 父组件
import React from 'react';
import BrotherOne from "./BrotherOne"
import BrotherTwo from "./BrotherTwo"
class Parent extends React.Component { 
    constructor(props) { 
        super(props);
    }
    BrotherOneClick=()=>{ 
        console.log("info:", this.refs.BrotherT.state.info)
        this.refs.BrotherT.WindowAlert();
    }
    render() { 
        return (
            <div>
                <h1>我是父组件</h1>
                <BrotherOne content={ this.BrotherOneClick}></BrotherOne>
                <BrotherTwo ref="BrotherT"></BrotherTwo>
            </div>
        );
    }
}
export default Parent;


// 第一个子组件
import React from 'react';
class BrotherOne extends React.Component { 
    constructor(props) { 
        super(props);
    }
    render() { 
        return (
            <div>
                <h1>我是子组件1</h1>
                <button onClick={ this.props.content}>我是子组件1，但是我能够获得子组件2的数据以及相关方法！amazing</button>
            </div>
        );
    }
}
export default BrotherOne;


// 第二个子组件
import React from 'react';
class BrotherTwo extends React.Component { 
    constructor(props) { 
        super(props);
        this.state = { 
            info:"我是子组件2"
        };
    }
    WindowAlert=()=>{ 
        alert("我是子组件2---");
    }
    render() { 
        return (
            <div>
                <h1>我是子组件2</h1>
            </div>
        );
    }
}
export default BrotherTwo;

总结

1. 子组件获取父组件的数据：使用的是”props”属性，使用方法为this.props.属性。

2. 子组件调用父组件的方法：使用的是”props”属性，使用的方法为this.props.属性。

3. 子组件获取父组件的实例：使用的是”属性=this”，使用方法为this.props.属性.父组件中的内容。

1. 父组件获取子组件的数据：使用的是refs，使用方法为this.refs.名称.数据。

2. 父组件调用子组件的方法：使用的是refs，使用方法为this.refs.名称.方法名。

3. 父组件调用子组件的实例：使用的是refs，使用方法为this.refs.名称。

4. 父组件调用子组件的方法：也可以使用的是”props”属性，但是注意在子组件中传值时的写法。

1. 兄弟组件之间的传值需要结合使用refs以及props，子组件通过props调用父组件的方法，父组件对应的方法中通过ref调用兄弟组件的方法。

原文链接：https://blog.csdn.net/weixin_39893889/article/details/102736554

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。