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;
发布了69 篇原创文章 · 获赞 16 · 访问量 3万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览