Reactjs 这个JSX标签'；s'；儿童'；道具需要类型'；绝不'；它需要多个子项，但只提供了一个子项。ts（2745）

我正在编写一个组件

Text

，它接受

size

prop，根据它可以返回一个样式化的组件。我使用样式化组件中的多态

作为
道具来实现这一点。但是，当TypeScript不断抛出这些错误时。我还使用瞬态道具来防止将StyledText的道具传递到ReactNode

对于
组件

This JSX tag's 'children' prop expects type 'never' which requires multiple children, but only a single child was provided.ts(2745)

对于样式化组件中的
as
prop

No overload matches this call.
  Overload 1 of 2, '(props: Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "color" | "slot" | ... 252 more ... | "onTransitionEndCapture"> & { ...; } & StyledTextProps, "color" | ... 259 more ... | "$align"> & Partial<...>, "color" | ... 259 more ... | "$align"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type 'string' is not assignable to type 'never'.ts(2769)


没有与此调用匹配的重载。
重载2的第1个，'（props:Pick&{…；}&{…；}）：ReactElement'给出了以下错误。
类型“string”不可分配给类型“never”。ts（2769）

我在中创建了一个简化的示例

任何关于我做错了什么或推荐阅读的建议都是非常感谢的

同时粘贴以下代码：

从“React”导入React；
从“样式化组件”导入样式化；
导出接口TextProps{
颜色？：“主要”|“次要”|“主要文本”|“次要文本”|“错误”；
尺寸？：“1”|“2”|“3”|“4”|“5”|“6”|“上划线”；
重量？：“正常”；“粗体”；“粗体”；“较轻”；“数字”；
显示？：“内联”|“块”|“继承”；
对齐？：“左”|“右”|“中心”|“对齐”|“初始”|“继承”；
子节点？：React.ReactNode；
}
接口样式TextProps{
$color？：文本道具[“color”]；
$size？：文本道具[“大小”]；
$weight？：文本道具[“weight”]；
$display？：文本道具[“display”]；
$align？：文本道具[“align”]；
}
const StyledText=styled.span`
字体系列：var（--默认字体系列）；
保证金：0；
显示：${（props）=>（props.$display？props.$display:`inherit`}；
文本对齐：${（props）=>（props.$align？props.$align:`inherit`}；
字体重量：${（道具）=>（道具。$weight？道具。$weight:`normal`}；
`;
const sizeToHeading:记录={
“0”：“p”，
“1”：“h1”，
“2”：“h2”，
“3”：“h3”，
“4”：“h4”，
“5”：“h5”，
“6”：“h6”
};
导出常量文本=React.forwardRef(
（{…props}，ref）=>{
返回(
{props.children}
);
}
);
更新

无需将
as
类型添加到
StyledTextProps
，更改
sizeToHeading
类型即可

更新的代码沙盒


更新

无需将
as
类型添加到
StyledTextProps
，更改
sizeToHeading
类型即可

更新的代码沙盒


请查看我的更新，无需将
as
type添加到
StyledTextProps
请查看我的更新，无需将
as
type添加到
StyledTextProps
您知道这背后的原因吗？虽然该功能甚至在以前就可以工作，但TS却用扭曲的线条给出了这些令人讨厌的错误。现在他们已经解决了，但我不完全理解为什么会起作用。请您解释一下好吗？因为
as
只接受
元素类型
。虽然
p
，
h1
是
ElementType
，但是如果你说它是
字符串而不是
ElementType
，typescript会将它们视为不兼容的，即使它们在usSo看来是一样的，也会返回正确的类型，
as
可以识别
p
不是一个简单的字符串，而是ElementType中的一个成员。我承认打字错误很难猜出背后的意思。。。。有时需要通读index.d.ts
才能找到像这样的正确类型。是的..我找到了。谢谢你的回复！你知道这背后的原因吗？虽然该功能甚至在以前就可以工作，但TS却用扭曲的线条给出了这些令人讨厌的错误。现在他们已经解决了，但我不完全理解为什么会起作用。请您解释一下好吗？因为
as
只接受
元素类型
。虽然
p
，
h1
是
ElementType
，但是如果你说它是
字符串而不是
ElementType
，typescript会将它们视为不兼容的，即使它们在usSo看来是一样的，也会返回正确的类型，
as
可以识别
p
不是一个简单的字符串，而是ElementType中的一个成员。我承认打字错误很难猜出背后的意思。。。。有时需要通读index.d.ts
才能找到像这样的正确类型。是的..我找到了。谢谢你的回复！
const sizeToHeading: Record<string, React.ElementType> = { // use ElementType here
  "0": "p",
  "1": "h1",
  "2": "h2",
  "3": "h3",
  "4": "h4",
  "5": "h5",
  "6": "h6"
};


interface StyledTextProps {
  $color?: TextProps["color"];
  $size?: TextProps["size"];
  $weight?: TextProps["weight"];
  $display?: TextProps["display"];
  $align?: TextProps["align"];
  as?: React.ElementType; // mark `as` as react element type which are fundamental html tags
}

const sizeToHeading: Record<string, React.ElementType> = { // use ElementType here as well
  "0": "p",
  "1": "h1",
  "2": "h2",
  "3": "h3",
  "4": "h4",
  "5": "h5",
  "6": "h6"
};