React中条件渲染和循环

Posted 2020-11-26 -muzi

条件渲染

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;