有没有办法通过单个 props 传递 JSX props？

Question

我有一个我无法更改的组件。它的内容是固定的，超出了我的能力范围。

function Button(props) {
   return <button {...props} />
}

可用作：

<Button onClick={...} disabled={...} />

我的问题是是否可以将我发送给它的道具组合在一个“超级”道具中，例如

<Button componentProps={{ onClick: ..., disabled: ... }} />

无需更改组件的代码。与嵌套子级或使用

children

属性传递它们类似。

Answer 1

您可以包装 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 组件。