jsx和React中的动态标记名
jsx和React中的动态标记名
提问于 2015-11-02 14:26:57
我尝试编写一个React组件。对于html标题标签(h1、h2、h3等)，其中标题优先级根据我们在属性中定义的优先级动态变化。
这就是我想要做的。
<h{this.props.priority}>Hello</h{this.props.priority}>
预期输出：
<h1>Hello</h1>
这不管用。有没有什么可行的方法可以做到这一点？
回答 4
Stack Overflow用户
回答已采纳
发布于 2015-11-02 14:31:11
没有办法做到这一点，只需将其放在一个变量(with first letter capitalised)中：
const CustomTag = `h${this.props.priority}`;
<CustomTag>Hello</CustomTag>Stack Overflow用户
发布于 2021-06-02 18:33:43
你可以试一试。我是这样实现的。
import { memo, ReactNode } from "react";
import cx from "classnames";
import classes from "./Title.module.scss";
export interface TitleProps {
children?: ReactNode;
className?: string;
text?: string;
variant: Sizes;
}
type Sizes = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
const Title = ({
className,
variant = "h1",
text,
children,
}: TitleProps): JSX.Element => {
const Tag = `${variant}` as keyof JSX.IntrinsicElements;
return (
<Tag
className={cx(`${classes.title} ${classes[variant]}`, {
[`${className}`]: className,
})}
>
{text || children}
</Tag>
);
};
export default memo(Title);Stack Overflow用户
发布于 2021-07-07 09:22:34
我只想补充一下，如果它们是自定义组件，例如<Foo />、<Bar />。您可以执行以下操作：
const condition = 'condition here'
const Comp = condition ? <Foo /> : <Bar />然后在render函数中使用<Comp />，如下所示：
const render = () => <Comp prop='value' />使用此模式的常见情况是多种类型的组件共享相同的props。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33471880
复制相关文章
相似问题