React中元件渲染使用詳解

這次帶給大家React中元件渲染使用詳解，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 <p>{button}</p>
    }
}

效果預覽

元件渲染－ 清單渲染

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 (
        <p>
            <ul>
                {lis}
            </ul>
        </p>
    )
}
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 (
        <p>
            <ul>
                {lis}
            </ul>
        </p>
    )
}
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 (
        <p>
            <ul>
                {lis}
            </ul>
        </p>
    )
}
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 (
            <p>                        
                {
                    React.Children.map(this.props.children, function(childNode){
                        return <li>{childNode}</li>
                    })
                }
            </p>
        );
    }
})
ReactDOM.render(
    <Component1>
        <span>Tom</span>
        <span>Sam</span>
    </Component1>, document.getElementById('p1'));

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

前端中排序演算法實例詳解

#PromiseA 的實作步驟詳解

#

以上是React中元件渲染使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！