React学习笔记(四) 条件渲染与列表渲染

一、条件渲染

1、条件渲染

在 React 中，我们可以通过创建不同的组件封装不同的行为，然后根据应用的状态渲染对应状态下的部分内容

// 定义组件封装登陆行为
class SignIn extends React.Component {
    constructor(props) {
        super(props)
    }
    
    render() {
        return <h1>Please Sign In</h1>
    }
}

// 定义组件封装注册行为
class SignUp extends React.Component {
    constructor(props) {
        super(props)
    }
    
    render() {
        return <h1>Please Sign Up</h1>
    }
}

// 根据用户是否已经登陆决定渲染哪个组件
class Greeting extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        if (this.props.isSignUp) {
            return <SignIn />
        } else {
            return <SignUp />
        }
    }
}

ReactDOM.render(
    <Greeting isSignUp={false} />,
    document.getElementById('app')
);

2、阻止组件渲染

在某些情况下，我们希望可以隐藏元素，这时候我们需要让 render() 返回 null 即可

class Warning extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        if (this.props.isWaring) {
            return <span>Waring!</span>
        } else {
            return null
        }
    }
}

ReactDOM.render(
    <Warning isWarning={false}/>,
    document.getElementById('app')
);

3、元素变量

我们可以使用变量储存元素，使得我们可以有条件地渲染组件的一部分

class LoginControl extends React.Component {
    constructor(props) {
        // 1、传递 props
        super(props);
        // 2、初始 state
        this.state = {isLoggedIn: false};
        // 3、为事件处理函数绑定组件实例
        this.handleLoginClick = this.handleLoginClick.bind(this);
        this.handleLogoutClick = this.handleLogoutClick.bind(this);
    }

    handleLoginClick() {
    	this.setState({isLoggedIn: true});
    }

    handleLogoutClick() {
    	this.setState({isLoggedIn: false});
    }

    render() {
        // 使用变量根据条件储存元素
        let greeting;
        let button;

        if (this.state.isLoggedIn) {
            greeting = <h1>Now you are logged in!</h1>;
        	button = <button onClick={this.handleLogoutClick}>Log Out</button>;
        } else {
            greeting = <h1>Please log in!</h1>;
        	button = <button onClick={this.handleLoginClick}>Log In</button>;
        }

        return (
            <div>
                {greeting}
                {button}
            </div>
        );
    }
}

ReactDOM.render(
    <LoginControl isLoggedIn={false} />,
    document.getElementById('app')
);

二、列表渲染

1、渲染元素

在 React 组件中，我们可以通过 map() 方法快速渲染列表元素，我们先来看一个小例子

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone"></script>
</head>

<body>
    <div id="app"></div>

    <script type="text/babel">
        class ItemList extends React.Component {
            render() {
                const numbers = [1, 2, 3, 4, 5]
                const items = numbers.map((number)=>(<li>{ number }</li>))
                return (<ul>{ items }</ul>)
            }
        }

        ReactDOM.render(
            <ItemList />,
            document.getElementById('app')
        );
    </script>
</body>

</html>

2、key 属性

在上面的例子中，虽然可以正常显示元素，但是当我们打开控制台的时候，会看到有一条警告信息

Warning: Each child in a list should have a unique "key" prop.

我们可以通过给每个列表元素分配一个 key 属性来解决上面这个问题

class ItemList extends React.Component {
    render() {
        const numbers = [1, 2, 3, 4, 5]
        const items = numbers.map((number)=>(
            <li key={ number.toString() }>
                { number }
            </li>
        ))
        return (
            <ul>{ items }</ul>
        )
    }
}

一个元素的 key 最好是这个元素在列表中拥有的独一无二的字符串，万不得已的情况下也可以使用元素索引

class ItemList extends React.Component {
    render() {
        const numbers = [1, 2, 3, 4, 5]
        const items = numbers.map((number, index)=>(
            <li key={ index }>
                { number }
            </li>
        ))
        return (
            <ul>{ items }</ul>
        )
    }
}

如果列表项目的顺序会发生改变，那么不建议使用索引作为 key，因为这样可能会导致性能问题，甚至会引起组件状态的问题

在默认的情况下，即我们没有显式指定 key 时，React 将使用索引作为列表项目的 key

3、渲染组件

除了可以使用 map() 方法渲染多个元素，还可以使用 map() 渲染多个组件，请看一个例子

class TodoItem extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        return ( <h3>{ this.props.title }</h3> )
    }
}

class TodoList extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            itemList: [
                {id: 0, title: 'Say Hello', isDone: true},
                {id: 1, title: 'Say Goodbye', isDone: false}
            ]
        }
    }

    render() {
        const todoItemList = this.state.itemList.map((item) => {
            if (!item.isDone) {
                return ( <li key={ item.id }><TodoItem title={ item.title } /></li> )
            }
        })

        return ( <ul>{ todoItemList }</ul> )
    }
}

ReactDOM.render(
    <TodoList />,
    document.getElementById('app')
)

【 阅读更多 React 系列文章，请看 React学习笔记 】

posted @ 2019-08-07 12:29  半虹  阅读(1851)  评论(0)  编辑  收藏  举报