応答コンポーネントの動的作成

5245 ワード
JavaScript React テキストリンク
反応素子を動的に生成する方法を考える.
次のコードを参照して記述する.
import React from 'react'

class MapExample extends React.Component{

    render(){
      const dummyArray = ['one', 'two', 'three', 'four', 'five'];
        return(
          <ul>
            {dummyArray.map((value, index) => {
              return <li key={index}>{value}</li>
            })}
          </ul>
        )
    }
    
}

export default MapExample;
配列マッピングの上記コードを取り戻すことが機能します.
stateのarrayを取得することで、コンポーネントを動的に作成できます.
render(){
        return <div id= 'RegionSelectorWrapper' className = {this.state.styleName}>
            {
                this.state.regions.map((item, index) => {
                    return <span key = {index}>{item}</span>;
                })
            }
        </div>
    }
ES 2020でダイナミックな輸入を使う方法
mariadb起動エラー