如何避免标签上出现错误“未知道具<>。 从元素中删除该道具”？

Question

Please, how can I rewrite this code another way to avoid the error below?

     render() {
            const { children, ...props } = this.props;
            return <div {...props} ref={this.setRef}>{children}</div>
      }

I get this error:

Unknown prop onClickOutside on tag. Remove this prop from the element. For details ( https://facebook.github.io/react/docs/higher-order-components.html#static-methods-must-be-copied-over )

Answer 1

Native DOM elements only allowed to have Native DOM attributes. You can't pass any attribute (prop) you want.
If you know what valid props you need to this element you can destruct them out of props and pass them explicit.
For example:

 render() {
            const { children, onClickOutside } = this.props;
            return <div onClick={onClickOutside} ref={this.setRef}>{children}</div>
      }

Answer 2

You can simply remove in from the ...props you transfer:

render() {
            const { children, onClickOutside, ...props } = this.props;
            return <div {...props} ref={this.setRef}>{children}</div>
      }

If you want onClickOutside to map to the onClick of the div , then handle this explicitly:

render() {
            const { children, onClickOutside, ...props } = this.props;
            return <div {...props} onClick={onClickOutside} ref={this.setRef}>{children}</div>
      }

Any version of React < 16.x, have a whitelist of available attributes. So, all attributes passed to elements must be in the whitelist.