如何检查 Dom 元素或 React 组件

Question

创建 HOC 时，我不确定将包装哪种组件，有时它是另一个 React 组件，有时它可能是一个普通的 DOM 元素，如liand a。

WrappedComp = myHOC(BaseComponent)

MyHOC 会将额外的 props 传递给被包装的组件，并且在大多数情况下这会正常工作。

但有时当 BaseComponent 是例如 anli它不会接受额外的道具并且 React 会抛出警告Unkown Prop Warning说 DOM 元素不接受非标准 dom 属性：https : //facebook.github.io/react/warnings/unknown-道具.html

那么如何检查 BaseComponent 是 DOM 元素还是其他元素呢？如果是，我不会将额外的道具传递给它。

有一个更好的方法吗？

Answer 1

简短回答：
检查 element 是否为类型string以检查 element 是否为 DOM 元素。
检查 element 是否是类型function来检查 element 是否是 React 组件。

例子：

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

长答案：
正如React 文档中所定义的，内置组件如<li>or<span>会产生字符串'li'or'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
}