条件付きレンダリング&リスト&キーに反応する

条件付きレンダリング

条件付きレンダリングは比較的簡単です。公式 Web サイトの関連ドキュメントを読むだけです。

リスト

マップ経由でリストをレンダリングします。

class HelloWorld extends React.Component {
  constructor(props){
    super(props);
    this.state = ({
      arr: [1,2,3,4]
    })
  }  
  render(){
    return (
      <ul>
        {
          this.state.arr.map(item=>(
            <li>li_{item}</li>
          ))
        }  
      </ul>
    )
  }
}
// 通过调用React自身方法render可以得到当前组件的实例对象,并渲染到页面容器.
ReactDOM.render(<HelloWorld />,document.getElementById('root'));

鍵

エラーが見つかりました。 Each child in a list should have a unique "key" prop. つまり、トラバースする各要素には一意のキーが必要です。これは Vue と同じで、react が下部でレンダリングするときにコンポーネントを区別するために使用されます。原則として、配列の添字を次のように使用することはできません。キーです。配列の追加や削除は添え字に影響するため、データには一意の値を指定する必要があります。
ここで決定するarr項目はそれぞれ一意であり、その値をキーとして使用できます。実際の開発では、配列要素オブジェクトの ID をキーとして使用することをお勧めします。

class HelloWorld extends React.Component {
  constructor(props){
    super(props);
    this.state = ({
      arr: [1,2,3,4]
    })
  }  
  render(){
    return (
      <ul>
        {
          this.state.arr.map(item=>(
            <li key={item}>li_{item}</li>
          ))
        }  
      </ul>
    )
  }
}
// 通过调用React自身方法render可以得到当前组件的实例对象,并渲染到页面容器.
ReactDOM.render(<HelloWorld />,document.getElementById('root'));