JSXインライン関数（プログラムで設定されていますか？）

Question

状態に関する真の値をチェックし、それに応じてクラスを設定したいと思います。下のコードはこれだけですが、...

これをプログラムで実行する方法はありますか？forループを使用してインライン関数チェックをすべて追加する方法がありますか？

なぜなら、何百ものアイテムがある場合があり、同じコードを何度も繰り返して貼り付けたくないからです。

ご協力いただければ幸いです。ありがとうございます！

class App extends React.Component { 
 
    constructor() { 
 
    super(); 
 
     
 
    this.state = { 
 
     item1: false, 
 
     item2: true, 
 
     item3: false 
 
    } 
 
    } 
 
    
 
    render() {  
 
    return(
 
     <div className="app"> 
 
     <ul> 
 
      <li data-item="item1" className={(this.state.item1) ? "active" : null}>Item 1</li> 
 
      <li data-item="item2" className={(this.state.item2) ? "active" : null}>Item 2</li> 
 
      <li data-item="item3" className={(this.state.item3) ? "active" : null}>Item 3</li> 
 
     </ul> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById('app'));

.active { 
 
    color: green; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="app"></div>

Answer 1

これらの数千人が存在する場合、彼らはおそらく、配列ではなくオブジェクトにする必要があります。しかし、必要に応じてオブジェクトのプロパティ名を配列として取得できます。

class App extends React.Component { 
 
    constructor() { 
 
    super(); 
 

 
    // Turning items into an array 
 
    this.state = { 
 
     items: [ 
 
     {name: "item1", label: "Item 1", state: false}, 
 
     {name: "item2", label: "Item 2", state: true}, 
 
     {name: "item3", label: "Item 3", state: false} 
 
     ] 
 
    }; 
 
    } 
 
    
 
    render() {  
 
    return(
 
     <div className="app"> 
 
     <ul> 
 
      {/* Loop through the items, outputting them*/} 
 
      {this.state.items.map(item => (
 
      <li data-item={item.name} className={item.state ? "active" : null}>{item.label}</li> 
 
     ))} 
 
     </ul> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById('app'));

.active { 
 
    color: green; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="app"></div>

は私たちにアイテムのラベルを与えるためにあなたの既存のオブジェクトに加えて別のオブジェクトを使用して（コメントを参照してください）：（コメントを参照）の代わりに、配列を使用して

class App extends React.Component { 
 
    constructor() { 
 
    super(); 
 
     
 
    this.state = { 
 
     item1: false, 
 
     item2: true, 
 
     item3: false 
 
    }; 
 
    
 
    // The labels we want on the items 
 
    this.itemNames = { 
 
     item1: "Item 1", 
 
     item2: "Item 2", 
 
     item3: "Item 3" 
 
    }; 
 
    } 
 
    
 
    render() {  
 
    return(
 
     <div className="app"> 
 
     <ul> 
 
      {/* Loop through the items, outputting them*/} 
 
      {Object.keys(this.state).map(key => (
 
      <li data-item={key} className={this.state[key] ? "active" : null}>{this.itemNames[key]}</li> 
 
     ))} 
 
     </ul> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById('app'));

.active { 
 
    color: green; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="app"></div>