使用带有道具的子组件动态反应答案

【问题标题】：React dynamically using sub-components with props使用带有道具的子组件动态反应
【发布时间】：2020-04-18 10:07:51
【问题描述】：

也许有更好的方法，但我尽量让我的 React 组件可重用。所以我使用的是引导卡，在这张卡里面我想动态地从外面（用道具）放置不同的组件。没有道具它工作正常。但是使用道具我收到一条错误消息“错误：找不到模块'../../pages/Dummy'”。

这很完美：

import React, {Suspense} from 'react';
import { MDBCard, MDBCardBody } from "mdbreact";

const Area = (props) => {

    const OtherComponent = React.lazy(() => import('../../pages/Dummy'));

    return (
            <MDBCard className="text-center">
                <MDBCardBody>
                    <Suspense fallback={<div>Loading...</div>}>
                        <OtherComponent/>
                    </Suspense>
                </MDBCardBody>
            </MDBCard>
    );
};

export default Area;

这不起作用：

import React, {Suspense} from 'react';
import { MDBCard, MDBCardBody } from "mdbreact";

const Area = (props) => {

    const OtherComponent = React.lazy(() => import(props.compName));

    return (
            <MDBCard className="text-center">
                <MDBCardBody>
                    <Suspense fallback={<div>Loading...</div>}>
                        <OtherComponent/>
                    </Suspense>
                </MDBCardBody>
            </MDBCard>
    );
};

export default Area;

从外面打电话：

<Area compName='../../pages/Dummy'/>

这就像我不能延迟加载道具。很奇怪。

顺便说一句。如果有更简单的方法来动态使用子组件，我不需要使用延迟加载。我只是认为这是唯一的方法。

【问题讨论】：

标签： javascript reactjs mdbootstrap mdbreact

【解决方案1】：

有几个选项：

第一个使用“插槽”，您可以在 React 文档here 或文章here 中阅读。

const DummyOne = React.lazy(() => import('../../pages/DummyOne');
const DummyTwo = React.lazy(() => import('../../pages/DummyTwo');

const Area = ({ comp }) => {
  return (
    <MDBCard className="text-center">
      <MDBCardBody>
        <Suspense fallback={<div>Loading...</div>}>
          {comp}
        </Suspense>
      </MDBCardBody>
    </MDBCard>
  );
}

// You dynamically pass the component itself into 'Area'
<Area comp={<DummyOne />} />

第二个选项更接近你所拥有的：

const Area = ({ compName }) => {
  const components = {
    DummyOne: React.lazy(() => import('../../pages/DummyOne'),
    DummyTwo: React.lazy(() => import('../../pages/DummyTwo'),
  }

  const DynamicComponent = components[compName];

  return (
    <MDBCard className="text-center">
      <MDBCardBody>
        <Suspense fallback={<div>Loading...</div>}>
          <DynamicComponent />
        </Suspense>
      </MDBCardBody>
    </MDBCard>
  );
}

// You dynamically pass the component name to 'Area' as a string
<Area compName="DummyOne" />

【讨论】：