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'));

效果預覽