Question

我有一个在常量文件中定义的数组，如下所示。

export const COMPLIANCE_CREATE_STEPS = [


    {
        name: 'Basic Info',
        component: BasicInfo,
        order: 1,
        // props: {
        //   handleChange: this.handleChange
        // }
      },
      {
        name: 'Company Rule Type',
        component: <CompanyRuleType />,
        order: 2
      }

  ]

我正在根据某些条件动态渲染组件。代码如下。

renderComponent() {
    let me = this;
    let step = constants.COMPLIANCE_CREATE_STEPS.filter(function (step, i) {
      return step.order == me.state.currentStep;
    });
    let Component = step[0].component;
    return (<Component />);
  }

现在我还需要从常量文件中为每个组件传递道具。

如果我从常量文件中删除注释的代码，则会出现以下错误。

无法读取未定义的属性“ handleChange”

呈现组件时，它应该类似于

<BasicInfo handleChange={this.handleChange} />

如何从常量文件中传递prop方法并在动态组件中使用它？

Answer 1

您需要一个在运行时访问组件实例的函数。

例如

export const COMPLIANCE_CREATE_STEPS = [
{
    name: 'Basic Info',
    component: BasicInfo,
    order: 1,
    props(parent) {
      return { handleChange: parent.handleChange.bind(parent), foo: 'bar' }
    }
  },
  {
    name: 'Company Rule Type',
    component: <CompanyRuleType />,
    order: 2
  }
]

然后使用当前实例对其进行调用

renderComponent() {
    const step = constants.COMPLIANCE_CREATE_STEPS
       .find(step => step.order === this.state.currentStep)

    const { component: Cmp, props } = step

    return <Cmp {...(typeof props === 'function' ? props(this) : props)} />
}

Answer 2

您没有在组件类中声明handleChange方法，而是键入

<BasicInfo handleChange={this.handleChange} />

您说它可以在组件内部找到，这是不正确的。

将prop方法传递给动态组件-reactjs

2 个答案: