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 }