Conditional Rendering - 有条件的渲染 在React中，你可以创建唯一的组件，来封装你需要的行为。之后，你可以仅仅渲染它们中的一些，这取决于你应用的状态。 React中的有条件的渲染，同JS中有条件的渲染的工作方式相同。使用JS操作符，例如：if 或者 'conditional operator-三元运算符' 来创建代表当前状态的元素，然后让React更新对应的UI。 考虑这2个组件：
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' 的值，渲染了一个不同的greeting
元素变量
你可以使用变量来存储元素。这能帮助你有条件地渲染组件的一部分，而其余的输出不会改变。
考虑这两个组件，分别代表 '登录' 和 '退出登录' 按钮：
function LoginButton(props) {
return (
<button onClick={props.onClick}>
Login
</button>
);
}
function LogoutButton(props) {
return (
<button onClick={props.onClick}>
Logout
</button>
);
}
在下面的例子中，我们将创建一个有状态组件(stateful component)，称为 'LoginControl'：
class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.hanleLoginClick.bind(this);
this.handleLogoutClick = this.hanleLogoutClick.bind(this);
this.state = {isLoggedIn: true};
}
handleLoginClick() {
this.setState({isLoggedIn: true});
}
handleLogoutClick() {
this.setState({isLoggedIn: false});
}
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>
);
}
}
ReactDOM.render(
<LoginControl />,
document.getElementById('root');
);
当声明一个变量，同时使用一个 'if' 语句，是有条件地渲染组件的一种很好的方式，有时，你可能想使用一个更短的语法。有几种方式内联在JSX，解释如下。
内联if，使用逻辑 '&&' 操作符
可以嵌入封装在 '{}' 内的表达式到 JSX。包括js的逻辑 '&&' 操作符。这对于有条件的引入一个元素很方便：
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread unread messages.
</h2>
}
</div>
);
}
const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
<Mailbox unreadMessages={messages} />,
document.getElementById('root');
);
它之所以起作用，是因为：在JS中，true && 表达式，总是计算表达式的值；false && 表达式，总是返回false。(逻辑运算符的 '开关问题')
因此，如果条件为true，'&&' 右侧的元素将会出现在输出中。如果条件为false，React将会忽略 '&&' 右侧的元素，并跳过它。
内联if-else，使用三元运算符(conditional operator)
另一个有条件地渲染元素的方式是，使用js的三元运算符：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>
);
}
就像在js中，这取决于你来选择一个合适的风格，基于你和你的团队考虑更多的可读性。也请谨记，不论什么时候，当条件变得太复杂，这可能是提取组件的一个好的时机。
阻止组件的渲染
在极少的情况下，你可能想要组件隐藏自身，甚至它被通过另外一个组件渲染。为了实现这点，将它的渲染输出，替换为 'null'。
在下面的例子中， <WarningBanner />被渲染，取决于一个被称作是 '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(prevState => ({}i
showWarning: !prevState.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');
);
转载请注明原文地址: https://ju.6miu.com/read-676310.html
