如何将 props 及其方法动态传递给 React 中的组件？

debugcn 发表于 Dev

乔

我有一个动态加载子组件的父组件：

父组件：

// ... lifecycle methods et al

   setOverviewRef(ref) {
    this.OverviewHeader = ref;
  }

  setBowSizeCompareRef(ref) {
    this.bowSizeCompare = ref;
  }

  setDualVideoRef(ref) {
    this.dualVideoRef = ref;
  }

render() {

    const showComponent = (componentName, {refToPass, refMethod}) => {
      if (typeof this.state[`${componentName}`] !== undefined && this.state[`${componentName}`] !== null) {
        const Component = this.state[`${componentName}`].default;
        console.log('{refToPass, refMethod}: ', {refToPass, refMethod});
        return (
          <Component {...{ refToPass: this[`${refMethod}`] }} />
        );
      } else {
        return null;
      }
    }

    return (
      <section>
        <OverviewHeader overviewRef={this.setOverviewRef} />
        { showComponent('BowSizeCompareComponent', {refToPass: 'bowSizeCompareRef', refMethod: 'setBowSizeCompareRef' }) }
        { showComponent('DualVideoComponent', {refToPass: 'dualVideoRef', refMethod: 'setDualVideoRef' }) }
      </section>
    );
  }

假设我想要 BowSizeCompareComponent，我如何获取它以便Component返回showComponent的形式为：

<Component bowSizeCompareRef={this.setBowSizeCompareRef} />

如果是DualVideoComponent，则应采用以下形式：

<Component dualVideoRef={this.setDualVideoRef} />

乔

我需要修复传递的结构refObj来showComponent()：

render() {

    const showComponent = (componentName, refObj) => {
      if (typeof this.state[componentName] !== undefined && this.state[componentName] !== null) {
    const Component = this.state[componentName].default;
    return (
      <Component {...refObj} />
    );
  } else {
    return null;
  }
};

    return (
      <section>
        <OverviewHeader overviewRef={this.setOverviewRef} />
        { showComponent('BowSizeCompareComponent', {bowSizeCompareRef: this.setBowSizeCompareRef }) }
        { showComponent('DualVideoComponent', {dualVideoRef: this.setDualVideoRef }) }
      </section>
    );
  }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。