我有一个我无法更改的组件。它的内容是固定的,超出了我的能力范围。
function Button(props) {
return <button {...props} />
}
可用作:
<Button onClick={...} disabled={...} />
我的问题是是否可以将我发送给它的道具组合在一个“超级”道具中,例如
<Button componentProps={{ onClick: ..., disabled: ... }} />
无需更改组件的代码。与嵌套子级或使用
children
属性传递它们类似。
您可以包装 Button 组件以接受单个 prop 对象。这是一个简单的例子:
function Button(props) {
return <button {...props} />
}
function ButtonWrapper({ componentProps }) {
return <Button {...componentProps} />;
}
// Now you can use it like this:
<ButtonWrapper componentProps={{ onClick: () => console.log("Clicked!"), disabled: true }} />
此包装器可让您在一个对象中传递所有道具,而无需更改原始 Button 组件。