生产模式: React中的最小化函数会改变组件函数的名称吗？

Question

在我的React项目中，我想渲染一些带有一些道具的组件，这些道具是从一个对象传递过来的(这个对象没有'name‘键！)。在这个组件中，我有一个render-condition，在这个条件中，我比较了在props中传递的组件。在条件中，我链接到组件函数的名称，因为我不想将Component_1导入到ParentComponent。下面是我的代码：

我试着重写了渲染条件并修复了我的bug！

//code with bug in production-mode
import React from 'react';
export default class ParentComponent extends React.Component {
  render() {
   const component = this.props.component;

   return (
    {component.name === 'Component_1' ? Component_1 : Component_2}
);
}

//code without bug in production-mode
import React from 'react';
import Component_1 from 'components/component1';

export default class ParentComponent extends React.Component {
  render() {
   const component = this.props.component;

   return (
    {component === Component_1 ? Component_1 : Component_2}
);
}

问题:在开发模式下，它渲染时没有错误，但在生产模式下，我在条件中有错误- component.name不等于'Component_1‘(例如:它等于't')。我的想法是-那是因为在生产中，包函数的名称是简化的，React不能验证条件。你有什么其他的想法为什么我不能引用函数名吗？

Answer 1

在生产模式下，不要将名称与普通字符串进行比较。相反，您可以尝试执行以下操作

return (
    {component.name === Component_1.name ? Component_1 : Component_2}
);

因为您返回了Component_1和Component_2，所以我猜您必须以任何一种方式导入这两个组件。