React中文文档之Conditional Rendering

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 => ({}ishowWarning: !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'););

React中文文档之Conditional Rendering相关推荐

react中文文档、英文文档及JavaScript相关文档及web前端相关资料
一. react中文文档 https://doc.react-china.org 二. react英文文档 https://reactjs.org 三.react Github https://git ...
React中文文档之Thinking in React
Thinking in React - 思考React 在我们看来,React是使用js来创建大的.速度快的web应用的首选方式.它已经在Facebook和Instagram表现的非常好. React ...
React中文文档之Forms
Forms - 表单在React中,HTML表单元素同其他DOM元素,有点不同.因为表单元素天生具备一些内部的state状态.例如:下面的HTML表单接收一个名字: <form>Name ...
React中文文档之Handling Events
Handling Events - 事件处理 React元素的事件处理同DOM元素的事件处理非常相似. 有一些语法不同: 1.React事件使用 'camelCase-驼峰式' 命名,而不是 'low ...
React中文文档之introducing JSX
introducing JSX 思考下面的变量声明: const element = <h1>Hello world!</h1>; 这个有趣的标签解析,既不是字符串,也不是HT ...
React中文文档之State and Lifecycle
state 和生命周期到目前为止,我们仅仅学习了一种方式来更新UI. 我们调用 'ReactDOM.render()' 来改变输出渲染: function tick() {const elemen ...
React中文文档之Rendering Elements
Rendering Elements - 渲染元素元素是React应用的最小构建块一个元素描述了你想要在屏幕上看到的内容: const element = <h1>Hello, wor ...
React中文文档之Components and Props
Components and Props - 组件和属性组件允许你分隔UI为独立的.可重用的零件,每个零件是隔离的. 概念上,组件就像js的函数.它们接收任意的输入(被称为 'props'),并返回 ...
React中文文档 8. 列表 Key
1.遍历 const numbers = [1, 2, 3, 4, 5];const listItems = numbers.map((number) =><li>{number}& ...

React中文文档之Conditional Rendering

React中文文档之Conditional Rendering相关推荐

最新文章

热门文章