Question

我有一个父组件，可以动态加载子组件：

父项：

// ... 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} />

Answer 1

我需要将传入的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>
    );
  }

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

1 个答案: