React 教程第三篇—— 组件渲染

组件渲染 —— 条件渲染（动态组件）

不少状况下组件是动态渲染的，好比登陆状态，若是已登陆则显示退出登陆，不然显示登陆

import React from 'react'

let Login = (props) => {
    return <input type="button" value="login" onClick={props.click}/>;
}


let Logout = (props) => {
    return <input type="button" value="logout" onClick={props.click}/>;
}

export default class CP extends React.Component{
    state = {
        status: 0
    }

    login(){
        this.setState({status: 1})
    }

    logout(){
        this.setState({status: 0})
    }

    render(){
        let button = null;
        if(this.state.status == 0){
            button = <Login click={this.login.bind(this)}/>
        } else {
            button = <Logout click={this.logout.bind(this)} />
        }

        return <div>{button}</div>
    }
}

效果预览

组件渲染 —— 列表渲染

React 没有指令，因此在列表渲染时得借助数组来完成。

列表渲染 —— 简单实现

import React from 'react'
import ReactDOM from 'react-dom'

let Component1 = () => {
    let lis = [<li key="Javascript">Javascript</li>, <li key="Vue">Vue</li>, <li key="React">React</li>]

    return (
        <div>
            <ul>
                {lis}
            </ul>
        </div>
    )
}

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

列表渲染 —— 循环 for

import React from 'react'
import ReactDOM from 'react-dom'

let Component1 = () => {
    let data = ['Javascript', 'Vue', 'React']

    let lis = [];
    for(let frm of frms){
        lis.push(<li key={frm}>{frm}</li>)
    }

    return (
        <div>
            <ul>
                {lis}
            </ul>
        </div>
    )
}

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

列表渲染 —— 循环 map

import React from 'react'
import ReactDOM from 'react-dom'

let Component1 = () => {
    let data = ['Javascript', 'Vue', 'React']

    let lis = data.map((frm) => {
        return <li key={frm}>{frm}</li>
    });

    return (
        <div>
            <ul>
                {lis}
            </ul>
        </div>
    )
}

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

列表渲染 —— 对象数组

import React from 'react'
import ReactDOM from 'react-dom'

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

    static defaultProps = {
        students: [
            {id: 1, name: 'Tom', age: 18, gender: 1}, 
            {id: 2, name: 'Sam', age: 22, gender: 1}, 
            {id: 3, name: 'Lucy', age: 20, gender: 0}
        ]
    }

    getKeys(item = {}){
        return Object.keys(item)
    }
    render(){
        return (
            <table>
                <thead>
                    <tr>
                        {
                            this.getKeys(this.props.students[0]).map((key) => {
                                return <th key={key}>{key}</th>
                            })
                        }
                    </tr>
                </thead>
                <tbody>
                    {
                        this.props.students.map((obj) => {
                            return (
                                <tr key={obj.id}>
                                    {
                                        this.getKeys(obj).map((key, idx) => {
                                            return <td key={key + idx}>{obj[key]}</td>
                                        })
                                    }
                                </tr>
                            )
                        })
                    }
                </tbody>
            </table>
        )
    }
}

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

列表渲染 —— 键(Keys)

由于 React 是虚拟 DOM 到真实 DOM 的一个过程，而 DOM 自己就是一个对象，对象默认没有惟一标识，因此须要手动指定。

键(Keys) 帮助 React 标识哪一个项被修改、添加或者移除了。数组中的每个元素都应该有一个惟一不变的键(Keys)来标识。

键(Keys)用到列表渲染中，同辈元素中必须是惟一的。

组件渲染 —— 组件子节点

由于组件的调用是将组件当成一个 DOM 节点使用，因此组件里面能够包含子节点。React 对组件的子节点经过 this.props.children 来获取，一般this.props.children会有如下几种状况

1. 若是当前组件没有子节点，它就是 undefined
2. 若是有一个子节点，数据类型是 object
3. 若是有多个子节点，数据类型就是 array

为了解决这种数据类型不一致致使在使用的过程当中要不断判断的状况，React 提供了一个方法Reacth.Children来处理该属性。

var Component1 = React.createClass({
    render: function(){
        return (
            <div>                        
                {
                    React.Children.map(this.props.children, function(childNode){
                        return <li>{childNode}</li>
                    })
                }
            </div>
        );
    }
})

ReactDOM.render(
    <Component1>
        <span>Tom</span>
        <span>Sam</span>
    </Component1>, document.getElementById('div1'));

效果预览