我尝试编写一个React组件。对于html标题标签(h1、h2、h3等),其中标题优先级根据我们在属性中定义的优先级动态变化。
这就是我想要做的。
<h{this.props.priority}>Hello</h{this.props.priority}>
预期输出:
<h1>Hello</h1>
这不管用。有没有什么可行的方法可以做到这一点?
发布于 2015-11-02 14:31:11
没有办法做到这一点,只需将其放在一个变量(with first letter capitalised)中:
const CustomTag = `h${this.props.priority}`;
<CustomTag>Hello</CustomTag>
发布于 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);
发布于 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
。
https://stackoverflow.com/questions/33471880
复制相似问题