我想创建一个处理具有相同属性/逻辑的多个HTML元素的组件。
import React from 'react';
import styled from 'styled-components';
interface GridProps {
htmlElement: 'div' | 'main' | 'header',
}
const GridFactory = (props: GridProps) => {
switch (props.htmlElement) {
case 'header':
return styled.header``;
case 'main':
return styled.main``;
case 'div': default :
return styled.div``;
}
}
export const Test = () => (
<GridFactory htmlElement='div'>
<p>content...</p>
</GridFactory>
)
它因该错误而失败:
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
我该如何实现?
由于您的styled.head
退货组件类型不是,React.Element
所以您可以如下进行改进:
将组件的返回类型指定为无状态功能组件React.SFC
,您还可以从中受益,无需指定children
prop,因为它是该类型的一部分SFC
:
const GridFactory: React.SFC<GridProps> = (props) => { ...
然后将样式化的组件分配为功能组件,例如Header
:
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
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句