Question

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

WrappedComp = myHOC(BaseComponent)

MyHOC会将额外的道具传递给被包裹的组件，在大多数情况下，这将会发挥作用。

但有时当BaseComponent例如是li时，它不会接受额外的道具，而React会抛出警告Unkown Prop Warning，说DOM元素不接受非标准的dom属性：{{3 }}

那我怎么能检查BaseComponent是否是一个DOM元素呢？如果它是我不会传递额外的道具。

有更好的方法吗？

Answer 1

检查BaseComponent是否为React组件，并添加所需的道具。

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

Answer 2

检查元素是否为 string 类型。

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

如 the React documentation 中定义的那样，<li> 或 <span> 等内置组件会导致将字符串 'li' 或 'span' 传递给 {{1} }，例如React.createElement。
以大写字母开头的类型（如 React.createElement("li") 编译为 <Foo /> 并对应于在 JavaScript 文件中定义或导入的组件。

因此，React 组件的类型为 React.createElement(Foo)，而 DOM 组件的类型为 function。

以下 string 记录每个子元素的 WrapperComponent。输出为 typeof child.type、function、string。

string

如何检查Dom Element或React Component

2 个答案: