react核心概念实例

1条件判断与渲染

 1 class ParentCom extends React.Component{
 2     constructor(props){
 3         super(props)
 4         this.state = {
 5             isLogin:true
 6         }
 7     }
 8     render(){
 9         if(this.state.isLogin){
10             return (<Aa></Aa>)
11         }else{
12             return (<Bb></Bb>)
13         }
14     }
15 }

class ParentCom extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            isLogin:false
        }
    }
    render(){
        let element = null;
        if(this.state.isLogin){
            element = <Aa></Aa>;
        }else{
            element = (<Bb></Bb>);
        }

        return (
            <div>
                <h1>element</h1>
                {this.state.isLogin?<Aa></Aa>:<Bb></Bb>}
            </div>
        )
    }
}

2列表渲染

 1 class Welcome extends React.Component{
 2     constructor(props){
 3         super(props)
 4         this.state = {
 5             list:[
 6                 {
 7                     title:"React",
 8                     content:"内容"
 9                 },
10                 {
11                     title:"React2",
12                     content:"内容2",
13                 },
14                 {
15                     title:"React3",
16                     content:"内容3",
17                 }
18             ]
19         }
20     }
21 
22     render(){
23         
24         return (
25             <div>
26                 <h1>
27                     今天课程内容
28                 </h1>
29 
30                 <ul>
31                     {
32                         this.state.list.map((item,index)=>{
33                             return (
34                                 <li key={index} onClick={(event)=>{this.clickFn(index,item.title,event)}}>//点击传递参数

35                                     <h3>{item.title}</h3>
36                                     <p>{item.content}</p>
37                                 </li>
38                             )
39                         })
40                     }
41                     <li>
42                         <h3>这是标题</h3>
43                         <p>内容</p>
44                     </li>
45                 </ul>
46 
47             </div>
48         )
49     }

　　　　clickFn(index,title,event){}

50 }