1. 程式人生 > 實用技巧 >React之填充資料

React之填充資料

import React from 'react';


import '../assets/css/index.css';

import logo from '../assets/images/1.jpg';

class News extends React.Component{

    constructor(props){
        super(props);
        this.state={
            msg:'新聞',
            list:['11111111111','222222222222','3333333333333'],            
            
            list2:[<h2 key='1'>我是一個h2</h2>,<h2 key='2'>我是一個h2</h2>],


            list3:[

                {title:"新聞11111111"},
                {title:"新聞22222"},
                {title:"新聞33333333"},
                {title:"新聞444444444"}
            ]
        }
    }

    render(){

        let listResult=this.state.list.map(function(value,key){

                return <li key={key}>{value}</li>
        })



        return(
            <div className="news">

                {this.state.msg}

                <img src={logo} />
                <img src={require('../assets/images/1.jpg')} />

                <img src="https://www.baidu.com/img/xinshouye_353af22a7f305e1fb6cfa259394dea9b.png" />


                <hr/>
               

                {this.state.list2}
                <hr/>
                <ul>
                     {listResult}
                </ul>

                 <hr/>

                <ul>

                     {

                        this.state.list3.map(function(value,key){

                            return (<li key={key}>{value.title}</li>);

                        })
                    }
                </ul>

            </div>
        )
    }

}

export default News;