如何在ReactJS中动态设置元素名称 [英] How to set element name dynamically in ReactJS

问题描述

如何在reactjs中动态设置元素名称？我正在使用库将加密货币图标显示为列表。使用该库，我们可以将比特币图标表示为< Btc /> ，依此类推。可以说，我已经定义了一系列加密货币名称（Btc，Eth，Sc等）作为状态调用 crypto 。使用 map 函数如何动态设置元素名称？

How can I set element name dynamically in reactjs ? I'm using this library to show cryptocurrecy icons as a list. Using the library we can get Bitcoin icon as <Btc /> and so on. Lets say I've define an array of Cryptocurrency names(Btc, Eth, Sc etc) as a state call crypto. Using map function how can I set the element name dynamically ?

render(){
 return(
  <div>
   {this.state.crypto.map( crypto => {
    <h3>{crypto}</h3>
    <{crypto} />
   }
  </div>
 )
}

推荐答案

您可以简单地将变量用作标记（唯一的要求是变量以大写字母开头）：

You can simply use variable as tag (the only requirement is that variable starts with uppercase letter):

render(){
    return(
        <div>
            {this.state.crypto.map(Crypto => (
                <div>
                    <h3>{crypto}</h3>
                    <Crypto />
                </div>
            ))}
        </div>
    )
}

这篇关于如何在ReactJS中动态设置元素名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！