javascript - 如何动态创建带有Tags的组件？

Question

我想为导入的组件动态创建 JSX 标签。所以我的想法是这样的:

import DemoComponent from './DemoComponent';

class DynamicRendering extends Component {

  assembleResult() {
    const {
      democomponent
    } = this.props;

    const result = [];

    if (democomponent) {
      const Tag = `DemoComponent`;
      result.push(<Tag />);
    }

    return result;
  }

  render() {
    const result = this.assembleResult();
    return result;
  }
}

这个想法是，我可以将几个不同的 props 传递给组件，然后组件动态创建 JSX 标签并将它们组装在一起。我想要这个的原因是因为我有大约 15 个组件想要动态渲染。我不想隐式地全部编写它们，而是更愿意对它们进行循环并在需要时动态创建它们。这样我就可以保持这个组件干燥。

上面代码的问题是，如果您创建这样的标签，它会将其视为 HTML 元素。这会导致错误，因为没有像“DemoComponent”这样的 HTML 元素。我设法通过创建 Prop 名称到应该加载的组件的映射来解决这个问题。请参阅下面的示例:

import DemoComponent from './DemoComponent';

const PROP_MODULE_MAP = new Map([
  ['democomponent', DemoComponent]
]);

class DynamicRendering extends Component {

  assembleResult() {
    const {
      democomponent
    } = this.props;

    const result = [];

    if (democomponent) {
      const Tag = PROP_MODULE_MAP.get('democomponent');
      result.push(<Tag />);
    }

    return result;
  }

  render() {
    const result = this.assembleResult();
    return result;
  }
}

但我想知道是否有比创建此 map 更简单的方法。还有另一种方法可以动态创建代表导入组件的 JSX 标签吗？

Answer 1

您可以让父级传递所需的组件类型:

Parent.js:

import SomeComponent from './someComponent';
import Child from './child';

// the parent renders Child and passes the type SomeComponent as a prop
const Parent = () => <Child Elem={SomeComponent} />

Child.js:

// the Child renders the component type passed
// note that the prop "Elem" is capitalized so that it will not be treated as a html node
const Child = ({Elem}) => <Elem />;

export default Child;

这样，Child 组件就能够呈现它传递的任何组件类型。这更加灵活，并且不需要Child知道它应该在编译时呈现的所有组件。

请注意，在子级中渲染传递的组件类型时，要渲染的变量必须大写，否则它将被视为通常的 html 节点。请参阅User-Defined Components Must Be Capitalized了解详情。

如果您不希望 prop 名称大写，您可以在渲染之前将值重新分配给子级中的大写名称:

const Child = ({elem: Elem}) => <Elem />;