如何檢查 Dom 元素或 React 組件

Question

在創建 HOC 時，我不確定將包裝哪種組件，有時它是另一個 React 組件，有時它可能是一個普通的 DOM 元素，如li和a 。

WrappedComp = myHOC(BaseComponent)

MyHOC 會將額外的 props 傳遞給被包裝的組件，並且在大多數情況下這會正常工作。

但有時當 BaseComponent 是一個li它不會接受額外的道具，React 會拋出一個警告Unkown Prop Warning說 DOM 元素不接受非標准的 dom 屬性： https : //facebook.github.io/react/警告/未知prop.html

那么我如何檢查 BaseComponent 是 DOM 元素還是其他元素呢？ 如果是，我不會將額外的道具傳遞給它。

有一個更好的方法嗎？

Answer 1

簡短的回答：
檢查元素是否為string類型以檢查元素是否為 DOM 元素。
檢查 element 是否屬於function類型以檢查 element 是否是 React 組件。

例子：

  if (typeof BaseComponent.type === 'string') {
    return BaseComponent
  }
  // add props

長答案：
如React 文檔中所定義，像<li>或<span>這樣的內置組件會導致字符串'li'或'span'被傳遞給React.createElement ，例如React.createElement("li") 。
以大寫字母開頭的類型如<Foo />編譯為React.createElement(Foo)並對應於在 JavaScript 文件中定義或導入的組件。

因此，React 組件的類型是function ，而 DOM 組件的類型是string 。

以下WrapperComponent記錄每個子元素的typeof child.type 。 輸出是function , string , string 。

function WrappedComponent({children}) {
  return React.Children.map(children, child => {
    console.log(typeof child.type)
    ...
  })
}

const BaseComponent = ({children}) => children

function App() {
  return (
    <WrappedComponent>
      <BaseComponent>This element has type of function🔥</BaseComponent>
      <span>This element has type of string</span>
      <li>This element has type of string</li>
    </WrappedComponent>
  )
}

Answer 2

檢查BaseComponent是否是React組件，並添加所需的props。

if(BaseComponent.prototype.isReactComponent){
    //add props
}