mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Dan Abramov
620 lines
36 KiB
HTML
620 lines
36 KiB
HTML
|
|
|
|
<!DOCTYPE html>
|
|
<!--[if IE]><![endif]-->
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<title>Conditional Rendering - React</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta property="og:title" content="Conditional Rendering - React">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://facebook.github.io/react/docs/conditional-rendering.html">
|
|
<meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
|
|
<meta property="og:description" content="A JavaScript library for building user interfaces">
|
|
<meta property="fb:app_id" content="623268441017527">
|
|
|
|
<link rel="shortcut icon" href="/react/favicon.ico">
|
|
<link rel="alternate" type="application/rss+xml" title="React" href="https://facebook.github.io/react/feed.xml">
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
|
|
<link rel="stylesheet" href="/react/css/syntax.css">
|
|
<link rel="stylesheet" href="/react/css/codemirror.css">
|
|
<link rel="stylesheet" href="/react/css/react.css">
|
|
|
|
<script src="//use.typekit.net/vqa1hcx.js"></script>
|
|
<script>try{Typekit.load();}catch(e){}</script>
|
|
|
|
<!--[if lte IE 8]>
|
|
<script src="https://unpkg.com/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
|
|
<script src="https://unpkg.com/es5-shim@4.5.9/es5-shim.min.js"></script>
|
|
<script src="https://unpkg.com/es5-shim@4.5.9/es5-sham.min.js"></script>
|
|
<![endif]-->
|
|
<script src="https://unpkg.com/docsearch.js@1.5.0/dist/cdn/docsearch.min.js"></script>
|
|
<script src="https://unpkg.com/codemirror@5.15.2"></script>
|
|
<script src="https://unpkg.com/codemirror@5.15.2/mode/javascript/javascript.js"></script>
|
|
<script src="https://unpkg.com/codemirror@5.15.2/mode/xml/xml.js"></script>
|
|
<script src="https://unpkg.com/codemirror@5.15.2/mode/jsx/jsx.js"></script>
|
|
<script src="https://unpkg.com/prop-types/prop-types.min.js"></script>
|
|
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
|
|
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
|
|
<script src="https://unpkg.com/create-react-class/create-react-class.min.js"></script>
|
|
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
|
|
<script src="/react/js/live_editor.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<div class="nav-main">
|
|
<div class="wrap">
|
|
<a class="nav-home" href="/react/">
|
|
<img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
|
|
React
|
|
</a>
|
|
<div class="nav-lists">
|
|
<ul class="nav-site nav-site-internal">
|
|
<li><a href="/react/docs/hello-world.html" class="active">Docs</a></li>
|
|
<li><a href="/react/tutorial/tutorial.html">Tutorial</a></li>
|
|
<li><a href="/react/community/support.html">Community</a></li>
|
|
<li><a href="/react/blog/">Blog</a></li>
|
|
<li class="nav-site-search">
|
|
<input id="algolia-doc-search" type="text" placeholder="Search docs..." />
|
|
</li>
|
|
</ul>
|
|
<ul class="nav-site nav-site-external">
|
|
<li><a href="https://github.com/facebook/react">GitHub</a></li>
|
|
<li><a href="https://github.com/facebook/react/releases">v16.0.0</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<section class="content wrap documentationContent">
|
|
<div class="inner-content">
|
|
<a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs/docs/conditional-rendering.md" target="_blank">Edit on GitHub</a>
|
|
<h1>
|
|
Conditional Rendering
|
|
</h1>
|
|
<div class="subHeader"></div>
|
|
|
|
<p>In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application.</p>
|
|
|
|
<p>Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else"><code>if</code></a> or the <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">conditional operator</a> to create elements representing the current state, and let React update the UI to match them.</p>
|
|
|
|
<p>Consider these two components:</p>
|
|
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">UserGreeting</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="o"><</span><span class="nx">h1</span><span class="o">></span><span class="nx">Welcome</span> <span class="nx">back</span><span class="o">!<</span><span class="err">/h1>;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="kd">function</span> <span class="nx">GuestGreeting</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="o"><</span><span class="nx">h1</span><span class="o">></span><span class="nx">Please</span> <span class="nx">sign</span> <span class="nx">up</span><span class="p">.</span><span class="o"><</span><span class="err">/h1>;</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<p>We'll create a <code>Greeting</code> component that displays either of these components depending on whether a user is logged in:</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">Greeting</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="kr">const</span> <span class="nx">isLoggedIn</span> <span class="o">=</span> <span class="nx">props</span><span class="p">.</span><span class="nx">isLoggedIn</span><span class="p">;</span>
|
|
<span class="hll"> <span class="k">if</span> <span class="p">(</span><span class="nx">isLoggedIn</span><span class="p">)</span> <span class="p">{</span>
|
|
</span><span class="hll"> <span class="k">return</span> <span class="o"><</span><span class="nx">UserGreeting</span> <span class="o">/></span><span class="p">;</span>
|
|
</span><span class="hll"> <span class="p">}</span>
|
|
</span><span class="hll"> <span class="k">return</span> <span class="o"><</span><span class="nx">GuestGreeting</span> <span class="o">/></span><span class="p">;</span>
|
|
</span><span class="hll"><span class="p">}</span>
|
|
</span>
|
|
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
|
|
<span class="c1">// Try changing to isLoggedIn={true}:</span>
|
|
<span class="hll"> <span class="o"><</span><span class="nx">Greeting</span> <span class="nx">isLoggedIn</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="o">/></span><span class="p">,</span>
|
|
</span><span class="hll"> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'root'</span><span class="p">)</span>
|
|
</span><span class="p">);</span>
|
|
</code></pre></div>
|
|
<p><a href="https://codepen.io/gaearon/pen/ZpVxNq?editors=0011">Try it on CodePen.</a></p>
|
|
|
|
<p>This example renders a different greeting depending on the value of <code>isLoggedIn</code> prop.</p>
|
|
|
|
<h3>Element Variables</h3>
|
|
|
|
<p>You can use variables to store elements. This can help you conditionally render a part of the component while the rest of the output doesn't change.</p>
|
|
|
|
<p>Consider these two new components representing Logout and Login buttons:</p>
|
|
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">LoginButton</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="p">(</span>
|
|
<span class="o"><</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="nx">props</span><span class="p">.</span><span class="nx">onClick</span><span class="p">}</span><span class="o">></span>
|
|
<span class="nx">Login</span>
|
|
<span class="o"><</span><span class="err">/button></span>
|
|
<span class="p">);</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="kd">function</span> <span class="nx">LogoutButton</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="p">(</span>
|
|
<span class="o"><</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="nx">props</span><span class="p">.</span><span class="nx">onClick</span><span class="p">}</span><span class="o">></span>
|
|
<span class="nx">Logout</span>
|
|
<span class="o"><</span><span class="err">/button></span>
|
|
<span class="p">);</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<p>In the example below, we will create a <a href="/react/docs/state-and-lifecycle.html#adding-local-state-to-a-class">stateful component</a> called <code>LoginControl</code>.</p>
|
|
|
|
<p>It will render either <code><LoginButton /></code> or <code><LogoutButton /></code> depending on its current state. It will also render a <code><Greeting /></code> from the previous example:</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">LoginControl</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
|
<span class="nx">constructor</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="kr">super</span><span class="p">(</span><span class="nx">props</span><span class="p">);</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">handleLoginClick</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">handleLoginClick</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">handleLogoutClick</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">handleLogoutClick</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="p">{</span><span class="nx">isLoggedIn</span><span class="o">:</span> <span class="kc">false</span><span class="p">};</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="nx">handleLoginClick</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">isLoggedIn</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="nx">handleLogoutClick</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">isLoggedIn</span><span class="o">:</span> <span class="kc">false</span><span class="p">});</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="kr">const</span> <span class="nx">isLoggedIn</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">isLoggedIn</span><span class="p">;</span>
|
|
|
|
<span class="hll"> <span class="kd">let</span> <span class="nx">button</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
|
|
</span><span class="hll"> <span class="k">if</span> <span class="p">(</span><span class="nx">isLoggedIn</span><span class="p">)</span> <span class="p">{</span>
|
|
</span><span class="hll"> <span class="nx">button</span> <span class="o">=</span> <span class="o"><</span><span class="nx">LogoutButton</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleLogoutClick</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
|
</span><span class="hll"> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
|
</span><span class="hll"> <span class="nx">button</span> <span class="o">=</span> <span class="o"><</span><span class="nx">LoginButton</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleLoginClick</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
|
</span><span class="hll"> <span class="p">}</span>
|
|
</span>
|
|
<span class="k">return</span> <span class="p">(</span>
|
|
<span class="o"><</span><span class="nx">div</span><span class="o">></span>
|
|
<span class="hll"> <span class="o"><</span><span class="nx">Greeting</span> <span class="nx">isLoggedIn</span><span class="o">=</span><span class="p">{</span><span class="nx">isLoggedIn</span><span class="p">}</span> <span class="o">/></span>
|
|
</span><span class="hll"> <span class="p">{</span><span class="nx">button</span><span class="p">}</span>
|
|
</span> <span class="o"><</span><span class="err">/div></span>
|
|
<span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
|
|
<span class="o"><</span><span class="nx">LoginControl</span> <span class="o">/></span><span class="p">,</span>
|
|
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'root'</span><span class="p">)</span>
|
|
<span class="p">);</span>
|
|
</code></pre></div>
|
|
<p><a href="https://codepen.io/gaearon/pen/QKzAgB?editors=0010">Try it on CodePen.</a></p>
|
|
|
|
<p>While declaring a variable and using an <code>if</code> statement is a fine way to conditionally render a component, sometimes you might want to use a shorter syntax. There are a few ways to inline conditions in JSX, explained below.</p>
|
|
|
|
<h3>Inline If with Logical && Operator</h3>
|
|
|
|
<p>You may <a href="/react/docs/introducing-jsx.html#embedding-expressions-in-jsx">embed any expressions in JSX</a> by wrapping them in curly braces. This includes the JavaScript logical <code>&&</code> operator. It can be handy for conditionally including an element:</p>
|
|
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">Mailbox</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="kr">const</span> <span class="nx">unreadMessages</span> <span class="o">=</span> <span class="nx">props</span><span class="p">.</span><span class="nx">unreadMessages</span><span class="p">;</span>
|
|
<span class="k">return</span> <span class="p">(</span>
|
|
<span class="o"><</span><span class="nx">div</span><span class="o">></span>
|
|
<span class="o"><</span><span class="nx">h1</span><span class="o">></span><span class="nx">Hello</span><span class="o">!<</span><span class="err">/h1></span>
|
|
<span class="hll"> <span class="p">{</span><span class="nx">unreadMessages</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span> <span class="o">&&</span>
|
|
</span><span class="hll"> <span class="o"><</span><span class="nx">h2</span><span class="o">></span>
|
|
</span><span class="hll"> <span class="nx">You</span> <span class="nx">have</span> <span class="p">{</span><span class="nx">unreadMessages</span><span class="p">.</span><span class="nx">length</span><span class="p">}</span> <span class="nx">unread</span> <span class="nx">messages</span><span class="p">.</span>
|
|
</span><span class="hll"> <span class="o"><</span><span class="err">/h2></span>
|
|
</span><span class="hll"> <span class="p">}</span>
|
|
</span> <span class="o"><</span><span class="err">/div></span>
|
|
<span class="p">);</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="kr">const</span> <span class="nx">messages</span> <span class="o">=</span> <span class="p">[</span><span class="s1">'React'</span><span class="p">,</span> <span class="s1">'Re: React'</span><span class="p">,</span> <span class="s1">'Re:Re: React'</span><span class="p">];</span>
|
|
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
|
|
<span class="o"><</span><span class="nx">Mailbox</span> <span class="nx">unreadMessages</span><span class="o">=</span><span class="p">{</span><span class="nx">messages</span><span class="p">}</span> <span class="o">/></span><span class="p">,</span>
|
|
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'root'</span><span class="p">)</span>
|
|
<span class="p">);</span>
|
|
</code></pre></div>
|
|
<p><a href="https://codepen.io/gaearon/pen/ozJddz?editors=0010">Try it on CodePen.</a></p>
|
|
|
|
<p>It works because in JavaScript, <code>true && expression</code> always evaluates to <code>expression</code>, and <code>false && expression</code> always evaluates to <code>false</code>.</p>
|
|
|
|
<p>Therefore, if the condition is <code>true</code>, the element right after <code>&&</code> will appear in the output. If it is <code>false</code>, React will ignore and skip it.</p>
|
|
|
|
<h3>Inline If-Else with Conditional Operator</h3>
|
|
|
|
<p>Another method for conditionally rendering elements inline is to use the JavaScript conditional operator <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator"><code>condition ? true : false</code></a>.</p>
|
|
|
|
<p>In the example below, we use it to conditionally render a small block of text.</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="kr">const</span> <span class="nx">isLoggedIn</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">isLoggedIn</span><span class="p">;</span>
|
|
<span class="k">return</span> <span class="p">(</span>
|
|
<span class="o"><</span><span class="nx">div</span><span class="o">></span>
|
|
<span class="hll"> <span class="nx">The</span> <span class="nx">user</span> <span class="nx">is</span> <span class="o"><</span><span class="nx">b</span><span class="o">></span><span class="p">{</span><span class="nx">isLoggedIn</span> <span class="o">?</span> <span class="s1">'currently'</span> <span class="o">:</span> <span class="s1">'not'</span><span class="p">}</span><span class="o"><</span><span class="err">/b> logged in.</span>
|
|
</span> <span class="o"><</span><span class="err">/div></span>
|
|
<span class="p">);</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<p>It can also be used for larger expressions although it is less obvious what's going on:</p>
|
|
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="kr">const</span> <span class="nx">isLoggedIn</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">isLoggedIn</span><span class="p">;</span>
|
|
<span class="k">return</span> <span class="p">(</span>
|
|
<span class="o"><</span><span class="nx">div</span><span class="o">></span>
|
|
<span class="hll"> <span class="p">{</span><span class="nx">isLoggedIn</span> <span class="o">?</span> <span class="p">(</span>
|
|
</span> <span class="o"><</span><span class="nx">LogoutButton</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleLogoutClick</span><span class="p">}</span> <span class="o">/></span>
|
|
<span class="hll"> <span class="p">)</span> <span class="o">:</span> <span class="p">(</span>
|
|
</span> <span class="o"><</span><span class="nx">LoginButton</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleLoginClick</span><span class="p">}</span> <span class="o">/></span>
|
|
<span class="hll"> <span class="p">)}</span>
|
|
</span> <span class="o"><</span><span class="err">/div></span>
|
|
<span class="p">);</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<p>Just like in JavaScript, it is up to you to choose an appropriate style based on what you and your team consider more readable. Also remember that whenever conditions become too complex, it might be a good time to <a href="/react/docs/components-and-props.html#extracting-components">extract a component</a>.</p>
|
|
|
|
<h3>Preventing Component from Rendering</h3>
|
|
|
|
<p>In rare cases you might want a component to hide itself even though it was rendered by another component. To do this return <code>null</code> instead of its render output.</p>
|
|
|
|
<p>In the example below, the <code><WarningBanner /></code> is rendered depending on the value of the prop called <code>warn</code>. If the value of the prop is <code>false</code>, then the component does not render:</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">WarningBanner</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="hll"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">props</span><span class="p">.</span><span class="nx">warn</span><span class="p">)</span> <span class="p">{</span>
|
|
</span><span class="hll"> <span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
|
|
</span><span class="hll"> <span class="p">}</span>
|
|
</span>
|
|
<span class="k">return</span> <span class="p">(</span>
|
|
<span class="o"><</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="s2">"warning"</span><span class="o">></span>
|
|
<span class="nx">Warning</span><span class="o">!</span>
|
|
<span class="o"><</span><span class="err">/div></span>
|
|
<span class="p">);</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="kr">class</span> <span class="nx">Page</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
|
<span class="nx">constructor</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="kr">super</span><span class="p">(</span><span class="nx">props</span><span class="p">);</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="p">{</span><span class="nx">showWarning</span><span class="o">:</span> <span class="kc">true</span><span class="p">}</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">handleToggleClick</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">handleToggleClick</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="nx">handleToggleClick</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">(</span><span class="nx">prevState</span> <span class="o">=></span> <span class="p">({</span>
|
|
<span class="nx">showWarning</span><span class="o">:</span> <span class="o">!</span><span class="nx">prevState</span><span class="p">.</span><span class="nx">showWarning</span>
|
|
<span class="p">}));</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="p">(</span>
|
|
<span class="o"><</span><span class="nx">div</span><span class="o">></span>
|
|
<span class="hll"> <span class="o"><</span><span class="nx">WarningBanner</span> <span class="nx">warn</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">showWarning</span><span class="p">}</span> <span class="o">/></span>
|
|
</span> <span class="o"><</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleToggleClick</span><span class="p">}</span><span class="o">></span>
|
|
<span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">showWarning</span> <span class="o">?</span> <span class="s1">'Hide'</span> <span class="o">:</span> <span class="s1">'Show'</span><span class="p">}</span>
|
|
<span class="o"><</span><span class="err">/button></span>
|
|
<span class="o"><</span><span class="err">/div></span>
|
|
<span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
|
|
<span class="o"><</span><span class="nx">Page</span> <span class="o">/></span><span class="p">,</span>
|
|
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'root'</span><span class="p">)</span>
|
|
<span class="p">);</span>
|
|
</code></pre></div>
|
|
<p><a href="https://codepen.io/gaearon/pen/Xjoqwm?editors=0010">Try it on CodePen.</a></p>
|
|
|
|
<p>Returning <code>null</code> from a component's <code>render</code> method does not affect the firing of the component's lifecycle methods. For instance, <code>componentWillUpdate</code> and <code>componentDidUpdate</code> will still be called.</p>
|
|
|
|
|
|
<div class="docs-prevnext">
|
|
|
|
<a class="docs-prev" href="/react/docs/handling-events.html">← Prev</a>
|
|
|
|
|
|
<a class="docs-next" href="/react/docs/lists-and-keys.html">Next →</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-docs">
|
|
<!-- Docs Nav -->
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Quick Start</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/installation.html">Installation</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/hello-world.html">Hello World</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/introducing-jsx.html">Introducing JSX</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/rendering-elements.html">Rendering Elements</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/components-and-props.html">Components and Props</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/state-and-lifecycle.html">State and Lifecycle</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/handling-events.html">Handling Events</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/conditional-rendering.html" class="active">Conditional Rendering</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/lists-and-keys.html">Lists and Keys</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/forms.html">Forms</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/lifting-state-up.html">Lifting State Up</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/composition-vs-inheritance.html">Composition vs Inheritance</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/thinking-in-react.html">Thinking In React</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Advanced Guides</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/jsx-in-depth.html">JSX In Depth</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/typechecking-with-proptypes.html">Typechecking With PropTypes</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/refs-and-the-dom.html">Refs and the DOM</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/uncontrolled-components.html">Uncontrolled Components</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/optimizing-performance.html">Optimizing Performance</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/react-without-es6.html">React Without ES6</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/react-without-jsx.html">React Without JSX</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/reconciliation.html">Reconciliation</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/context.html">Context</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/portals.html">Portals</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/web-components.html">Web Components</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/higher-order-components.html">Higher-Order Components</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/integrating-with-other-libraries.html">Integrating with Other Libraries</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/accessibility.html">Accessibility</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Reference</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/react-api.html">React</a>
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/react-component.html">React.Component</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/react-dom.html">ReactDOM</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/react-dom-server.html">ReactDOMServer</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/dom-elements.html">DOM Elements</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/events.html">SyntheticEvent</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/test-utils.html">Test Utilities</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/shallow-renderer.html">Shallow Renderer</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/test-renderer.html">Test Renderer</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/javascript-environment-requirements.html">JS Environment Requirements</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<!-- Contributing Nav -->
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Contributing</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/contributing/how-to-contribute.html">How to Contribute</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/contributing/codebase-overview.html">Codebase Overview</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/contributing/implementation-notes.html">Implementation Notes</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/contributing/design-principles.html">Design Principles</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
|
<footer class="nav-footer">
|
|
<section class="sitemap">
|
|
<a href="/react/" class="nav-home">
|
|
</a>
|
|
<div>
|
|
<h5><a href="/react/docs/">Docs</a></h5>
|
|
<a href="/react/docs/hello-world.html">Quick Start</a>
|
|
<a href="/react/docs/thinking-in-react.html">Thinking in React</a>
|
|
<a href="/react/tutorial/tutorial.html">Tutorial</a>
|
|
<a href="/react/docs/jsx-in-depth.html">Advanced Guides</a>
|
|
</div>
|
|
<div>
|
|
<h5><a href="/react/community/support.html">Community</a></h5>
|
|
<a href="http://stackoverflow.com/questions/tagged/reactjs" target="_blank">Stack Overflow</a>
|
|
<a href="https://discuss.reactjs.org/" target="_blank">Discussion Forum</a>
|
|
<a href="https://discord.gg/0ZcbPKXt5bZjGY5n" target="_blank">Reactiflux Chat</a>
|
|
<a href="https://www.facebook.com/react" target="_blank">Facebook</a>
|
|
<a href="https://twitter.com/reactjs" target="_blank">Twitter</a>
|
|
</div>
|
|
<div>
|
|
<h5><a href="/react/community/support.html">Resources</a></h5>
|
|
<a href="/react/community/conferences.html">Conferences</a>
|
|
<a href="/react/community/videos.html">Videos</a>
|
|
<a href="https://github.com/facebook/react/wiki/Examples" target="_blank">Examples</a>
|
|
<a href="https://github.com/facebook/react/wiki/Complementary-Tools" target="_blank">Complementary Tools</a>
|
|
</div>
|
|
<div>
|
|
<h5>More</h5>
|
|
<a href="/react/blog/">Blog</a>
|
|
<a href="https://github.com/facebook/react" target="_blank">GitHub</a>
|
|
<a href="http://facebook.github.io/react-native/" target="_blank">React Native</a>
|
|
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
|
</div>
|
|
</section>
|
|
<a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource">
|
|
<img src="/react/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/>
|
|
</a>
|
|
<section class="copyright">
|
|
Copyright © 2017 Facebook Inc.
|
|
</section>
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
<div id="fb-root"></div>
|
|
<script src="/react/js/anchor-links.js"></script>
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
ga('create', 'UA-41298772-1', 'facebook.github.io');
|
|
ga('send', 'pageview');
|
|
|
|
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
|
|
|
(function(d, s, id) {
|
|
var js, fjs = d.getElementsByTagName(s)[0];
|
|
if (d.getElementById(id)) return;
|
|
js = d.createElement(s); js.id = id;
|
|
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=623268441017527";
|
|
fjs.parentNode.insertBefore(js, fjs);
|
|
}(document, 'script', 'facebook-jssdk'));
|
|
|
|
docsearch({
|
|
apiKey: '36221914cce388c46d0420343e0bb32e',
|
|
indexName: 'react',
|
|
inputSelector: '#algolia-doc-search'
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|