Reactjs 组件类型化反应类型脚本 脚本：

我创建文本组件；另一个标记组件嵌入其中

问题: 我怎样才能把它打出来？现在出现一个错误，它不接受所需的样式

错误是： 这是我的代码：

import React，{ReactNode}来自“React”；
从“/Text.module.css”导入样式；
从“classNames/bind”导入类名；
const cx=classNames.bind（样式）；
接口ITextProps{
变体：“h1”|“h2”|“h3”|“h4”|“h5”|“h6”|“p1”|“p2”|“p3”；
粗体？：布尔；
}
常量标记={
h1：‘h1’，
h2：‘h2’，
h3:‘h3’，
h4:‘h4’，
h5:‘h5’，
h6:‘h6’，
p1：‘p’，
p2：‘p’，
p3：‘p’，
};
常量文本：React.FC=（{子项，变量，粗体}）=>{
常量标记=标记[变量]；
返回{children}；
};
导出默认文本；

使用

创建并返回给定类型的新React元素。类型参数可以是
-标记名字符串（例如

'div'

或

'span'

），
-反应组件类型（类或函数），
-或者是反应片段类型

const-App=（）=>{
常量标记={
h1:“h1”，
h2:“h2”，
h3:“h3”，
h4:“h4”，
h5:“h5”，
h6:“h6”，
p1:“p”，
p2：“p”，
p3：“p”
};
const Template=React.createElement（标记['h1']，{}，'Text'）；
返回(
{Template}
);
}
render（，document.getElementById（“根”））

使用

创建并返回给定类型的新React元素。类型参数可以是

-标记名字符串（例如
'div'
或
'span'
），

-反应组件类型（类或函数），

-或者是反应片段类型


const-App=（）=>{
常量标记={
h1:“h1”，
h2:“h2”，
h3:“h3”，
h4:“h4”，
h5:“h5”，
h6:“h6”，
p1:“p”，
p2：“p”，
p3：“p”
};
const Template=React.createElement（标记['h1']，{}，'Text'）；
返回(
{Template}
);
}
render（，document.getElementById（“根”））
您需要在接口中添加子类的类型声明以消除此错误。子项的正确类型是React.ReactNode-尝试将您的接口修改为此

interface ITextProps {
 children: React.ReactNode
 variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p1' | 'p2' | 'p3';
 bold?: boolean;
}

您需要向接口中添加子类型声明以消除此错误。子项的正确类型是React.ReactNode-尝试将您的接口修改为此

interface ITextProps {
 children: React.ReactNode
 variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p1' | 'p2' | 'p3';
 bold?: boolean;
}

有任何帖子解决了你的问题吗？请提供一些反馈，我们将不胜感激。现在我正试图根据您的帮助更改代码。谢谢。有任何帖子解决了你的问题吗？请提供一些反馈，我们将不胜感激。现在我正试图根据您的帮助更改代码。谢谢。我做到了：const Text:React.FC=（{children，variant，bold}）=>{const Tag=React.createElement（tags[variant]，{}，children）；返回{Tag}；}；但是我不明白我是否想根据使用库classNames/bindexample:classNames={cx（{title:variant==='h1'，description:variant=='p1'}）}@MaxAkinshin将其传递给第二个参数，它会收到propsI doit:const Text:React.FC=（{children，variant，bold}）=>{const Tag=React.createElement（标记[variant]，{}，子元素）；返回{Tag}；}；但是我不明白我是否想使用库classNames/bindexample:classNames={cx（{title:variant==''h1'，description:variant=='p1'}）}@MaxAkinshin根据父元素中的props使用不同的类。如果将它传递给第二个参数，它将接收props
interface ITextProps {
 children: React.ReactNode
 variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p1' | 'p2' | 'p3';
 bold?: boolean;
}