react组件通讯

Dear 丶 2023-01-13 01:51 256阅读 0赞

React 的组件可以定义为 class 或函数的形式

函数组件
    <script type="text/babel">
    function HelloMessage(props) {
    	return <h1>Hello World!</h1>;
    }
    
    const element = <HelloMessage />;//组件名
    
    ReactDOM.render(
    	element,
    	document.getElementById('example')
    );
    </script>
    
    or
    
    es6 class定义组件
    class Welcome extends React.Component {
      render() {
        return <h1>Hello, {this.props.name}</h1>;
      }
    }

--------------------

组件传参

# 父传子（传递参数） #

父传子（传递参数）：是最基础的传值，父传子 采用props的格式。
    
    函数组件写法：
    <script type="text/babel">
    function Clock(props) {
      return (
        <div>
          <h1>Hello, world!</h1>
          <h2>现在是 {props.name}</h2>
        </div>
      );
    }
    
    
      ReactDOM.render(
        <Clock name='zhangsan' />,
        document.getElementById('example')
      );
    
    
    </script>
    
    or
    
    es6 class写法
    注意：需要注意的是在 render() 方法中，需要使用this.props替换props
    
    <script type="text/babel">
    class Clock extends React.Component {
      render() {
        return (
          <div>
            <h1>Hello, world!</h1>
            <h2>现在是 {this.props.name}</h2>
          </div>
        );
      }
    }
    
    
      ReactDOM.render(
        <Clock name='张三' />,
        document.getElementById('example')
      );
    
    
    </script>

# 2.子传父（传递参数） #

子传父（传递参数）:在子组件向父组件传值中，是通过父组件向子组件的props传递一个方法，让子组件调用这个方法，将子组件的数据传递给父组件的方法进行处理
    
    缺
    
    or
    
    es6 class写法
    //父组件
    import Child from './child.js'
    
    import React, { Component } from 'react';
    export default class Parent extends Component {
    //用于接收子组件的传值方法，参数为子组件传递过来的值
    
      getData1=(data)=>{
        console.log(data);
      }
      render() {
        return (
          <div>
            父组件
            {/*渲染子组件，设置子组件访问的方法， getData属性名为子组件中调用的父组件方法名 */}
    
            <Child getData={this.getData1}/>
          </div>
        )
      }
    }
    //子组件
    
    import React, { Component } from 'react';
    export default class Child extends Component {
      render() {
        return (
          <div>
            {/*通过props属性获取父组件的getdata方法，并将*/}值传递过去*/}
    
            <button onClick={() => { this.props.getData('hello') }}>hello</button>
          </div>
        )
      }
    }

# 3.兄弟组件传参 #

**组件A**\--`传值`\-->**父组件**\--`传值`\-->**组件B**

其实可以理解为把前两个步骤又重新做了一遍，即先执行子组件传值父组件，然后再执行父组件传值子组件，效果如下图：

缺
    
    or
    
    es6 class写法
    //父组件
    import Child1 from './child1.js'
    import Child2 from './child2.js'
    
    
    import React, { Component } from 'react';
    export default class Parent extends Component {
    //构造函数
        constructor(){
            super();
            this.state = {
                mess: ' '
            }
        }
    //用于接收子组件的传值方法，参数为子组件传递过来的值
    
      getData1=(data)=>{
           this.setState({
        	    mess: data
        });
      }
      render() {
        return (
          <div>
            父组件
            {/*渲染子组件，设置子组件访问的方法， getData属性名为子组件中调用的父组件方法名 */}
    
            <Child1 getData={this.getData1}/>
            <Child2 mess={this.state.mess}/>
    
          </div>
        )
      }
    }
    //子组件1
    
    import React, { Component } from 'react';
    export default class Child1 extends Component {
      render() {
        return (
          <div>
            {/*通过props属性获取父组件的getdata方法，并将*/}值传递过去*/}
    
            <button onClick={() => { this.props.getData('hello') }}>hello</button>
          </div>
        )
      }
    }
    
    
    //子组件2
    
    import React, { Component } from 'react';
    export default class Child2 extends Component {
      render() {
        return (
          <div>
    
            {this.props.mess}
          </div>
        )
      }
    }

--------------------

# 1.父调子（调用方法）  #

父调子（调用方法）：
    缺
    
    or
    
    es6 class写法
    //父组件
    import Child from './child.js'
    
    import React, { Component } from 'react';
    export default class Parent extends Component {
      getDS=(data)=>{
        // 调用组件进行通信
        this.refs.getSwordButton.childMethod();
      }
      render() {
        return (
          <div>
            父组件
            <Child ref="getSwordButton"/>
            <button onClick={this.getDS}>父组件</button>
          </div>
        )
      }
    }
    
    
    //子组件
    import React, { Component } from 'react';
    export default class Child extends Component {
    childMethod=(data)=>{
        alert("组件之间通信成功");
      }
      render() {
        return (
          <div>
            
          </div>
        )
      }
    }

# 2.子调父（调用方法）：   同子传父  #