jsx和React中的动态标签名称 [英] Dynamic tag name in jsx and React

问题描述

我尝试编写一个React组件.对于html标题标签(h1，h2，h3等)，其中标题优先级会根据我们在道具中定义的优先级动态变化.

I try to write a React component. for html heading tags(h1,h2,h3,etc...), where the heading priority dynamically changing based on the priority we have defined in the props.

这是我想做的.

<h{this.props.priority}>Hello</h{this.props.priority}>

预期输出:

<h1>Hello</h1>

这不起作用.有什么可行的方法吗?

This is not working. Is there any possible method to do this?

推荐答案

无法就地执行此操作，只需将其放入变量中即可(首字母大写):

No way to do that in-place, just put it in a variable (with first letter capitalised):

const CustomTag = `h${this.props.priority}`;

<CustomTag>Hello</CustomTag>

这篇关于jsx和React中的动态标签名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！