Question

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

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

Answer 1

您只需将变量用作标记(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>
    )
}

Answer 2

您可以使用React.createElement功能动态设置名称。 JSX只是对createElement函数的合成糖。

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

小提琴：https://jsfiddle.net/omerts/Lagja2sy/

在这里您可以找到有关它的文档： https://reactjs.org/docs/react-api.html#createelement

如何在ReactJS中动态设置元素名称

2 个答案: