如何将 React 组件作为子组件传递并在此组件内添加道具

Question

我有对象

const obj = {
 name: 'Milk', component <Milk />;
 name: 'Bread', component <Bread />;
 name: 'Tea', component <Tea />;
}

我将这个对象作为 prop 发送给子组件。在这个子组件中，我应该发送选择的组件并添加数量作为道具

const view = obj.map((item) => item.name === product.name)
return (
 {view.component}
)

结果只发送了 <Milk />，但我需要 <Milk quantity={quantity} /> 我能以某种方式向对象添加道具吗？我在父组件里做不到。

Answer 1

您可以 re-structure 您的对象是这样的：

const obj = {
  Milk: <Milk />,
  Bread: <Bread />,
  Tea: <Tea />,
};

然后，在检索到它之后，您可以使用 cloneElement 方法添加道具：

const view = obj[product.name]
if (view) {
    const viewWithProps = React.cloneElement(view, { quantity: <custom-quantity> })
    return (
        {viewWithProps}
    )
}

如何将 React 组件作为子组件传递并在此组件内添加道具

How to pass React component as a child and add props inside this conponent

reactjs

react-props