如何在两个不同的微前端组件之间传递道具
如何在两个不同的微前端组件之间传递道具
提问于 2022-02-17 09:50:09
我使用的是微前端，因为我有一个使用这两个微前端组件的主容器，这三个组件在不同的回购程序中。
我在一次回购中有一个反应组件：
class CustomForm extends React.Component {
...
render() {
return (
<div>
{this.props.component}
</div>
);
}
}在另一个回购(其他微前端组件)中，我有一个使用它的不同组件：
class SomeContainer extends React.Component {
render() {
let someObjectVariable = {someProperty: 'someValue'};
return (
<CustomForm
component={<SomeInnerComponent someProp={'someInnerComponentOwnProp'}/>}
object={someObjectVariable}
/>
);
}
}有办法在两个不同的微前端组件之间传递道具吗？
回答 1
Stack Overflow用户
发布于 2022-02-17 10:03:02
您的component在CustomForm中的类型将需要接受ReactNodes。
但是您应该能够将它作为一个函数传递过来(意思是没有<和/>。
如果不需要传递任何自定义道具，只需调用<CustomForm component={SomeInnerComponent} .... />即可。
如果您需要自定义道具，您可以将其包装在另一个函数中，然后通过以下方式传递：
<CustomForm component={ () => {
return <SomeInnerComponent someProp={'someInnerComponentOwnProp'}/>;
}} ...... />这背后的原因是，由于function中的功能组件实际上只是函数，所以您可以在没有<或/>的情况下作为支柱通过组件，然后它将作为函数执行。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71155807
复制相关文章
相似问题
腾讯云开发者
