react-智能组件与傻瓜组件

第一版

 运行效果

代码

 myLabe.js

import React, { Component} from 'react';
// 傻瓜组件
class MyLable extends Component {
    constructor(props) {
        super(props);
        this.onFun = props.onFun;
        this.lab = props.lab;
    }
    render() {
        return (
            <div className="App">
              <p>{this.lab}</p>
              <button onClick={this.onFun}></button>
            </div>
        );
    }
}
// 智能组件
class MyFrame extends Component{
    onFun(){
        alert("onFun");
    }
    render(){
        return<MyLable onFun={this.onFun} lab="lab" />
    }    
}
// eslint-disable-next-line no-undef
export default MyFrame;

index.js 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import MyFrame from './myLable';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<MyFrame lab="lab" />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

说明

以简单的react工程为基础，其他代码略

第二版 

代码

import React, { Component} from 'react';
// 傻瓜组件
class MyLable extends Component {
    render(props) {
        const {onFun,lab} = this.props;
        return (
            <div className="App">
              <p>{lab}</p>
              <button onClick={onFun}></button>
            </div>
        );
    }
}
// 智能组件
class MyFrame extends Component{
    onFun(){
        alert("onFun");
    }
    render(){
        return<MyLable onFun={this.onFun} lab="lab" />
    }    
}
// eslint-disable-next-line no-undef
export default MyFrame;

说明

仅代码编号，其他完全一样