javascript - 将组件作为 props 传递给另一个组件

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"
/>

因此，您将向其传递一组组件，每个组件都有一些条件，并且匹配的组件会被渲染。但我收到一条错误消息:

Functions are not valid as a React child

Answer 1

从 AbTest 组件中，您必须返回组件实例，例如

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

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

  return <ComponentToRender />;
};