编辑:重庆互联网小徐 发布时间:2023-03-16 浏览:16379 赞(1088) 收藏 评论(0)
在 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}>
Logout </button>
);}
在下面的示例中,我们将创建一个名叫 LoginControl
的有状态的组件。
它将根据当前的状态来渲染 <LoginButton />
或者 <LogoutButton />
。同时它还会渲染上一个示例中的 <Greeting />
。
class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}
handleLoginClick() {
this.setState({isLoggedIn: true});
}
handleLogoutClick() {
this.setState({isLoggedIn: false});
}
render() {
const isLoggedIn = this.state.isLoggedIn;
let button; if (isLoggedIn) { button = <LogoutButton onClick={this.handleLogoutClick} />; } else { button = <LoginButton onClick={this.handleLoginClick} />; }
return (
<div> <Greeting isLoggedIn={isLoggedIn} /> {button} </div>
);
}}ReactDOM.render(
<LoginControl />,
document.getElementById('root'));
声明一个变量并使用 if
语句进行条件渲染是不错的方式,但有时你可能会想使用更为简洁的语法。接下来,我们将介绍几种在 JSX 中内联条件渲染的方法。
与运算符 &&
通过花括号包裹代码,你可以在 JSX 中嵌入任何表达式。这也包括 JavaScript 中的逻辑与 (&&) 运算符。它可以很方便地进行元素的条件渲染。
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div> <h1>Hello!</h1> {unreadMessages.length > 0 && <h2> You have {unreadMessages.length} unread messages. </h2> } </div>
);}const messages = ['React', 'Re: React', 'Re:Re: React'];ReactDOM.render(
<Mailbox unreadMessages={messages} />,
document.getElementById('root'));
之所以能这样做,是因为在 JavaScript 中,true && expression
总是会返回 expression
, 而 false && expression
总是会返回 false
。
因此,如果条件是 true
,&&
右侧的元素就会被渲染,如果是 false
,React 会忽略并跳过它。
三目运算符
另一种内联条件渲染的方法是使用 JavaScript 中的三目运算符 condition ? true : false
。
在下面这个示例中,我们用它来条件渲染一小段文本
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div> The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in. </div>
);}
同样的,它也可以用于较为复杂的表达式中,虽然看起来不是很直观:
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div> {isLoggedIn ? <LogoutButton onClick={this.handleLogoutClick} /> : <LoginButton onClick={this.handleLoginClick} /> } </div> );}
就像在 JavaScript 中一样,你可以根据团队的习惯来选择可读性更高的代码风格。需要注意的是,如果条件变得过于复杂,那你应该考虑如何提取组件。
阻止组件渲染
在极少数情况下,你可能希望能隐藏组件,即使它已经被其他组件渲染。若要完成此操作,你可以让 render
方法直接返回 null
,而不进行任何渲染。
下面的示例中,<WarningBanner />
会根据 prop 中 warn
的值来进行条件渲染。如果 warn
的值是 false
,那么组件则不会渲染:
function WarningBanner(props) { if (!props.warn) { return null; }
return (
<div className="warning"> Warning! </div>
);}class Page extends React.Component {
constructor(props) {
super(props);
this.state = {showWarning: true};
this.handleToggleClick = this.handleToggleClick.bind(this);
}
handleToggleClick() {
this.setState(state => ({
showWarning: !state.showWarning }));
}
render() {
return (
<div> <WarningBanner warn={this.state.showWarning} /> <button onClick={this.handleToggleClick}> {this.state.showWarning ? 'Hide' : 'Show'} </button> </div>
);
}}ReactDOM.render(
<Page />,
document.getElementById('root'));
在组件的 render
方法中返回 null
并不会影响组件的生命周期。例如,上面这个示例中,componentDidUpdate
依然会被调用。
欢迎广大用户为此页面进行评价,评价成功将获得积分奖励!