关于自定义组件时，数据的传递和事件的调用机制

最新推荐文章于 2024-09-03 10:16:11 发布

醉小义

最新推荐文章于 2024-09-03 10:16:11 发布

阅读量393

点赞数

分类专栏：Ｒeact

本文链接：https://blog.csdn.net/qq_30638831/article/details/89155823

版权

Ｒeact 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

本文探讨了React中自定义组件的数据传递和事件调用机制。通过实例演示了如何在父组件与子组件间传递属性和方法，以及事件处理过程中的回调机制。深入解析了在多级组件中，如何绑定并传递属性和方法，以及事件触发后的处理流程。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>render</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/prop-types/15.6.1/prop-types.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
/*
    关于自定义组件时，数据的传递和事件的调用机制。
        数据的传递：  Base中this.props获取的父类传递的方法和属性
        事件的调用机制 ： 参考 <Enhance name="123" age="18"   onClick={ this.testHandle } />中的onClick  666



*/

class Base extends React.Component {

    constructor(props) {
      super(props);
      
      this.state = {
          name: 'abc'
      }
   }

    // 当继承时， <Enhance name="123" age="18"   onTest={ this.testHandle }， 父类获取属性  this.props
    getinfo() {
        // console.log(this.props)
        console.log(this.state)
    }

    getBase() {
        this.getinfo() // 调用自己本身的方法

        console.log(this.props) // 回去父类的方法

        this.props.onClick() //这类调用Enhance类的testHandle方法，回调机制

        console.log('--getBaee--')
    }

    onClick(e) {
        console.log('---2. Base -- onClick---');
        this.props.onClick()  // 这里的onClick调用的是Test类的testHandle方法，这点穿透方法和回调
    }

}
 
class Enhance extends Base {
    
    constructor(props) {
      super(props);

      this.state = {
          age: 12
      }
    } 

    clickHandle = e => {
        console.log('1-----clickHandle')
        this.onClick(e);
    };

    render() {
        this.getBase()
        console.log(this.state)

        // 这里获取Test传递的方法和属性， clickHandle处理过后，调用父类的onClick方法
        const {name, age, onClick}  = this.props ;

        return (
            <button  onClick={this.clickHandle}>
                大话西游2
            </button>
        );
  }
};


class Test extends React.Component {
    
    
    constructor(props) {
      super(props);
    }

    testHandle() {
        console.log('---3. Base class skip to Handle ---')
    }

    render() {
      
        return (
            <div >
                <Enhance name="123" age="18"   onClick={ this.testHandle } />
            </div>
        );
    }


}


ReactDOM.render(<Test  />, document.getElementById('example'));

</script>

</body>
</html>

方法2:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>render</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/prop-types/15.6.1/prop-types.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
 
<div id="example"></div>
<script type="text/babel">
/*
    关于自定义组件时，数据的传递和事件的调用机制。
        在Base类中绑定属性和方法，传递给子类，666
        当点击时，按钮时，输出
            -base onclick-
            ---3. Base class skip to Handle ---     
*/
 
class Base extends React.Component {
 
    constructor(props) {
      super(props);
      
      this.state = {
          name: 'abc'
      }
   }
   
   
    static defaultProps = {
        onClick: ()=>{}
    };
 
    // 当继承时， <Enhance name="123" age="18"   onTest={ this.testHandle }， 父类获取属性  this.props
    getinfo() {
        // console.log(this.props)
        console.log(this.state)  
    }
  
    // 这个方法的目的， 是为了在父类绑定一些方法和属性，在子类中使用
    getProps() {
        const {name, age, ...other} = this.props; //这里是获取，父类中用户传递过来的参数（<Enhance name="123" age="18"   onClick={ this.testHandle } />） 注意这里的用法
        //const {name, age, onClick} = this.props; 
        console.log(name);
        console.log(other.onClick);  // other是以对象的形式保存，other.onClick 获取的是testHandle方法
        const props = {
            name,
            age,
            onClick: this.onClick.bind(this),
            getBase: this.getBase.bind(this)

        }
        return props;
    }
 
    getBase() {
        this.getinfo() // 调用自己本身的方法
 
        console.log(this.props) // 回去父类的方法
 
        this.props.onClick() //这类调用Enhance类的testHandle方法，回调机制
 
        console.log('--getBaee--')
    }
    
    // 这个方法的目的是为了 在处理过点击事件后，传递给子类
    onClick() {
        console.log('-base onclick-')

        // 这里代表调用的是Tets类的testHandle方法
        this.props.onClick();
    }
  
 
}
 
class Enhance extends Base {
    
    constructor(props) {
      super(props);
 
      this.state = {
          age: 12
      }
    } 
 
    clickHandle = e => {
        console.log('1-----clickHandle')
        this.onClick(e);
    };
 
    render() {
       
        const props = this.getProps(); // 当前的this为
        console.log(props)
        return (
            <button  {...props}>
                大话西游2
            </button>   
        );
  }
};
 
 
class Test extends React.Component {
    
    
    constructor(props) {
      super(props);
    }
 
    testHandle() {
        console.log('---3. Base class skip to Handle ---')
    }
 
    render() {
      
        return (
            <div >
                <Enhance name="123" age="18"   onClick={ this.testHandle } onClick1={ ()=>{} } />
            </div>
        );
    }
 
 
}
 
 
ReactDOM.render(<Test  />, document.getElementById('example'));
 
</script>
 
</body>
</html>