如何将组件作为参数发送到另一个组件中的函数?

Question

在我的例子中，我有一个组件'1,2,3，....在另一个主组件A中导入。在组件'A'中进行了一些操作，在组件'1,2,3…

我必须发送一些道具给这个被过滤的组件并渲染这个被过滤的组件。我张贴我的代码，请看看。谢谢你。

const LineItemViewComponent = [{
lineItem: "AR008",
component: <AR008Users />,  
},{
lineItem: "AR009",
component: <AR009Users />,
},{
lineItem: "AR010",
component: <AR010Users />,
},];
const filterData = LineItemViewComponent.filter((eh) => eh.lineItem === this.props.each.lineItem);
const viewDataFunction = () => {
const {component} = filterData
return <>
<component assessClicked={assessClicked}
count={this.state.count}
setAssessApi={this.setAssessApi} />
</>;
};

AR008Users和AR009Users为导出组件。

我期望的是使用过滤组件来呈现JSX数据，并希望向该组件发送props，如下所示:

<component assessClicked={assessClicked}
count={this.state.count}
setAssessApi={this.setAssessApi} />

Answer 1

在你的对象中，你应该使用对组件的引用，而不是使用jsx来实例化它们。

然后在你的渲染部分，你应该使用find或提取[0]项，因为filter返回一个数组。

最后，你应该大写组件变量。

const LineItemViewComponent = [
{
lineItem: "AR008",
component: AR008Users
},
{
lineItem: "AR009",
component: AR009Users
},
{
lineItem: "AR010",
component: AR010Users
}
];
const filterData = LineItemViewComponent.find(
(eh) => eh.lineItem === this.props.each.lineItem
);
const viewDataFunction = () => {
const { component: Component } = filterData;
return (
<>
<Component
assessClicked={assessClicked}
count={this.state.count}
setAssessApi={this.setAssessApi}
/>
</>
);
};

Answer 2

尝试这样做(确保您导出了将使用默认导出导入的组件):

const LineItemViewComponent = [{
lineItem: "AR008",
component: AR008Users,  
},{
lineItem: "AR009",
component: AR009Users,
},{
lineItem: "AR010",
component: AR010Users,
},];