> 在 React 中，你可以创建不同的组件封装你所需要的行为。然后，只渲染它们之中的一些，取决于你的应用的状态。 > React 中的条件渲染就和在 JavaScript 中的条件语句一样。使用 JavaScript 操作符如 if 或者条件操作符来创建渲染当前状态的元素，并且让 React 更新匹配的 UI 。 ## 1.1 If 条件渲染 > 示例场景：根据用户是否登录，来返回不同的欢迎界面 ``` # 两个不同场景的组件 function UserGreeting(props) { return <h1>Welcome back!</h1>; } function GuestGreeting(props) { return <h1>Please sign up.</h1>; } # 条件不同返回不同组件 function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return <UserGreeting />; } return <GuestGreeting />; } # 使用Greeting组件 ReactDOM.render( // 修改为 isLoggedIn={true} 试试: <Greeting isLoggedIn={false} />, document.getElementById('root') ); ``` ## 1.2、使用元素变量 > 你可以用变量来存储元素。这可以帮助您有条件地渲染组件的一部分，而输出的其余部分不会更改。 > 例： > 有以下两个组件，分别用于显示登出和录入按钮 ``` function LoginButton(props) { return ( <button onClick={props.onClick}> Login </button> ); } function LogoutButton(props) { return ( <button onClick={props.onClick}> Logout </button> ); } ``` > 接下来创建一个*有状态组件*，根据其自身状态来渲染这两个组件，并同时渲染1.1中的Greetin组件 ``` function UserGreeting(props) { return <h1>Welcome back!</h1>; } function GuestGreeting(props) { return <h1>Please sign up.</h1>; } function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return <UserGreeting />; } return <GuestGreeting />; } function LoginButton(props) { return ( <button onClick={props.onClick}> Login </button> ); } function LogoutButton(props) { return ( <button onClick={props.onClick}> Logout </button> ); } class LoginControl extends React.Component{ constructor(props) { super(props); this.state = { isLoggedIn: false }; this.handleLoginClick=this.handleLoginClick.bind(this) this.handleLogoutClick=this.handleLogoutClick.bind(this) } handleLogoutClick() { this.setState({ isLoggedIn:false }) } handleLoginClick() { this.setState({ isLoggedIn:true }) } render() { const isLoggedIn = this.state.isLoggedIn; let button = null; if (isLoggedIn) { button = <LogoutButton onClick={this.handleLogoutClick}/> } else { button = <LoginButton onClick={this.handleLoginClick}/> } return ( <div> <Greeting isLoggedIn={isLoggedIn} /> {button} </div> ) } } ``` ## 使用逻辑&&操作符的内联if用法 > 在上面示例中使用if来有条件的渲染组件相对而言比较繁琐，因此可以使用 逻辑操作符&&来简化。 ``` ```