react根据传参的不同动态注册不同的子组件

上一篇文章介绍了关于Vue如何根据传参的不同动态注册不同的子组件，实现过程请查阅Vue.extend动态注册子组件，由Vue的这个功能我就自然联想到了使用react该如何实现同样的功能呢。其实，用react实现同样的功能会更简单，不用那么多的API，不用去查找这些平时可能用的很少的API的用法，这也是为什么很多人喜欢react的原因，react只提供了一些核心的API，至于怎么实现特定的功能，你自己想办法去实现咯，这就是足够灵活啊！！！

需要导入不同的组件还是用到了import和它的then回调方法，代码如下：

import React, { Component } from 'react'

class RegComponent extends Component {
  constructor(props){
    super(props)

    this.state = {
      component: null,
    }

  regComponentHandle(componentName){
    import(`@/pages/${componentName}`).then(res => {
      let { default: component } = res;
      this.setState({
        component,
      });
    })
  }

  render(){
    let C = this.state.component;
    let data = {
      mgs: "动态组件传参"
    }
    const props = {...this.props, data};

    return (
      <div>
        <p><button type="button " onClick={this.regComponentHandle.bind(this, 'customHooks')}>动态注册组件</button></p>

        {C ? <C {...props } /> : null}
      </div>
    )
  }
}

export default RegComponent

打完收工！

是不是很简单？

父组件向子组件传参，也很简单，如{C ? <C {...props } /> : null}

转载于:https://www.cnblogs.com/tnnyang/p/10949017.html