高阶组件2 项目实例

自己项目中写一个高阶组件，插入到body中，用完销毁

在项目中实际场景是一个选人组件，点击选人之后，返回所选人员的信息，之前是存在localstorage里，太麻烦了，每个页面都要写引入和回调。用这种方式的话每次用完就不留痕迹。在点击事件时调这个函数，插入到body里，选中的结果在回调中传给原页面，这个div用完就即时销毁掉了。

class Hoctest extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      list: [
        {
          value: "apple",
          name: "苹果"
        },
        {
          value: "banana",
          name: "香蕉"
        },
        {
          value: "pear",
          name: "梨"
        }
      ],
      selected: null
    }
    ;
  }
  
  render() {
    let t = this, { list } = t.state;
    return (
      <div className="hoctest main t-FBV">
        {
          list && list.map((item)=>{
            return <div key={item.value} onClick={()=>{this.setState({selected: item})}} className={"item"}>{item.name}</div>
          })
        }
        <div className="cancel" onClick={()=>{this.props.handleCancel()}}>取消</div>
        <div className="confirm" onClick={()=>{this.props.handleOk(this.state.selected)}}>确定</div>
      </div>
    );
  }
  
  componentWillMount() {
  }
  
  componentDidMount() {
  }
  
  componentWillReceiveProps(nextProps) {
  }
  
  shouldComponentUpdate(nextProps, nextState) {
    return true;
  }
  
  componentWillUpdate(nextProps, nextState) {
  }
  
  componentDidUpdate(prevProps, prevState) {
  }
  
  componentWillUnmount() {
  }
}

上面是自己写的一个简单的组件，项目中是想要用这个组件并返回所选中的水果

下面写一个包裹的组件， 将上面的组件插入到body

/**
 * 包裹组件
 * @param config 外部传入的配置
 */
const withPersistentData = config =>{
  /*
    创建div 并插入到body中
   */
  let div = document.createElement('div');
  div.className = 'hoc-test';
  document.body.appendChild(div);
  
  /**
   * 销毁 div
   * @param args
   */
  function destroy(...args) {
    // react 提供的方法 unmountComponentAtNode 销毁指定容器内的所有React节点
    const unmountResult = ReactDOM.unmountComponentAtNode(div);
    if (unmountResult && div.parentNode) {
      div.parentNode.removeChild(div);
    }
    // 如果有传入取消的函数，则在此处执行
    if (config.handleCancel) {
      config.handleCancel(...args);
    }
  }
  /**
   * 点击确定
   * @param args
   */
  function handleOk(...args) {
    // 执行传入的确定函数 并销毁元素
    config.handleOk(...args);
    destroy(...args);
  }
  
  /**
   * 渲染  
   * provider 连接store  项目中用到的是redux,如果不需要用到store中的数据，可以省略
   * @param props
   */
  function render(props){
    // 将模板转为HTML语言，并插入指定的DOM节点
    ReactDOM.render(<Provider store={store}><Hoctest {...props} /></Provider>, div);
  }
  render({ ...config, handleCancel: destroy, handleOk });
}

export default withPersistentData;

使用时：

import HOCtest from "components/hoctest/Hoctest";
            
             <div
               onClick={()=>{
                 HOCtest({
                   handleOk: (data)=>{
                     console.log(data)
                     console.log("selected data_-------")
                   }
                 })
               }}
            >
              HOC Test
            </div>