1. 程式人生 > >2 react資料渲染

2 react資料渲染

1 集合(使用map)

#父元件
class App extends Component {
  render() {
    const user={
      name:"heloo",
      hobbies:["sport","read"]
    }
    return (
      <div className="App">
        <Header></Header>
        <Home name={'zhangsan'} age={12} user={user}></Home>
      </div>
    );
  }
}
#子元件
export default class Home extends Component{
	render() {
	    return (
	      <div>
		      <h1>Home</h1>
		      <div>{this.props.name}</div>
		      <ul>
         		 {this.props.user.hobbies.map((hobby,i) => <li key={i}>{hobby}</li>)}
       		  </ul>
	      </div>	
	    );
 	 }
}

注意:key是必須要的,不然程式會報錯