class 組件

組件封裝

list

import React from 'react'
import ArtItem from './ArtItem'

export default class ArtisList extends React.Component{
    constructor(){
        super()
        this.state={
            arts:[
                {id:1,title:'a',content:'123'},
                {id:2,title:'b',content:'123'},
                {id:3,title:'c',content:'123'},
                {id:4,title:'d',content:'123'},
            ]
        }
    }
    render(){
        return this.state.arts.map(item=><ArtItem {...item} key={item.id}></ArtItem>)
    }
}

item

import React from 'react'

export default function ArtItem(propos){
    return <div>{propos.id}-{propos.title}-{propos.content}</div>
}