Reactjs React-HOC上的不变冲突

这里遗漏了一些明显的东西。我得到了

不变冲突：元素类型对于以下对象无效

：

export const ButtonWithComponent = (Comp) => props =>
<TouchableOpacity
  onPress={props.onPress}
  style={{
    paddingHorizontal: 10,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center'
  }}
  hitSlop={{ left: 5, right: 5, top: 5, bottom: 5 }}
>
  <Comp />
</TouchableOpacity>;

---

在React中，区分组件和元素非常重要：

const MyComponent = () => <span /> // Component
const myElement = <MyComponent /> // Element

export const ButtonWithComponent = (children) => props =>
<TouchableOpacity
  onPress={props.onPress}
  style={{
    paddingHorizontal: 10,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center'
  }}
  hitSlop={{ left: 5, right: 5, top: 5, bottom: 5 }}
>
   {children}
</TouchableOpacity>;

const MyComponent=（）=>//组件
常量myElement=//元素

因此，HOC接受组件，但将元素传递给它：

ButtonWithComponent（）

您有两个选择：

将组件传递到按钮WithComponent

重构包含组件的按钮以接受元素：

const MyComponent = () => <span /> // Component
const myElement = <MyComponent /> // Element

export const ButtonWithComponent = (children) => props =>
<TouchableOpacity
  onPress={props.onPress}
  style={{
    paddingHorizontal: 10,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center'
  }}
  hitSlop={{ left: 5, right: 5, top: 5, bottom: 5 }}
>
   {children}
</TouchableOpacity>;

export const按钮，其组件=（子项）=>props=>
{儿童}
;

---

谢谢，你的回答很有道理。对于2，这种可读性的唯一优势是什么？毕竟，我可以在ButtonComponent组件中使用：

和

{props.children}

。所以，是的，对于第二种情况，最好只将节点作为子节点传递。作为HOC的替代方案，您可以使用渲染道具。是的，它们是多么有争议。。。在使用它们之前，我将等待更多的共识：）^这太愚蠢了-我一直在使用渲染道具。现在