Javascript 样式化组件对HTML元素工厂作出反应

我想创建一个组件来处理具有相同属性/逻辑的多个HTML元素

从“React”导入React；
从“样式化组件”导入样式化；
界面网格道具{
htmlElement:'div'|'main'|'header'，
}
const GridFactory=（props:GridProps）=>{
开关（道具htmlElement）{
案例“标题”：
返回样式化的.header`；
“主要”案例：
返回样式。main``；
案例“div”：默认值：
返回样式为.div``；
}
}
导出常量测试=（）=>(
内容

)

它失败时会出现以下错误：

Type '{ children: Element; htmlElement: "div"; }' is not assignable to type 'IntrinsicAttributes & GridProps'.
  Property 'children' does not exist on type 'IntrinsicAttributes & GridProps'.

试过的第一个把戏 将显式子道具添加到GridProps：

interface GridProps {
  htmlElement: 'div' | 'main' | 'header',
  children?: React.ReactNode | React.ReactNode[];
}

它给出了相应的错误：

'GridFactory' cannot be used as a JSX component.
  Its return type 'StyledComponent<"header", DefaultTheme, {}, never> | StyledComponent<"div", DefaultTheme, {}, never>' is not a valid JSX element.
    Type 'StyledComponent<"header", DefaultTheme, {}, never>' is not assignable to type 'Element | null'.
      Type 'String & StyledComponentBase<"header", DefaultTheme, {}, never> & NonReactStatics<never, {}>' is missing the following properties from type 'Element': type, props, key

“GridFactory”不能用作JSX组件。
其返回类型“StyledComponent | StyledComponent”不是有效的JSX元素。
类型“StyledComponent”不可分配给类型“Element | null”。
类型“String&StyledComponentBase&NonReactStatics”缺少类型“Element”中的以下属性：类型、属性、键

---

如何实现它？

错误表示无法将道具“子项”传递给组件，因为它在道具接口声明中未提供该类型。事实上，您的GridProps接口没有声明这样的属性。子组件是将子组件传递给父组件时“设置”的道具，如示例中所示

export const Test = () => (
  <GridFactory htmlElement='div'>
    <p>content...</p> //This is passed as the children prop of your GridFactory
  </GridFactory>
)

---

现在，您的道具类型允许您传递一个子道具，因为您的

已设置样式。head

返回组件类型，而不是

React.Element

，因此您可以改进您的道具，如下所示：

将组件的返回类型指定为无状态功能组件

React.SFC

，您也可以从中受益，因为它是类型

SFC

的一部分，因此无需指定

子级

prop：

const GridFactory: React.SFC<GridProps> = (props) => { ...

总而言之，完整的代码是：

interface GridProps {
  htmlElement: 'div' | 'main' | 'header',
}

const Header: React.SFC = styled.header``;

const GridFactory: React.SFC<GridProps> = (props) => {
  switch (props.htmlElement) {
    case 'header':
      return <Header />;

    // More to come

    default: return null
  }
}

interface GridProps{
htmlElement:'div'|'main'|'header'，
}
const Header:React.SFC=styled.Header`；
const GridFactory:React.SFC=（道具）=>{
开关（道具htmlElement）{
案例“标题”：
返回；
//还有更多
默认值：返回null
}
}

我已经尝试过了，但没有成功，我将编辑我的问题以添加它和相应错误的输出。像个魔术师一样工作。我也从这个答案中学到了很多，非常感谢

const Header: React.SFC = styled.header``;

interface GridProps {
  htmlElement: 'div' | 'main' | 'header',
}

const Header: React.SFC = styled.header``;

const GridFactory: React.SFC<GridProps> = (props) => {
  switch (props.htmlElement) {
    case 'header':
      return <Header />;

    // More to come

    default: return null
  }
}