如何避免標簽上出現錯誤“未知道具<>。 從元素中刪除該道具”？

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，都有可用屬性的白名單。 因此，傳遞給元素的所有屬性都必須在白名單中。