如果您嘗試使用不被React識別的道具作為合法的DOM屬性/屬性來渲染DOM元素，那麽unknown-prop警告將觸發。你應該確保你的DOM元素沒有虛假的道具。

這個警告可能會出現幾個可能的原因：

1. 您是否使用{...this.props}或cloneElement(element, this.props)？您的組件直接將其自己的道具轉移到子元素（例如https://reactjs.org/docs/transferring-props.html）。將道具轉移到兒童組件時，應確保您不會意外地轉發旨在由父組件解釋的道具。
2. 您在本地DOM節點上使用非標準DOM屬性，可能表示自定義數據。如果您嘗試將自定義數據附加到標準DOM元素，請考慮使用MDN中描述的自定義數據屬性。
3. React尚未識別您指定的屬性。這可能會在未來版本的React中修復。但是，React目前會去除所有未知屬性，因此在您的React應用程序中指定它們不會導致它們被渲染。
4. 您正在使用不帶大寫字母的React組件。React將其解釋為DOM標記，因為React JSX轉換使用大寫與小寫慣例來區分用戶定義的組件和DOM標記。

為了解決這個問題，復合組件應該“消耗”用於復合組件的任何道具，而不是用於子組件。例：

不好：意外的layout道具被轉發到div標簽。

function MyDiv(props) {
  if (props.layout === ‘horizontal‘) {
    // BAD! Because you know for sure "layout" is not a prop that <div> understands.
 

    return <div {...props} style={getHorizontalStyle()} />
  } else {
    // BAD! Because you know for sure "layout" is not a prop that <div> understands.
    return <div {...props} style={getVerticalStyle()} />
  }
}

好：擴展運算符可以用來從道具上拉出變量，並把剩下的道具放到一個變量中。

function MyDiv(props) {
  const { layout, ...rest } 
 
= props
  if (layout === ‘horizontal‘) {
    return <div {...rest} style={getHorizontalStyle()} />
  } else {
    return <div {...rest} style={getVerticalStyle()} />
  }
}

好：您還可以將道具分配給新對象，並從新對象中刪除正在使用的按鍵。確保不要從原始this.props對象中刪除道具，因為該對象應該被認為是不可變的。

function MyDiv(props) {

  const divProps = Object.assign({}, props);
  delete divProps.layout;

  if (props.layout === ‘horizontal‘) {
    return <div {...divProps} style={getHorizontalStyle()} />
  } else {
    return <div {...divProps} style={getVerticalStyle()} />
  }
}

React 擴展運算符未知的支柱警告