使用带有 props 的子组件动态响应
React dynamically using sub-components with props
也许有更好的方法,但我尽量使我的 React 组件可重用。所以我正在使用 bootstrap Card 并且在这张 Card 中我想动态地从外部(使用道具)放置不同的组件。没有道具它工作正常。但是使用 props 我收到一条错误消息 "Error: Cannot find module '../../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'/>
好像我不能延迟加载道具。很奇怪。
顺便说一句。如果有更简单的方法动态使用子组件,我就不需要使用延迟加载。我只是认为这是唯一的方法。
有几个选项:
第一个使用 'slots,',您可以在 React 文档中阅读 here, or an article 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" />
也许有更好的方法,但我尽量使我的 React 组件可重用。所以我正在使用 bootstrap Card 并且在这张 Card 中我想动态地从外部(使用道具)放置不同的组件。没有道具它工作正常。但是使用 props 我收到一条错误消息 "Error: Cannot find module '../../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'/>
好像我不能延迟加载道具。很奇怪。
顺便说一句。如果有更简单的方法动态使用子组件,我就不需要使用延迟加载。我只是认为这是唯一的方法。
有几个选项:
第一个使用 'slots,',您可以在 React 文档中阅读 here, or an article 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" />