将组件作为道具传递给另一个组件

Question

我正在尝试创建一个"AB测试“组件：

import React from 'react';
import PropTypes from 'prop-types';

const AbTest = ({ components, criteriaToMatch }) => {
  let componentToRender;

  components.forEach((component) => {
    if (component.criteria === criteriaToMatch) {
      componentToRender = component.instance;
    }
  });

  return componentToRender;
};

AbTest.propTypes = {
  components: PropTypes.arrayOf(PropTypes.shape({
    instance: PropTypes.func,
    criteria: PropTypes.any,
  })),
  criteriaToMatch: PropTypes.oneOfType([
    PropTypes.bool,
    PropTypes.string,
    PropTypes.number,
  ]),
};

export default AbTest;

然后您将像这样使用它：

import MyComponentA from '../my-component-a';
import MyComponentB from '../my-component-b';

<AbTest
  components={[
    { instance: MyComponentA, criteria: 'A' },
    { instance: MyComponentB, criteria: 'B' },
  ]}
  criteriaToMatch="A"
/>

因此，您将传递给它一个组件数组，每个组件都有一些条件，并且任何时候都会呈现匹配。但我说错了：

函数作为React子函数无效。

Answer 1

从AbTest组件中，必须返回以下组件实例

const AbTest = ({ components, criteriaToMatch }) => {
  let ComponentToRender;

  components.forEach((component) => {
    if (component.criteria === criteriaToMatch) {
      ComponentToRender = component.instance;
    }
  });

  return <ComponentToRender />;
};