纯小白React入门（二）条件渲染条件渲染允许根据给定条件动态的渲染内容 1.使用条件语句或三元运算符 2.使用逻辑与

条件渲染

条件渲染允许根据给定条件动态的渲染内容

1.使用条件语句或三元运算符

class MyComponent extends React.Component {
    render() {
        const isLoggedIn = this.props.isLoggedIn;

        return (
            <div>
                {isLoggedIn ? <WelcomeUser /> : <LoginButton />}
            </div>
        );
    }
}

2.使用逻辑与（&&）运算符如果条件为真，则渲染后面的内容

class MyComponent extends React.Component {
    render() {
        const isLoggedIn = this.props.isLoggedIn;

        return (
            <div>
                {isLoggedIn && <WelcomeUser />}
            </div>
        );
    }
}

3.使用条件渲染函数

class MyComponent extends React.Component {
    renderContent() {
        if (someCondition) {
            return <ComponentA />;
        } else {
            return <ComponentB />;
        }
    }

    render() {
        return (
            <div>
                {this.renderContent()}
            </div>
        );
    }
}

渲染列表

主要有以下几种方式

export default function ItemList() {
    const items = ['Item 1', 'Item 2', 'Item 3'];
    const listItems = items.map((item, index) => {
        return <li key={index}>{item}</li>;
    });
    return <ul>{listItems}</ul>;
}

使用唯一ID作为key

export default function ItemList() {
    const products = [
        {title: 'Cabbage', isFruit: false, id: 1},
        {title: 'Garlic', isFruit: false, id: 2},
        {title: 'Apple', isFruit: true, id: 3},
    ];
    const listItems = products.map(product =>
        <li key={product.id}>{product.title}</li>
    );
    return <ul>{listItems}</ul>;
}

响应事件

可以通过事件处理程序来响应用户的交互操作

import React from 'react';

class ClickCounter extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        };
    }

    handleClick = () => {
        this.setState(prevState => ({
            count: prevState.count + 1
        }));
    }

    render() {
        return (
            <div>
                <p>Click Count: {this.state.count}</p>
                <button onClick={this.handleClick}>Click Me</button>
            </div>
        );
    }
}

export default ClickCounter;

不要调用事件处理函数：只需 把函数传递给事件 即可

更新页面

import { useState } from 'react';

function MyButton() {
    const [count, setCount] = useState(0);
    function handleClick() {
        setCount(count + 1);
    }

    return (
        <button onClick={handleClick}>
            Clicked {count} times
        </button>
    );
}

export default function MyApp() {
    return (
        <div>
            <h1>Counters that update separately</h1>
            <MyButton />
            <MyButton />
        </div>
    );
}

多次渲染同一个组件，每个组件都会拥有自己的 state

组件间共享数据

通过Props传递数据：父组件可以通过Props将数据传递给子组件。这适用于单向数据流的情况，父组件可以将数据传递给子组件，子组件可以读取这些数据并展示。如果数据发生变化，父组件可以通过更新Props来重新渲染子组件

import {useState} from 'react';

export default function MyApp() {
    const [count, setCount] = useState(0);

    function handleClick() {
        setCount(count + 1);
    }

    return (
        <div>
            <h1>Counters that update together</h1>
            <MyButton count={count} onClick={handleClick}/>
            <MyButton count={count} onClick={handleClick}/>
        </div>
    );
}

function MyButton({count, onClick}) {
    return (
        <button onClick={onClick}>
            Clicked {count} times
        </button>
    );
}

调试工具

codesandbox