React中條件渲染和循環

條件渲染

React 中的條件渲染和 JavaScript 中的一樣，使用 JavaScript 運算符 if 或者條件運算符去創建元素來表現當前的狀態，然后讓 React 根據它們來更新 UI。
具體實現可以看下面的例子
1.在 src -> components 文件夾中，再新建 list.js ，具體代碼如下：

import React, { Component } from 'react';
class List extends Component {
    //  狀態的初始化一般放在構造器中
    constructor(props){
        super(props);

        this.state = {
            goods: [
                {id: 1,text: '條件渲染'},
                {id: 2,text: '循環渲染'}
            ],
        }
    }
    render() {
        return (
            <div>
                {/* 條件渲染 */}
                { this.props.title && <h1>{this.props.title}</h1> } {/* 短路邏輯 */}

                {/* 列表渲染 */}
                <ul>
                    {this.state.goods.map( good  => <li key={good.id}>{good.text}</li> )}
                </ul>
            </div>
        );
    }
}

export default List;

2.然后在 src -> index.js 導入組件，再使用，具體代碼如下：

import React from 'react';
import List from './component/List'

function App() {
  return (
    <div>
      {/* 條件渲染與循環 */}
      <List title="條件渲染與循環Demo"></List>
    </div>
  );
}
export default App;