Question

我想使用自定义道具进行测试，我将其称为“dataHook”，在使用它时我会收到此警告。

示例代码：

<div dataHook="header-title">test me</div>

在运行时我会得到这个：

Warning: Unknown prop `dataHook` on <div> tag. Remove this prop from the element.
    in div (created by GBT)

我理解为什么警告显示，但我知道情况和这段代码对我来说完全没问题，如何禁用它？

Answer 1

dataHook不是div元素接受的有效属性。如果要使用HTML5 data- *属性，则需要对其进行连字：

<div data-hook="header-title">...</div>

在React中，所有DOM属性和属性（包括事件处理程序）都应该是camelCased。例如，HTML属性tabindex对应于React中的属性tabIndex。 例外是aria- *和data- *属性，应该是小写的。

- React's documentation on DOM Elements

或者您可以创建自己的自定义组件，该组件返回div元素：

class MyComponent extends React.component {
  render() {
    const { children, dataHook } = this.props;

    // do something with the custom property

    return <div>{children}</div>
  }
}

...

<MyComponent dataHook="header-title">...</MyComponent>

如何禁用React的“警告：未知道具”？

1 个答案: