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

Question

请，我该如何以另一种方式重写此代码，以避免出现以下错误？

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

我收到此错误：

标签上的未知道具onClickOutside 。 从元素中删除此道具。 有关详细信息（ https://facebook.github.io/react/docs/higher-order-components.html#static-methods-must-be-copied-over ）

Answer 1

仅允许本机DOM元素具有本机DOM属性。 您不能传递所需的任何属性（属性）。
如果您知道此元素需要什么有效道具，则可以将它们从道具中破坏出来，并显式传递它们。
例如：

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

Answer 2

您可以简单地从转移的...props删除：

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

如果您希望onClickOutside映射到div的onClick ， onClickOutside明确处理此问题：

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

任何版本的React <16.x，都有可用属性的白名单。 因此，传递给元素的所有属性都必须在白名单中。