通过属性，但在React中例外

Question

有时我们都会做的常见。自定义组件中的wrap dom元素

＆lt; customcomponet id =“ abc” title =“ abc” nondomprop =“ abc” ... andsoforth/＆gt;

示例中的自定义组件button 具有属性ID和标题但不是nondomprop，所以我得到警告是有道理的按钮 dom元素，我只是将所有道具传递给button dom element带有传播操作员＆lt; button {... props}/＆gt;

解决此问题的一种方法是手动仅通过按钮使用的道具，但是我想知道是否有一种方法告诉传播运营商使用所有传递的。 .props，但要忽略nondomprop。

我试图进行Google搜索，但我找不到我想要的东西，所以我想也许我可以指向正确的方向。

Answer 1

您可以使用以下方式破坏 props 对象：

const { nonDomProp, ...propsButton } = props;
return(
 <button {...propsButton} />
)

或直接来自 customcomponent 函数的参数：

const CustomComponent = ({ nonDomProp, ...props }) => {
...
return(
 <button {...props} />
)
}

docs： https://github.com/tc39/proposal-object--rest-spread-spread#rest-pread-properties