条件渲染
在 React 中,你可以创建不同的组件来封装各种你需要的行为。然后,依据应用的不同状态,你可以只渲染对应状态下的部分内容。
React 中的条件渲染和 JavaScript 中的一样,使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态,然后让 React 根据它们来更新 UI。
观察这两个组件:
function UserGreeting(props) {
return <h1>Welcome back!</h1>;
}
function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
}
再创建一个 Greeting 组件,它会根据用户是否登录来决定显示上面的哪一个组件。
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
ReactDOM.render(
// Try changing to isLoggedIn={true}:
<Greeting isLoggedIn={
false} />,
document.getElementById('root')
);
这个示例根据 isLoggedIn 的值来渲染不同的问候语。
元素变量
你可以使用变量来储存元素。 它可以帮助你有条件地渲染组件的一部分,而其他的渲染部分并不会因此而改变。
观察这两个组件,它们分别代表了注销和登录按钮:
function LoginButton(props) {
return (
<button onClick={
props.onClick}>
Login
</button>
);
}
function LogoutButton(props) {
return (
<button onClick={
props.onClick}