react渲染列表的四種方式

注意：
class方式定義的組件名首字母大寫，如：News

方式一(直接在html中渲染)：

import React from 'react'

class News extends React.Component {
	constructor(props) {
        super(props); // 用於父子組件傳值

        this.state = {
            info: [{
                    title:'第一個標題',
                    key:'第一個key'
                },{
                    title:'第二個標題',
                    key:'第二個key'
                },{
                    title:'第三個標題',
                    key:'第三個key'
                }]
        }
    }
    
	render () {
		return (
			<div className="news">
				<ul>
	                    {
	                        this.state.info.map((item, key) => {
	                            return (
	                                <li key={key}>
	                                    <p>{item.title}</p>
	                                    <p>{item.key}</p>
	                                </li>
	                            )
	                        })
	                    }
	             </ul>
			</div>
		)
	}
}

export default News;

方式二(以參數方式渲染) ：

import React from 'react'

class News extends React.Component {
	constructor(props) {
        super(props); // 用於父子組件傳值

        this.state = {
            info: [{
                    title:'第一個標題',
                    key:'第一個key'
                },{
                    title:'第二個標題',
                    key:'第二個key'
                },{
                    title:'第三個標題',
                    key:'第三個key'
                }]
        }
    }
    
	render () {
		let listItem_1 = this.state.info.map((item, key) => {
            return (
                <li key={key}>
                    <p>{item.title}</p>
                    <p>{item.key}</p>
                </li>
            )
        })
        return (
			<div className="news">
				<ul>
                    {listItem_1}
                </ul>
			</div>
		)
	}
}

export default News;

方式三(以function方式渲染) ：

import React from 'react'

class News extends React.Component {
	constructor(props) {
        super(props); // 用於父子組件傳值

        this.state = {
            info: [{
                    title:'第一個標題',
                    key:'第一個key'
                },{
                    title:'第二個標題',
                    key:'第二個key'
                },{
                    title:'第三個標題',
                    key:'第三個key'
                }]
        }
    }
    
	listItem_2 (list) {
        let res = list.map((item, key) => {
            return (
                <li key={key}>
                    <p>{item.title}</p>
                    <p>{item.key}</p>
                </li>
            )
        })
        return (
            <ul>{res}</ul>
        )
    }
    
	render () {
        return (
			<div className="news">
				{this.listItem_2(this.state.info)}
			</div>
		)
	}
}

export default News;

方式四(以組件方式渲染) ：

這裏的ListItem組件比較複雜的情況下建議單獨抽離到一個js文件，寫法完全一樣，只是需要將組件通過export default 暴露出來

import React from 'react'

class ListItem extends React.Component {
    constructor(props){
        super(props); // props用於父子組件傳值，如果沒有值可以不
    }

    render () {
        let info = this.props;
        return (
            <div>
                <p>{info.info.title}</p>
                <p>{info.info.key}</p>
            </div>
        );
    }
}

class News extends React.Component {
	constructor(props) {
        super(props); // 用於父子組件傳值

        this.state = {
            info: [{
                    title:'第一個標題',
                    key:'第一個key'
                },{
                    title:'第二個標題',
                    key:'第二個key'
                },{
                    title:'第三個標題',
                    key:'第三個key'
                }]
        }
    }
    
	render () {
        return (
			<div className="news">
				{
                    this.state.info.map((item, index) => {
                        return <ListItem key={index} info={item}/>
                    })
                }
			</div>
		)
	}
}

export default News;