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

问题描述

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

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.

这是我尝试做的事情.

你好

预期输出:

你好

这不起作用.有没有可能的方法来做到这一点?

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屋！