javascript - 如何检查 Dom Element 还是 React Component

Question

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

WrappedComp = myHOC(BaseComponent)

MyHOC 会将额外的属性传递给包装的组件，在大多数情况下，这将按其应有的方式工作。

但有时，当 BaseComponent 是一个 li 时，它不会接受额外的 props，React 会抛出一个警告 Unkown Prop warning 说 DOM 元素不接受非-标准dom属性:https://facebook.github.io/react/warnings/unknown-prop.html

那么我如何检查 BaseComponent 是否是 DOM 元素或者其他元素？ 如果是的话，我不会将额外的 Prop 传递给它。

有更好的方法吗？

Answer 1

简短回答:
检查元素是否属于 string 类型检查元素是否是 DOM 元素。
检查元素是否属于 function 类型检查 element 是否是 React 组件。

示例:

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

长答案:
如 the React documentation 中定义，内置组件如 <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>
  )
}