react 高阶组件的实现

npm install @babel/plugin-proposal-decorators

//在plugins数组里添加下面这个元素，保存即可
[‘@babel/plugin-proposal-decorators‘, { "legacy": true }],

// 高阶组件 myContainer
import React,{Component} from ‘react‘;

const MyContainer =(WrappedComponent)=>{
  return class extends Component{
    constructor(props){
      super(props);
      this.state={
        name:‘‘,
      };
      this.onNameChange=this.onNameChange.bind(this);

    }
    onNameChange(event){
      console.log(event.target.value);
      this.setState({
        name:event.target.value,
      })
    }
    render(){
      const newProps={
        name:{
          value:this.state.name,
          onChange:this.onNameChange
        }
      }
      return <WrappedComponent {...this.props} {...newProps}></WrappedComponent>
    }
  }
}
export default MyContainer;

//需要用高阶组件中的peops的组件
import React,{Component} from ‘react‘;
import MyContainer from ‘../Mycontainer/index‘;

@MyContainer
class MyComponent extends Component{
  componentDidMount=()=>{
    console.log(this.props)
  }
  render(){
    return <input name="MyComponent" {...this.props.name} onChange={this.props.name.onChange}></input>
  }
}
export default MyComponent;