javascript - 你怎么称呼这个 React 组件模式？

Question

我很难找到有关此模式的一些文档。 有名字吗？

TextBase 是一个样式组件。所以我可以将其扩展如下: Text.H1 = withComponent('h1') 但是我也希望传递 html 属性。因此就有了函数组件。但是，当我扩展 Text 组件时， Prop 将被覆盖，导致所有组件都是 h1 的。

const Text = (props) => {
   const { children, testid, ...rest } = props;
   return <TextBase data-testid={testid} {...rest}>{children}</TextBase>
}
Text.defaultProps = {color: 'red'}

Text.H1 = Text
Text.H1.defaultProps = { as: 'h1'}

Text.H2 = Text
Text.H2.defaultProps = { as: 'h2'}

Text.H3 = Text
Text.H3.defaultProps = { as: 'h3'}

🙏🏽

Answer 1

尝试使用 this 绑定(bind)函数调用或使用箭头函数或使用 bind 手动绑定(bind)函数。我确信它会起作用。引用错误就是这一切