在React中,你可以创建各种不同的组件,然后根据应用的状态渲染出它们其中的一般部分。
一.用变量存储元素
可以将元素保存到一个变量中,通过为变量赋不同的值去渲染不同的元素
function LoginButton(props){ return <button onClick={props.handleClick}>Login</button> } function LogoutButton(props){ return <button onClick={props.handleClick}>Logout</button> } class LoginCtr extend React.Component{ constructor(props){ super(props); this.state={isLogin:false} } logOut(){ this.setSate({ isLogin:false }) } logIn(){ this.setState({ isLogin:true }); } render(){ let button; if(this.state.isLogin){ button = <LogoutButton handleClick={this.logOut.bind(this)}/> } else { button = <LogInButton handleClick={this.logIn.bind(this)}/> } return (<div>{button}</div>); } };
二.阻止组件渲染
在少数情况下,你可能想让组件隐藏它自己而非被渲染到其他组件中,可以通过return null达到这种效果
function Waring(props){ if(!props.waring){ return null; } return <div>this is a waring</div> } class waringCtr extend React.Component{ constructor(props){ super(props); this.state = {hasWarn:false} } handle(){ let hasWarn = this.state.hasWarn; hasWarn = !hasWarn; this.setState({ hasWarn:hasWarn }); } render(){ return ( <div> <button onClick={this.handle.bind(this)}>{this.state.hasWarn ? ‘hideWarn‘:‘showWarn‘}</button> <Waring waring={this.state.hasWarn}/> </div> ) } };
在组件的render方法中返回null,并不会影响组件生命周期函数的调用,所以Waring组件的componentWillUpdate方法和componentDidUpdate方法还是会
被调用
时间: 2024-10-23 11:25:48