我尝试编写一个React组件。对于html标题标签(h1,h2,h3等),其中标题优先级根据我们在道具中定义的优先级动态变化。
这是我尝试做的。
<h{this.props.priority}>Hello</h{this.props.priority}>
预期输出:
<h1>Hello</h1>
这是行不通的。有什么可能的方法可以做到这一点?
我尝试编写一个React组件。对于html标题标签(h1,h2,h3等),其中标题优先级根据我们在道具中定义的优先级动态变化。
这是我尝试做的。
<h{this.props.priority}>Hello</h{this.props.priority}>
预期输出:
<h1>Hello</h1>
这是行不通的。有什么可能的方法可以做到这一点?
Answers:
无法就地执行此操作,只需将其放在变量中(首字母大写):
const CustomTag = `h${this.props.priority}`;
<CustomTag>Hello</CustomTag>
React.createClass
,我更喜欢这种方式。谢谢。
<CustomTag foo="bar">
var foo = { bar: CustomTag }; return <foo.bar />
工作良好。
为了完整起见,如果要使用动态名称,也可以直接调用React.createElement
而不是使用JSX:
React.createElement(`h${this.props.priority}`, null, 'Hello')
这样避免了创建新变量或组件的麻烦。
搭配道具:
React.createElement(
`h${this.props.priority}`,
{
foo: 'bar',
},
'Hello'
)
从文档:
创建并返回给定类型的新React元素。type参数可以是标签名称字符串(例如
'div'
或'span'
),也可以是React组件类型(类或函数)。用JSX编写的代码将转换为use
React.createElement()
。React.createElement()
如果您使用的是JSX,通常不会直接调用。请参阅React Without JSX了解更多信息。
如果您使用的是TypeScript,则会看到如下错误:
Type '{ children: string; }' has no properties in common with type 'IntrinsicAttributes'.ts(2559)
TypeScript不知道这CustomTag
是一个有效的HTML标记名称,并抛出无用的错误。
要修复,请投射CustomTag
为keyof JSX.IntrinsicElements
!
const CustomTag = `h${this.props.priority}` as keyof JSX.IntrinsicElements;
<CustomTag>Hello</CustomTag>
Types of property 'crossOrigin' are incompatible. Type 'string | undefined' is not assignable to type '"" | "anonymous" | "use-credentials" | undefined'. Type 'string' is not assignable to type '"" | "anonymous" | "use-credentials" | undefined'.
所有其他答案都工作正常,但我会添加一些其他内容,因为这样做:
标题组件:
import React from 'react';
const elements = {
h1: 'h1',
h2: 'h2',
h3: 'h3',
h4: 'h4',
h5: 'h5',
h6: 'h6',
};
function Heading({ type, children, ...props }) {
return React.createElement(
elements[type] || elements.h1,
props,
children
);
}
Heading.defaultProps = {
type: 'h1',
};
export default Heading;
你可以像这样使用它
<Heading type="h1">Some Heading</Heading>
或者您可以有一个不同的抽象概念,例如,您可以定义一个尺寸道具,例如:
import React from 'react';
const elements = {
xl: 'h1',
lg: 'h2',
rg: 'h3',
sm: 'h4',
xs: 'h5',
xxs: 'h6',
};
function Heading({ size, children }) {
return React.createElement(
elements[size] || elements.rg,
props,
children
);
}
Heading.defaultProps = {
size: 'rg',
};
export default Heading;
你可以像这样使用它
<Heading size="sm">Some Heading</Heading>