数据渲染

一、循环渲染

---

1.1 通过 map 循环渲染

function App() {
    const array = [
        {
            name: '剑姬',
            price: 6300,
        },
        {
            name: '剑圣',
            price: '450',
        },
        {
            name:'亚索',
            price:6300
        }
    ];
    return (
        <div className="App">
            <ul>
                {array.map((item, index) => {
                    return <li key={index}>{item.name}</li>;
                })}
            </ul>
        </div>
    );
}

export default App;

1.2 通过 map 与 三元运算符 实现过滤循环渲染

function App() {
    const array = [
        {
            name: '剑姬',
            price: 6300,
        },
        {
            name: '剑圣',
            price: 450,
        },
        {
            name: '亚索',
            price: 6300,
        },
    ];
    return (
        <div className="App">
            <ul>
                {array.map((item, index) => {
                    return item.price > 450 ? (
                        <li key={index}>{item.name}</li>
                    ) : null;
                })}
            </ul>
        </div>
    );
}

export default App;

二、条件渲染

2.1 与运算符 渲染

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            show: true,
        };
    }
    render() {
        return <div>{this.state.show && <h3>张文强</h3>}</div>;
    }
}

2.2 三目运算符渲染

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            show: true,
        };
    }
    render() {
        return <div>{this.state.show ? '真' : '假'}</div>;
    }
}