如何避免錯誤「標記上的Unknown prop <>從元素中刪除此prop」？

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

您可以簡單地從消除在...props你轉移：

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

如果你想onClickOutside映射到div的onClick，然後明確地處理這個問題：

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

任何版本的React < 16.x，都有可用屬性的白名單。所以，傳遞給元素的所有屬性都必須位於白名單中。

Answer 2

原生DOM元素只允許擁有原生DOM屬性。你不能傳遞任何你想要的屬性（道具）。
如果你知道這個元素需要什麼有效的道具，你可以將它們從道具上拆除並明確地傳遞給它們。
例如：

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