使用变量来储存元素。它可以帮助你有条件的渲染组件的一部分,而输出的其他部分不会更改。
import React,{Component} from 'react'
export default class If extends Component{
render(){
// 显示文字的组件
function Wel(){
return <h2>welcome lily</h2>
}
function Guest(){
return <h2>please sign in up</h2>
}
function Greeting (props){
// let isLogin=props.isLogin;
if(props.isLogin){ //根据 <Greeting isLogin={isLogin}/> 传入的props属性:isLogin的true或false渲染文字
return(
<Wel />
)
}else{
return <Guest />
}
}
// 元素变量 button
function LoginButton(props){
return <button onClick={props.onCick}>Login</button> //props.onClick 接收属性 onCick={(e) => this.handleClick(e)}
}
function LogoutButton(props){
return <button onClick={props.onClick}>Logout</button>
}
class LoginControl extends Component{ //创建一个名为 LoginControl 的有状态的组件
constructor(props){
super(props)
this.state={
isLogin:false
}
}
handleClick(){
console.log(111)
this.setState({
isLogin:false
})
}
handleClick2(){
console.log(222)
this.setState({
isLogin:true
})
}
render(){
const isLogin=this.state.isLogin
let button=null
if(isLogin){
button=<LoginButton onCick={(e) => this.handleClick(e)}/> //onCick 是作为props属性 传给类LoginButton
}else{
button= <LogoutButton onClick={(e) => this.handleClick2(e)}/>
}
return(
<div>
{/* 作为状太或属性传props都可以 */}
{/* <Greeting isLogin={this.state.isLogin}/> */}
<Greeting isLogin={isLogin}/>
{button}
</div>
)
}
}
return(
<div>
<LoginControl />
</div>
)
}
}