Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rebuild website

Browse Source
This commit is contained in:
Travis CI
2016-10-23 13:40:12 +00:00
parent cb8283877a
commit 7149218fa4
1 changed files with 9 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/context.html
+9 -16
View File
@@ -193,23 +193,16 @@ You can do this directly in React with the powerful &quot;context&quot; API.</p>
<p>Before you build components with an API similar to this, consider if there are cleaner alternatives. For example, you can pass entire React component as props if you&#39;d like to.</p>
<h2><a class="anchor" name="referencing-context-in-lifecycle-methods"></a>Referencing Context in Lifecycle Methods <a class="hash-link" href="#referencing-context-in-lifecycle-methods">#</a></h2>
<p>If <code>contextTypes</code> is defined within a component, the following lifecycle methods will receive an additional parameter, the <code>context</code> object:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="k">void</span> <span class="nx">componentWillReceiveProps</span><span class="p">(</span>
<span class="nx">object</span> <span class="nx">nextProps</span><span class="p">,</span> <span class="nx">object</span> <span class="nx">nextContext</span>
<span class="p">)</span>
<p>If <code>contextTypes</code> is defined within a component, the following <a href="/react/docs/react-component.html#the-component-lifecycle">lifecycle methods</a> will receive an additional parameter, the <code>context</code> object:</p>
<span class="kr">boolean</span> <span class="nx">shouldComponentUpdate</span><span class="p">(</span>
<span class="nx">object</span> <span class="nx">nextProps</span><span class="p">,</span> <span class="nx">object</span> <span class="nx">nextState</span><span class="p">,</span> <span class="nx">object</span> <span class="nx">nextContext</span>
<span class="p">)</span>
<span class="k">void</span> <span class="nx">componentWillUpdate</span><span class="p">(</span>
<span class="nx">object</span> <span class="nx">nextProps</span><span class="p">,</span> <span class="nx">object</span> <span class="nx">nextState</span><span class="p">,</span> <span class="nx">object</span> <span class="nx">nextContext</span>
<span class="p">)</span>
<span class="k">void</span> <span class="nx">componentDidUpdate</span><span class="p">(</span>
<span class="nx">object</span> <span class="nx">prevProps</span><span class="p">,</span> <span class="nx">object</span> <span class="nx">prevState</span><span class="p">,</span> <span class="nx">object</span> <span class="nx">prevContext</span>
<span class="p">)</span>
</code></pre></div><h2><a class="anchor" name="referencing-context-in-stateless-functional-components"></a>Referencing Context in Stateless Functional Components <a class="hash-link" href="#referencing-context-in-stateless-functional-components">#</a></h2>
<ul>
<li><a href="/react/docs/react-component.html#constructor"><code>constructor(props, context)</code></a></li>
<li><a href="/react/docs/react-component.html#componentwillreceiveprops"><code>componentWillReceiveProps(nextProps, nextContext)</code></a></li>
<li><a href="/react/docs/react-component.html#shouldcomponentupdate"><code>shouldComponentUpdate(nextProps, nextState, nextContext)</code></a></li>
<li><a href="/react/docs/react-component.html#componentwillupdate"><code>componentWillUpdate(nextProps, nextState, nextContext)</code></a></li>
<li><a href="/react/docs/react-component.html#componentdidupdate"><code>componentDidUpdate(prevProps, prevState, prevContext)</code></a></li>
</ul>
<h2><a class="anchor" name="referencing-context-in-stateless-functional-components"></a>Referencing Context in Stateless Functional Components <a class="hash-link" href="#referencing-context-in-stateless-functional-components">#</a></h2>
<p>Stateless functional components are also able to reference <code>context</code> if <code>contextTypes</code> is defined as a property of the function. The following code shows a <code>Button</code> component written as a stateless functional component.</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">const</span> <span class="nx">Button</span> <span class="o">=</span> <span class="p">({</span><span class="nx">children</span><span class="p">},</span> <span class="nx">context</span><span class="p">)</span> <span class="o">=&gt;</span>
<span class="o">&lt;</span><span class="nx">button</span> <span class="nx">style</span><span class="o">=</span><span class="p">{{</span><span class="nx">background</span><span class="o">:</span> <span class="nx">context</span><span class="p">.</span><span class="nx">color</span><span class="p">}}</span><span class="o">&gt;</span>