How do I disable React's "Warning: Unknown Identity"?
I want to use a self-defined prop for testing, and I call it "dataHook", I get this warning when using it.
Sample code:
<div dataHook="header-title">test me</div>
at runtime I will get this:
Warning: Unknown prop `dataHook` on <div> tag. Remove this prop from the element.
in div (created by GBT)
I understand why this warning is showing, but I know that the circumstances and this code are completely consistent with me, how to disable this?
source to share
dataHook
is not a valid property that the element takes div
. If you want to use the data- * HTML5 attribute, you need to wrap it:
<div data-hook="header-title">...</div>
In React, all DOM properties and attributes (including event handlers) must be camelCased. For example, the tabindex of the HTML attribute corresponds to the tabIndex attribute in React. An exception is the aria- * and data- * attributes, which must be minified.
Or, alternatively, you can create your own component that returns an element 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>
source to share