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

一、条件渲染

1、条件渲染

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

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

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

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

    render() {
        if (this.props.isSignUp) {
            return 
        } else {
            return 
        }
    }
}

ReactDOM.render(
    ,
    document.getElementById('app')
);

2、阻止组件渲染

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

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

    render() {
        if (this.props.isWaring) {
            return Waring!
        } else {
            return null
        }
    }
}

ReactDOM.render(
    ,
    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 = 
Now you are logged in!
;
        	button = Log Out;
        } else {
            greeting = 
Please log in!
;
        	button = Log In;
        }

        return (
            

                {greeting}
                {button}
            
        );
    }
}

ReactDOM.render(
    ,
    document.getElementById('app')
);

二、列表渲染

1、渲染元素

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

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)=>(
            

                { number }
            
        ))
        return (
            
{ items }
        )
    }
}

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

class ItemList extends React.Component {
    render() {
        const numbers = [1, 2, 3, 4, 5]
        const items = numbers.map((number, index)=>(
            

                { number }
            
        ))
        return (
            
{ items }
        )
    }
}

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

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

3、渲染组件

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

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

    render() {
        return ( 
{ this.props.title }
 )
    }
}

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 ( 
 )
            }
        })

        return ( 
{ todoItemList }
 )
    }
}

ReactDOM.render(
    ,
    document.getElementById('app')
)

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