mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Update to latest
Includes 92e361709c (not #2874), #2875, #2881, #2890, #2902, #2903
This commit is contained in:
Paul O’Shannessy
+1
-1
@@ -424,7 +424,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
+1
-1
@@ -543,7 +543,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -434,7 +434,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -416,7 +416,7 @@ var clonedComponent = cloneWithProps(originalComponent, { key : originalComponen
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -0,0 +1,433 @@
|
||||
<!DOCTYPE html>
|
||||
<!--[if IE]><![endif]-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>补充工具 | React</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="补充工具 | React">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/complementary-tools-zh-CN.html">
|
||||
<meta property="og:image" content="http://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="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<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 type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<!--[if lte IE 8]>
|
||||
<script type="text/javascript" src="/react/js/html5shiv.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/es5-shim.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/es5-sham.min.js"></script>
|
||||
<![endif]-->
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="nav-main">
|
||||
<div class="wrap">
|
||||
<a class="nav-home" href="/react/index.html">
|
||||
<img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<li><a href="/react/docs/getting-started.html" class="active">docs</a></li>
|
||||
<li><a href="/react/support.html">support</a></li>
|
||||
<li><a href="/react/downloads.html">download</a></li>
|
||||
<li><a href="/react/blog/">blog</a></li>
|
||||
<li><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<!-- Docs Nav -->
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Quick Start</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/getting-started.html">Getting Started</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tutorial.html">Tutorial</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/thinking-in-react.html">Thinking in React</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Community Resources</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/videos.html">Videos</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/complementary-tools.html">Complementary Tools</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">Examples</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Guides</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/why-react.html">Why React?</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/displaying-data.html">Displaying Data</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-in-depth.html">JSX in Depth</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-spread.html">JSX Spread Attributes</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-gotchas.html">JSX Gotchas</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/interactivity-and-dynamic-uis.html">Interactivity and Dynamic UIs</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/multiple-components.html">Multiple Components</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reusable-components.html">Reusable Components</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/transferring-props.html">Transferring Props</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/forms.html">Forms</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/working-with-the-browser.html">Working With the Browser</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/more-about-refs.html">More About Refs</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tooling-integration.html">Tooling Integration</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">Add-Ons</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/animation.html">Animation</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/two-way-binding-helpers.html">Two-Way Binding Helpers</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/class-name-manipulation.html">Class Name Manipulation</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/test-utils.html">Test Utilities</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/clone-with-props.html">Cloning Components</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/update.html">Immutability Helpers</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/pure-render-mixin.html">PureRenderMixin</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/perf.html">Performance Tools</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/top-level-api.html">Top-Level API</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/component-api.html">Component API</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/component-specs.html">Component Specs and Lifecycle</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tags-and-attributes.html">Supported Tags and Attributes</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/events.html">Event System</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/dom-differences.html">DOM Differences</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/special-non-dom-attributes.html">Special Non-DOM Attributes</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reconciliation.html">Reconciliation</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/glossary.html">React (Virtual) DOM Terminology</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Flux</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="http://facebook.github.io/flux/docs/overview.html">Flux Overview</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="http://facebook.github.io/flux/docs/todo-list.html">Flux TodoMVC Tutorial</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Tips Nav -->
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Tips</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/introduction.html">Introduction</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/inline-styles.html">Inline Styles</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/if-else-in-JSX.html">If-Else in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/self-closing-tag.html">Self-Closing Tag</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/maximum-number-of-jsx-root-nodes.html">Maximum Number of JSX Root Nodes</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/style-props-value-px.html">Shorthand for Specifying Pixel Values in style props</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/children-props-type.html">Type of the Children props</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/controlled-input-null-value.html">Value of null for Controlled Input</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html">componentWillReceiveProps Not Triggered After Mounting</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/props-in-getInitialState-as-anti-pattern.html">Props in getInitialState Is an Anti-Pattern</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/dom-event-listeners.html">DOM Event Listeners in a Component</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/initial-ajax.html">Load Initial Data via AJAX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/expose-component-functions.html">Expose Component Functions</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/references-to-components.html">References to Components</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/children-undefined.html">this.props.children undefined</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/use-react-with-other-libraries.html">Use React with Other Libraries</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>
|
||||
补充工具
|
||||
<a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs/docs/complementary-tools.zh-CN.md" target="_blank">Edit on GitHub</a>
|
||||
</h1>
|
||||
<div class="subHeader"></div>
|
||||
|
||||
<p>本页被移到了 <a href="https://github.com/facebook/react/wiki/Complementary-Tools">GitHub wiki</a>。</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/videos-zh-CN.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/examples-zh-CN.html">Next →</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">
|
||||
A Facebook & Instagram collaboration.<br>
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<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/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -404,7 +404,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -452,7 +452,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -521,7 +521,7 @@ transition to the new props and state will not require a component update.</p>
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -483,7 +483,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -493,7 +493,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -412,7 +412,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -515,7 +515,7 @@ onMouseMove onMouseOut onMouseOver onMouseUp
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
+1
-1
@@ -517,7 +517,7 @@ rendering any component.</p>
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -0,0 +1,431 @@
|
||||
<!DOCTYPE html>
|
||||
<!--[if IE]><![endif]-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>示例 | React</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="示例 | React">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/examples-zh-CN.html">
|
||||
<meta property="og:image" content="http://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="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<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 type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<!--[if lte IE 8]>
|
||||
<script type="text/javascript" src="/react/js/html5shiv.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/es5-shim.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/es5-sham.min.js"></script>
|
||||
<![endif]-->
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="nav-main">
|
||||
<div class="wrap">
|
||||
<a class="nav-home" href="/react/index.html">
|
||||
<img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<li><a href="/react/docs/getting-started.html" class="active">docs</a></li>
|
||||
<li><a href="/react/support.html">support</a></li>
|
||||
<li><a href="/react/downloads.html">download</a></li>
|
||||
<li><a href="/react/blog/">blog</a></li>
|
||||
<li><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<!-- Docs Nav -->
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Quick Start</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/getting-started.html">Getting Started</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tutorial.html">Tutorial</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/thinking-in-react.html">Thinking in React</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Community Resources</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/videos.html">Videos</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/complementary-tools.html">Complementary Tools</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">Examples</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Guides</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/why-react.html">Why React?</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/displaying-data.html">Displaying Data</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-in-depth.html">JSX in Depth</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-spread.html">JSX Spread Attributes</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-gotchas.html">JSX Gotchas</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/interactivity-and-dynamic-uis.html">Interactivity and Dynamic UIs</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/multiple-components.html">Multiple Components</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reusable-components.html">Reusable Components</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/transferring-props.html">Transferring Props</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/forms.html">Forms</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/working-with-the-browser.html">Working With the Browser</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/more-about-refs.html">More About Refs</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tooling-integration.html">Tooling Integration</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">Add-Ons</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/animation.html">Animation</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/two-way-binding-helpers.html">Two-Way Binding Helpers</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/class-name-manipulation.html">Class Name Manipulation</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/test-utils.html">Test Utilities</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/clone-with-props.html">Cloning Components</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/update.html">Immutability Helpers</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/pure-render-mixin.html">PureRenderMixin</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/perf.html">Performance Tools</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/top-level-api.html">Top-Level API</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/component-api.html">Component API</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/component-specs.html">Component Specs and Lifecycle</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tags-and-attributes.html">Supported Tags and Attributes</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/events.html">Event System</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/dom-differences.html">DOM Differences</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/special-non-dom-attributes.html">Special Non-DOM Attributes</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reconciliation.html">Reconciliation</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/glossary.html">React (Virtual) DOM Terminology</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Flux</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="http://facebook.github.io/flux/docs/overview.html">Flux Overview</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="http://facebook.github.io/flux/docs/todo-list.html">Flux TodoMVC Tutorial</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Tips Nav -->
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Tips</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/introduction.html">Introduction</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/inline-styles.html">Inline Styles</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/if-else-in-JSX.html">If-Else in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/self-closing-tag.html">Self-Closing Tag</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/maximum-number-of-jsx-root-nodes.html">Maximum Number of JSX Root Nodes</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/style-props-value-px.html">Shorthand for Specifying Pixel Values in style props</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/children-props-type.html">Type of the Children props</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/controlled-input-null-value.html">Value of null for Controlled Input</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html">componentWillReceiveProps Not Triggered After Mounting</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/props-in-getInitialState-as-anti-pattern.html">Props in getInitialState Is an Anti-Pattern</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/dom-event-listeners.html">DOM Event Listeners in a Component</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/initial-ajax.html">Load Initial Data via AJAX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/expose-component-functions.html">Expose Component Functions</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/references-to-components.html">References to Components</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/children-undefined.html">this.props.children undefined</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/use-react-with-other-libraries.html">Use React with Other Libraries</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>
|
||||
示例
|
||||
<a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs/docs/examples.zh-CN.md" target="_blank">Edit on GitHub</a>
|
||||
</h1>
|
||||
<div class="subHeader"></div>
|
||||
|
||||
<p>本页被移到了 <a href="https://github.com/facebook/react/wiki/Examples">GitHub wiki</a>。</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/complementary-tools-zh-CN.html">← Prev</a>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">
|
||||
A Facebook & Instagram collaboration.<br>
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<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/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+1
-1
@@ -402,7 +402,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -400,7 +400,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -0,0 +1,429 @@
|
||||
<!DOCTYPE html>
|
||||
<!--[if IE]><![endif]-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>Flux 应用架构 | React</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="Flux 应用架构 | React">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/flux-overview.zh-CN.html">
|
||||
<meta property="og:image" content="http://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="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<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 type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<!--[if lte IE 8]>
|
||||
<script type="text/javascript" src="/react/js/html5shiv.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/es5-shim.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/es5-sham.min.js"></script>
|
||||
<![endif]-->
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="nav-main">
|
||||
<div class="wrap">
|
||||
<a class="nav-home" href="/react/index.html">
|
||||
<img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<li><a href="/react/docs/getting-started.html" class="active">docs</a></li>
|
||||
<li><a href="/react/support.html">support</a></li>
|
||||
<li><a href="/react/downloads.html">download</a></li>
|
||||
<li><a href="/react/blog/">blog</a></li>
|
||||
<li><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<!-- Docs Nav -->
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Quick Start</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/getting-started.html">Getting Started</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tutorial.html">Tutorial</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/thinking-in-react.html">Thinking in React</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Community Resources</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/videos.html">Videos</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/complementary-tools.html">Complementary Tools</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">Examples</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Guides</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/why-react.html">Why React?</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/displaying-data.html">Displaying Data</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-in-depth.html">JSX in Depth</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-spread.html">JSX Spread Attributes</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-gotchas.html">JSX Gotchas</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/interactivity-and-dynamic-uis.html">Interactivity and Dynamic UIs</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/multiple-components.html">Multiple Components</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reusable-components.html">Reusable Components</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/transferring-props.html">Transferring Props</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/forms.html">Forms</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/working-with-the-browser.html">Working With the Browser</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/more-about-refs.html">More About Refs</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tooling-integration.html">Tooling Integration</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">Add-Ons</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/animation.html">Animation</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/two-way-binding-helpers.html">Two-Way Binding Helpers</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/class-name-manipulation.html">Class Name Manipulation</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/test-utils.html">Test Utilities</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/clone-with-props.html">Cloning Components</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/update.html">Immutability Helpers</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/pure-render-mixin.html">PureRenderMixin</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/perf.html">Performance Tools</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/top-level-api.html">Top-Level API</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/component-api.html">Component API</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/component-specs.html">Component Specs and Lifecycle</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tags-and-attributes.html">Supported Tags and Attributes</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/events.html">Event System</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/dom-differences.html">DOM Differences</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/special-non-dom-attributes.html">Special Non-DOM Attributes</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reconciliation.html">Reconciliation</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/glossary.html">React (Virtual) DOM Terminology</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Flux</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="http://facebook.github.io/flux/docs/overview.html">Flux Overview</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="http://facebook.github.io/flux/docs/todo-list.html">Flux TodoMVC Tutorial</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Tips Nav -->
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Tips</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/introduction.html">Introduction</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/inline-styles.html">Inline Styles</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/if-else-in-JSX.html">If-Else in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/self-closing-tag.html">Self-Closing Tag</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/maximum-number-of-jsx-root-nodes.html">Maximum Number of JSX Root Nodes</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/style-props-value-px.html">Shorthand for Specifying Pixel Values in style props</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/children-props-type.html">Type of the Children props</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/controlled-input-null-value.html">Value of null for Controlled Input</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html">componentWillReceiveProps Not Triggered After Mounting</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/props-in-getInitialState-as-anti-pattern.html">Props in getInitialState Is an Anti-Pattern</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/dom-event-listeners.html">DOM Event Listeners in a Component</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/initial-ajax.html">Load Initial Data via AJAX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/expose-component-functions.html">Expose Component Functions</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/references-to-components.html">References to Components</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/children-undefined.html">this.props.children undefined</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/use-react-with-other-libraries.html">Use React with Other Libraries</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>
|
||||
Flux 应用架构
|
||||
<a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs/docs/flux-overview.zh-CN.md" target="_blank">Edit on GitHub</a>
|
||||
</h1>
|
||||
<div class="subHeader"></div>
|
||||
|
||||
<p>本页被移到了 Flux 网站。<a href="http://facebook.github.io/flux/docs/overview.html">点击访问</a>。</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">
|
||||
A Facebook & Instagram collaboration.<br>
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<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/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -400,7 +400,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -0,0 +1,429 @@
|
||||
<!DOCTYPE html>
|
||||
<!--[if IE]><![endif]-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>Flux TodoMVC 教程 | React</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="Flux TodoMVC 教程 | React">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/flux-todo-list.zh-CN.html">
|
||||
<meta property="og:image" content="http://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="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<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 type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<!--[if lte IE 8]>
|
||||
<script type="text/javascript" src="/react/js/html5shiv.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/es5-shim.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/es5-sham.min.js"></script>
|
||||
<![endif]-->
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="nav-main">
|
||||
<div class="wrap">
|
||||
<a class="nav-home" href="/react/index.html">
|
||||
<img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<li><a href="/react/docs/getting-started.html" class="active">docs</a></li>
|
||||
<li><a href="/react/support.html">support</a></li>
|
||||
<li><a href="/react/downloads.html">download</a></li>
|
||||
<li><a href="/react/blog/">blog</a></li>
|
||||
<li><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<!-- Docs Nav -->
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Quick Start</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/getting-started.html">Getting Started</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tutorial.html">Tutorial</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/thinking-in-react.html">Thinking in React</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Community Resources</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/videos.html">Videos</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/complementary-tools.html">Complementary Tools</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">Examples</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Guides</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/why-react.html">Why React?</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/displaying-data.html">Displaying Data</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-in-depth.html">JSX in Depth</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-spread.html">JSX Spread Attributes</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-gotchas.html">JSX Gotchas</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/interactivity-and-dynamic-uis.html">Interactivity and Dynamic UIs</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/multiple-components.html">Multiple Components</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reusable-components.html">Reusable Components</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/transferring-props.html">Transferring Props</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/forms.html">Forms</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/working-with-the-browser.html">Working With the Browser</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/more-about-refs.html">More About Refs</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tooling-integration.html">Tooling Integration</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">Add-Ons</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/animation.html">Animation</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/two-way-binding-helpers.html">Two-Way Binding Helpers</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/class-name-manipulation.html">Class Name Manipulation</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/test-utils.html">Test Utilities</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/clone-with-props.html">Cloning Components</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/update.html">Immutability Helpers</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/pure-render-mixin.html">PureRenderMixin</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/perf.html">Performance Tools</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/top-level-api.html">Top-Level API</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/component-api.html">Component API</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/component-specs.html">Component Specs and Lifecycle</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tags-and-attributes.html">Supported Tags and Attributes</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/events.html">Event System</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/dom-differences.html">DOM Differences</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/special-non-dom-attributes.html">Special Non-DOM Attributes</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reconciliation.html">Reconciliation</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/glossary.html">React (Virtual) DOM Terminology</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Flux</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="http://facebook.github.io/flux/docs/overview.html">Flux Overview</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="http://facebook.github.io/flux/docs/todo-list.html">Flux TodoMVC Tutorial</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Tips Nav -->
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Tips</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/introduction.html">Introduction</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/inline-styles.html">Inline Styles</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/if-else-in-JSX.html">If-Else in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/self-closing-tag.html">Self-Closing Tag</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/maximum-number-of-jsx-root-nodes.html">Maximum Number of JSX Root Nodes</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/style-props-value-px.html">Shorthand for Specifying Pixel Values in style props</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/children-props-type.html">Type of the Children props</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/controlled-input-null-value.html">Value of null for Controlled Input</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html">componentWillReceiveProps Not Triggered After Mounting</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/props-in-getInitialState-as-anti-pattern.html">Props in getInitialState Is an Anti-Pattern</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/dom-event-listeners.html">DOM Event Listeners in a Component</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/initial-ajax.html">Load Initial Data via AJAX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/expose-component-functions.html">Expose Component Functions</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/references-to-components.html">References to Components</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/children-undefined.html">this.props.children undefined</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/use-react-with-other-libraries.html">Use React with Other Libraries</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>
|
||||
Flux TodoMVC 教程
|
||||
<a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs/docs/flux-todo-list.zh-CN.md" target="_blank">Edit on GitHub</a>
|
||||
</h1>
|
||||
<div class="subHeader"></div>
|
||||
|
||||
<p>本页被移到了 Flux 网站。<a href="http://facebook.github.io/flux/docs/todo-list.html">点击访问</a>。</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">
|
||||
A Facebook & Instagram collaboration.<br>
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<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/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -517,7 +517,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
+1
-1
@@ -502,7 +502,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -479,7 +479,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -479,7 +479,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
+1
-1
@@ -528,7 +528,7 @@ type ReactComponent<TProps> = {
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -457,7 +457,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -435,7 +435,7 @@
|
||||
<ul>
|
||||
<li><strong>Computed data:</strong> Don't worry about precomputing values based on state — it's easier to ensure that your UI is consistent if you do all computation within <code>render()</code>. For example, if you have an array of list items in state and you want to render the count as a string, simply render <code>this.state.listItems.length + ' list items'</code> in your <code>render()</code> method rather than storing it on state.</li>
|
||||
<li><strong>React components:</strong> Build them in <code>render()</code> based on underlying props and state.</li>
|
||||
<li><strong>Duplicated data from props:</strong> Try to use props as the source of truth where possible. One valid use to store props in state is to be able to know it's previous values, because props can change over time.</li>
|
||||
<li><strong>Duplicated data from props:</strong> Try to use props as the source of truth where possible. One valid use to store props in state is to be able to know its previous values, because props can change over time.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
@@ -457,7 +457,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -386,7 +386,7 @@
|
||||
<p>JSX 与 HTML 非常相似，但是有些关键区别要注意。</p>
|
||||
|
||||
<blockquote>
|
||||
<p>提示:</p>
|
||||
<p>注意:</p>
|
||||
|
||||
<p>关于 DOM 的区别，如行内样式属性 <code>style</code>，参考 <a href="/react/docs/dom-differences.html">DOM 区别</a></p>
|
||||
</blockquote>
|
||||
@@ -436,7 +436,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -436,7 +436,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -407,7 +407,7 @@
|
||||
<p>React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。</p>
|
||||
|
||||
<blockquote>
|
||||
<p>提示:</p>
|
||||
<p>注意:</p>
|
||||
|
||||
<p>由于 JSX 就是 JavaScript，一些标识符像 <code>class</code> 和 <code>for</code> 不建议作为 XML
|
||||
属性名。作为替代，React DOM 使用 <code>className</code> 和 <code>htmlFor</code> 来做对应的属性。</p>
|
||||
@@ -438,7 +438,7 @@
|
||||
<p>如果你要使用 JSX，这篇 <a href="/react/docs/getting-started.html">新手入门</a> 教程来教你如何搭建环境。</p>
|
||||
|
||||
<blockquote>
|
||||
<p>提示:</p>
|
||||
<p>注意:</p>
|
||||
|
||||
<p>JSX 表达式总是会当作 ReactElement 执行。具体的实际细节可能不同。一种优化
|
||||
的模式是把 ReactElement 当作一个行内的对象字面量形式来绕过
|
||||
@@ -478,7 +478,7 @@
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<blockquote>
|
||||
<p>提示:</p>
|
||||
<p>注意:</p>
|
||||
|
||||
<p>JSX 类似于 HTML，但不完全一样。参考 <a href="/react/docs/jsx-gotchas.html">JSX 陷阱</a> 了解主要不同。</p>
|
||||
</blockquote>
|
||||
@@ -502,7 +502,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -450,7 +450,7 @@ ReactElement as an object literal to bypass the validation code in
|
||||
<code>React.createElement</code>.</p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="namespaced-components"></a>Namespaced Components <a class="hash-link" href="#namespaced-components">#</a></h2>
|
||||
<p>If you are building a component that have a lot of childrens, or if you are building your application with some categories of reusable components (like a <code>Form</code> category), to make more simple and easiest, you can use a <em>namespaced component</em> to avoid something like this:</p>
|
||||
<p>If you are building a component that has many children, or if you are building your application with some categories of reusable components (like a <code>Form</code> category), to make it simpler and easier, you can use a <em>namespaced component</em> to avoid something like this:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Form</span> <span class="o">=</span> <span class="nx">MyFormComponent</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">FormRow</span> <span class="o">=</span> <span class="nx">Form</span><span class="p">.</span><span class="nx">Row</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">FormLabel</span> <span class="o">=</span> <span class="nx">Form</span><span class="p">.</span><span class="nx">Label</span><span class="p">;</span>
|
||||
@@ -465,7 +465,7 @@ ReactElement as an object literal to bypass the validation code in
|
||||
<span class="o"><</span><span class="err">/Form></span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>Instead of declare a bunch of variables at the top, you'll get just one component that have other components as attributes.</p>
|
||||
<p>Instead of declaring a bunch of variables at the top, you'll get just one component that has other components as attributes.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Form</span> <span class="o">=</span> <span class="nx">MyFormComponent</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">App</span> <span class="o">=</span> <span class="p">(</span>
|
||||
@@ -477,7 +477,7 @@ ReactElement as an object literal to bypass the validation code in
|
||||
<span class="o"><</span><span class="err">/Form></span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>For doing this, you just need to create your <em>"sub-components"</em> as attributes of the main component:</p>
|
||||
<p>To do this, you just need to create your <em>"sub-components"</em> as attributes of the main component:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyFormComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span> <span class="p">...</span> <span class="p">});</span>
|
||||
|
||||
<span class="nx">MyFormComponent</span><span class="p">.</span><span class="nx">Row</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span> <span class="p">...</span> <span class="p">});</span>
|
||||
@@ -558,7 +558,7 @@ pair of curly braces (<code>{}</code>) instead of quotes (<code>""</co
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -429,7 +429,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -429,7 +429,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -517,7 +517,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -0,0 +1,587 @@
|
||||
<!DOCTYPE html>
|
||||
<!--[if IE]><![endif]-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>复合组件 | React</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="复合组件 | React">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/multiple-components-zh-CN.html">
|
||||
<meta property="og:image" content="http://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="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<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 type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<!--[if lte IE 8]>
|
||||
<script type="text/javascript" src="/react/js/html5shiv.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/es5-shim.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/es5-sham.min.js"></script>
|
||||
<![endif]-->
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="nav-main">
|
||||
<div class="wrap">
|
||||
<a class="nav-home" href="/react/index.html">
|
||||
<img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<li><a href="/react/docs/getting-started.html" class="active">docs</a></li>
|
||||
<li><a href="/react/support.html">support</a></li>
|
||||
<li><a href="/react/downloads.html">download</a></li>
|
||||
<li><a href="/react/blog/">blog</a></li>
|
||||
<li><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<!-- Docs Nav -->
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Quick Start</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/getting-started.html">Getting Started</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tutorial.html">Tutorial</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/thinking-in-react.html">Thinking in React</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Community Resources</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/videos.html">Videos</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/complementary-tools.html">Complementary Tools</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">Examples</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Guides</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/why-react.html">Why React?</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/displaying-data.html">Displaying Data</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-in-depth.html">JSX in Depth</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-spread.html">JSX Spread Attributes</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-gotchas.html">JSX Gotchas</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/interactivity-and-dynamic-uis.html">Interactivity and Dynamic UIs</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/multiple-components.html">Multiple Components</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reusable-components.html">Reusable Components</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/transferring-props.html">Transferring Props</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/forms.html">Forms</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/working-with-the-browser.html">Working With the Browser</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/more-about-refs.html">More About Refs</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tooling-integration.html">Tooling Integration</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">Add-Ons</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/animation.html">Animation</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/two-way-binding-helpers.html">Two-Way Binding Helpers</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/class-name-manipulation.html">Class Name Manipulation</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/test-utils.html">Test Utilities</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/clone-with-props.html">Cloning Components</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/update.html">Immutability Helpers</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/pure-render-mixin.html">PureRenderMixin</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/perf.html">Performance Tools</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/top-level-api.html">Top-Level API</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/component-api.html">Component API</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/component-specs.html">Component Specs and Lifecycle</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tags-and-attributes.html">Supported Tags and Attributes</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/events.html">Event System</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/dom-differences.html">DOM Differences</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/special-non-dom-attributes.html">Special Non-DOM Attributes</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reconciliation.html">Reconciliation</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/glossary.html">React (Virtual) DOM Terminology</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Flux</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="http://facebook.github.io/flux/docs/overview.html">Flux Overview</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="http://facebook.github.io/flux/docs/todo-list.html">Flux TodoMVC Tutorial</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Tips Nav -->
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Tips</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/introduction.html">Introduction</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/inline-styles.html">Inline Styles</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/if-else-in-JSX.html">If-Else in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/self-closing-tag.html">Self-Closing Tag</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/maximum-number-of-jsx-root-nodes.html">Maximum Number of JSX Root Nodes</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/style-props-value-px.html">Shorthand for Specifying Pixel Values in style props</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/children-props-type.html">Type of the Children props</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/controlled-input-null-value.html">Value of null for Controlled Input</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html">componentWillReceiveProps Not Triggered After Mounting</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/props-in-getInitialState-as-anti-pattern.html">Props in getInitialState Is an Anti-Pattern</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/dom-event-listeners.html">DOM Event Listeners in a Component</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/initial-ajax.html">Load Initial Data via AJAX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/expose-component-functions.html">Expose Component Functions</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/references-to-components.html">References to Components</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/children-undefined.html">this.props.children undefined</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/use-react-with-other-libraries.html">Use React with Other Libraries</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>
|
||||
复合组件
|
||||
<a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs/docs/04-multiple-components.zh-CN.md" target="_blank">Edit on GitHub</a>
|
||||
</h1>
|
||||
<div class="subHeader"></div>
|
||||
|
||||
<p>目前为止，我们已经学了如何用单个组件来展示数据和处理用户输入。下一步让我们来体验 React 最激动人心的特性之一：可组合性（composability）。</p>
|
||||
<h2><a class="anchor" name=""></a>动机：关注分离 <a class="hash-link" href="#">#</a></h2>
|
||||
<p>通过复用那些接口定义良好的组件来开发新的模块化组件，我们得到了与使用函数和类相似的好处。具体来说就是能够通过开发简单的组件把程序的<em>不同关注面分离</em>。如果为程序开发一套自定义的组件库，那么就能以最适合业务场景的方式来展示你的用户界面。</p>
|
||||
<h2><a class="anchor" name=""></a>组合实例 <a class="hash-link" href="#">#</a></h2>
|
||||
<p>一起来使用 Facebook Graph API 开发显示个人图片和用户名的简单 Avatar 组件吧。</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Avatar</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</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="o"><</span><span class="nx">ProfilePic</span> <span class="nx">username</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">username</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">ProfileLink</span> <span class="nx">username</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">username</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">ProfilePic</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</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">img</span> <span class="nx">src</span><span class="o">=</span><span class="p">{</span><span class="s1">'http://graph.facebook.com/'</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">username</span> <span class="o">+</span> <span class="s1">'/picture'</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">ProfileLink</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</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">a</span> <span class="nx">href</span><span class="o">=</span><span class="p">{</span><span class="s1">'http://www.facebook.com/'</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">username</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">props</span><span class="p">.</span><span class="nx">username</span><span class="p">}</span>
|
||||
<span class="o"><</span><span class="err">/a></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">Avatar</span> <span class="nx">username</span><span class="o">=</span><span class="s2">"pwh"</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">'example'</span><span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div><h2><a class="anchor" name=""></a>从属关系 <a class="hash-link" href="#">#</a></h2>
|
||||
<p>上面例子中，<code>Avatar</code> 拥有 <code>ProfilePic</code> 和 <code>ProfileLink</code> 的实例。<code>拥有者</code> 就是给其它组件设置 <code>props</code> 的那个组件。更正式地说，
|
||||
如果组件 <code>Y</code> 在 <code>render()</code> 方法是创建了组件 <code>X</code>，那么 <code>Y</code> 就拥有 <code>X</code>。上面讲过，组件不能修改自身的 <code>props</code> - 它们总是与它们拥有者设置的保持一致。这是保持用户界面一致性的关键性原则。</p>
|
||||
|
||||
<p>把从属关系与父子关系加以区别至关重要。从属关系是 React 特有的，而父子关系简单来讲就是DOM 里的标签的关系。在上一个例子中，<code>Avatar</code> 拥有 <code>div</code>、<code>ProfilePic</code> 和 <code>ProfileLink</code> 实例，<code>div</code> 是 <code>ProfilePic</code> 和 <code>ProfileLink</code> 实例的<strong>父级</strong>（但不是拥有者）。</p>
|
||||
<h2><a class="anchor" name=""></a>子级 <a class="hash-link" href="#">#</a></h2>
|
||||
<p>实例化 React 组件时，你可以在开始标签和结束标签之间引用在React 组件或者Javascript 表达式：</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="o"><</span><span class="nx">Parent</span><span class="o">><</span><span class="nx">Child</span> <span class="o">/><</span><span class="err">/Parent></span>
|
||||
</code></pre></div>
|
||||
<p><code>Parent</code> 能通过专门的 <code>this.props.children</code> props 读取子级。<strong><code>this.props.children</code> 是一个不透明的数据结构：</strong> 通过 <a href="/react/docs/top-level-api.html#react.children">React.Children 工具类</a> 来操作。</p>
|
||||
<h3><a class="anchor" name="reconciliation"></a>子级校正（Reconciliation） <a class="hash-link" href="#reconciliation">#</a></h3>
|
||||
<p><strong>校正就是每次 render 方法调用后 React 更新 DOM 的过程。</strong> 一般情况下，子级会根据它们被渲染的顺序来做校正。例如，下面代码描述了两次渲染的过程：</p>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html">// 第一次渲染
|
||||
<span class="nt"><Card></span>
|
||||
<span class="nt"><p></span>Paragraph 1<span class="nt"></p></span>
|
||||
<span class="nt"><p></span>Paragraph 2<span class="nt"></p></span>
|
||||
<span class="nt"></Card></span>
|
||||
// 第二次渲染
|
||||
<span class="nt"><Card></span>
|
||||
<span class="nt"><p></span>Paragraph 2<span class="nt"></p></span>
|
||||
<span class="nt"></Card></span>
|
||||
</code></pre></div>
|
||||
<p>直观来看，只是删除了<code><p>Paragraph 1</p></code>。事实上，React 先更新第一个子级的内容，然后删除最后一个组件。React 是根据子级的<em>顺序</em>来校正的。</p>
|
||||
<h3><a class="anchor" name=""></a>子组件状态管理 <a class="hash-link" href="#">#</a></h3>
|
||||
<p>对于大多数组件，这没什么大碍。但是，对于使用 <code>this.state</code> 来在多次渲染过程中里维持数据的状态化组件，这样做潜在很多问题。</p>
|
||||
|
||||
<p>多数情况下，可以通过隐藏组件而不是删除它们来绕过这些问题。</p>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html">// 第一次渲染
|
||||
<span class="nt"><Card></span>
|
||||
<span class="nt"><p></span>Paragraph 1<span class="nt"></p></span>
|
||||
<span class="nt"><p></span>Paragraph 2<span class="nt"></p></span>
|
||||
<span class="nt"></Card></span>
|
||||
// 第二次渲染
|
||||
<span class="nt"><Card></span>
|
||||
<span class="nt"><p</span> <span class="na">style=</span><span class="s">{{display:</span> <span class="err">'</span><span class="na">none</span><span class="err">'}}</span><span class="nt">></span>Paragraph 1<span class="nt"></p></span>
|
||||
<span class="nt"><p></span>Paragraph 2<span class="nt"></p></span>
|
||||
<span class="nt"></Card></span>
|
||||
</code></pre></div><h3><a class="anchor" name=""></a>动态子级 <a class="hash-link" href="#">#</a></h3>
|
||||
<p>如果子组件位置会改变（如在搜索结果中）或者有新组件添加到列表开头（如在流中）情况会变得更加复杂。如果子级要在多个渲染阶段保持自己的特征和状态，在这种情况下，你可以通过给子级设置惟一标识的 <code>key</code> 来区分。</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">results</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">results</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">ol</span><span class="o">></span>
|
||||
<span class="p">{</span><span class="nx">results</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">result</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">li</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">result</span><span class="p">.</span><span class="nx">id</span><span class="p">}</span><span class="o">></span><span class="p">{</span><span class="nx">result</span><span class="p">.</span><span class="nx">text</span><span class="p">}</span><span class="o"><</span><span class="err">/li>;</span>
|
||||
<span class="p">})}</span>
|
||||
<span class="o"><</span><span class="err">/ol></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>当 React 校正带有 key 的子级时，它会确保它们被重新排序（而不是破坏）或者删除（而不是重用）。
|
||||
<code>务必</code> 把 <code>key</code> 添加到子级数组里组件本身上，而不是每个子级内部最外层 HTML 上：</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// 错误！</span>
|
||||
<span class="kd">var</span> <span class="nx">ListItemWrapper</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">li</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">id</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">props</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">text</span><span class="p">}</span><span class="o"><</span><span class="err">/li>;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</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">ul</span><span class="o">></span>
|
||||
<span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">results</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">result</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">ListItemWrapper</span> <span class="nx">data</span><span class="o">=</span><span class="p">{</span><span class="nx">result</span><span class="p">}</span><span class="o">/></span><span class="p">;</span>
|
||||
<span class="p">})}</span>
|
||||
<span class="o"><</span><span class="err">/ul></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="c1">// 正确 :)</span>
|
||||
<span class="kd">var</span> <span class="nx">ListItemWrapper</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">li</span><span class="o">></span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">text</span><span class="p">}</span><span class="o"><</span><span class="err">/li>;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</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">ul</span><span class="o">></span>
|
||||
<span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">results</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">result</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">ListItemWrapper</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">result</span><span class="p">.</span><span class="nx">id</span><span class="p">}</span> <span class="nx">data</span><span class="o">=</span><span class="p">{</span><span class="nx">result</span><span class="p">}</span><span class="o">/></span><span class="p">;</span>
|
||||
<span class="p">})}</span>
|
||||
<span class="o"><</span><span class="err">/ul></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>也可以传递 object 来做有 key 的子级。object 的 key 会被当作每个组件的 <code>key</code>。但是一定要牢记 JavaScript 并不总是保证属性的顺序会被保留。实际情况下浏览器一般会保留属性的顺序，<strong>除了</strong> 使用 32位无符号数字做为 key 的属性。数字型属性会按大小排序并且排在其它属性前面。一旦发生这种情况，React 渲染组件的顺序就是混乱。可能在 key 前面加一个字符串前缀来避免：</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">items</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">results</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">result</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="c1">// 如果 result.id 看起来是一个数字（比如短哈希），那么</span>
|
||||
<span class="c1">// 对象字面量的顺序就得不到保证。这种情况下，需要添加前缀</span>
|
||||
<span class="c1">// 来确保 key 是字符串。</span>
|
||||
<span class="nx">items</span><span class="p">[</span><span class="s1">'result-'</span> <span class="o">+</span> <span class="nx">result</span><span class="p">.</span><span class="nx">id</span><span class="p">]</span> <span class="o">=</span> <span class="o"><</span><span class="nx">li</span><span class="o">></span><span class="p">{</span><span class="nx">result</span><span class="p">.</span><span class="nx">text</span><span class="p">}</span><span class="o"><</span><span class="err">/li>;</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">ol</span><span class="o">></span>
|
||||
<span class="p">{</span><span class="nx">items</span><span class="p">}</span>
|
||||
<span class="o"><</span><span class="err">/ol></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div><h2><a class="anchor" name=""></a>数据流 <a class="hash-link" href="#">#</a></h2>
|
||||
<p>React 里，数据通过上面介绍过的 <code>props</code> 从拥有者流向归属者。这就是高效的单向数据绑定(one-way data binding)：拥有者通过它的 <code>props</code> 或 <code>state</code> 计算出一些值，并把这些值绑定到它们拥有的组件的 props 上。因为这个过程会递归地调用，所以数据变化会自动在所有被使用的地方自动反映出来。</p>
|
||||
<h2><a class="anchor" name=""></a>性能提醒 <a class="hash-link" href="#">#</a></h2>
|
||||
<p>你或许会担心如果一个拥有者有大量子级时，对于数据变化做出响应非常耗费性能。值得庆幸的是执行 JavaScript 非常的快，而且 <code>render()</code> 方法一般比较简单，所以在大部分应用里这样做速度极快。此外，性能的瓶颈大多是因为 DOM 更新，而非 JS 执行，而且 React 会通过批量更新和变化检测来优化性能。</p>
|
||||
|
||||
<p>但是，有时候需要做细粒度的性能控制。这种情况下，可以重写 <code>shouldComponentUpdate()</code> 方法返回 false 来让 React 跳过对子树的处理。参考 <a href="/react/docs/component-specs.html">React reference docs</a> 了解更多。</p>
|
||||
|
||||
<blockquote>
|
||||
<p>注意：</p>
|
||||
|
||||
<p>如果在数据变化时让 <code>shouldComponentUpdate()</code> 返回 false，React 就不能保证用户界面同步。当使用它的时候一定确保你清楚到底做了什么，并且只在遇到明显性能问题的时候才使用它。不要低估 JavaScript 的速度，DOM 操作通常才是慢的原因。</p>
|
||||
</blockquote>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/interactivity-and-dynamic-uis-zh-CN.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/reusable-components-zh-CN.html">Next →</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">
|
||||
A Facebook & Instagram collaboration.<br>
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<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/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -558,7 +558,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
+1
-1
@@ -453,7 +453,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -424,7 +424,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -483,7 +483,7 @@ renderB: <span class="nt"><div><span</span> <span class="na">key=</span
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -0,0 +1,579 @@
|
||||
<!DOCTYPE html>
|
||||
<!--[if IE]><![endif]-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>可复用组件 | React</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="可复用组件 | React">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/reusable-components-zh-CN.html">
|
||||
<meta property="og:image" content="http://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="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<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 type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<!--[if lte IE 8]>
|
||||
<script type="text/javascript" src="/react/js/html5shiv.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/es5-shim.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/es5-sham.min.js"></script>
|
||||
<![endif]-->
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="nav-main">
|
||||
<div class="wrap">
|
||||
<a class="nav-home" href="/react/index.html">
|
||||
<img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<li><a href="/react/docs/getting-started.html" class="active">docs</a></li>
|
||||
<li><a href="/react/support.html">support</a></li>
|
||||
<li><a href="/react/downloads.html">download</a></li>
|
||||
<li><a href="/react/blog/">blog</a></li>
|
||||
<li><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<!-- Docs Nav -->
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Quick Start</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/getting-started.html">Getting Started</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tutorial.html">Tutorial</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/thinking-in-react.html">Thinking in React</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Community Resources</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/videos.html">Videos</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/complementary-tools.html">Complementary Tools</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">Examples</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Guides</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/why-react.html">Why React?</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/displaying-data.html">Displaying Data</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-in-depth.html">JSX in Depth</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-spread.html">JSX Spread Attributes</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-gotchas.html">JSX Gotchas</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/interactivity-and-dynamic-uis.html">Interactivity and Dynamic UIs</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/multiple-components.html">Multiple Components</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reusable-components.html">Reusable Components</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/transferring-props.html">Transferring Props</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/forms.html">Forms</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/working-with-the-browser.html">Working With the Browser</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/more-about-refs.html">More About Refs</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tooling-integration.html">Tooling Integration</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">Add-Ons</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/animation.html">Animation</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/two-way-binding-helpers.html">Two-Way Binding Helpers</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/class-name-manipulation.html">Class Name Manipulation</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/test-utils.html">Test Utilities</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/clone-with-props.html">Cloning Components</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/update.html">Immutability Helpers</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/pure-render-mixin.html">PureRenderMixin</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/perf.html">Performance Tools</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/top-level-api.html">Top-Level API</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/component-api.html">Component API</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/component-specs.html">Component Specs and Lifecycle</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tags-and-attributes.html">Supported Tags and Attributes</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/events.html">Event System</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/dom-differences.html">DOM Differences</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/special-non-dom-attributes.html">Special Non-DOM Attributes</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reconciliation.html">Reconciliation</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/glossary.html">React (Virtual) DOM Terminology</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Flux</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="http://facebook.github.io/flux/docs/overview.html">Flux Overview</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="http://facebook.github.io/flux/docs/todo-list.html">Flux TodoMVC Tutorial</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Tips Nav -->
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Tips</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/introduction.html">Introduction</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/inline-styles.html">Inline Styles</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/if-else-in-JSX.html">If-Else in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/self-closing-tag.html">Self-Closing Tag</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/maximum-number-of-jsx-root-nodes.html">Maximum Number of JSX Root Nodes</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/style-props-value-px.html">Shorthand for Specifying Pixel Values in style props</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/children-props-type.html">Type of the Children props</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/controlled-input-null-value.html">Value of null for Controlled Input</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html">componentWillReceiveProps Not Triggered After Mounting</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/props-in-getInitialState-as-anti-pattern.html">Props in getInitialState Is an Anti-Pattern</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/dom-event-listeners.html">DOM Event Listeners in a Component</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/initial-ajax.html">Load Initial Data via AJAX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/expose-component-functions.html">Expose Component Functions</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/references-to-components.html">References to Components</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/children-undefined.html">this.props.children undefined</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/use-react-with-other-libraries.html">Use React with Other Libraries</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>
|
||||
可复用组件
|
||||
<a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs/docs/05-reusable-components.zh-CN.md" target="_blank">Edit on GitHub</a>
|
||||
</h1>
|
||||
<div class="subHeader"></div>
|
||||
|
||||
<p>设计接口的时候，把通用的设计元素（按钮，表单框，布局组件等）拆成接口良好定义的可复用的组件。这样，下次开发相同界面程序时就可以写更少的代码，也意义着更高的开发效率，更少的 Bug 和更少的程序体积。</p>
|
||||
<h2><a class="anchor" name="prop-"></a>Prop 验证 <a class="hash-link" href="#prop-">#</a></h2>
|
||||
<p>随着应用不断变大，保证组件被正确使用变得非常有用。为此我们引入 <code>propTypes</code>。<code>React.PropTypes</code> 提供很多验证器 (validator) 来验证传入数据的有效性。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。注意为了性能考虑，只在开发环境验证 <code>propTypes</code>。下面用例子来说明不同验证器的区别：</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">propTypes</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="c1">// 可以声明 prop 为指定的 JS 基本类型。默认</span>
|
||||
<span class="c1">// 情况下，这些 prop 都是可传可不传的。</span>
|
||||
<span class="nx">optionalArray</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">array</span><span class="p">,</span>
|
||||
<span class="nx">optionalBool</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">bool</span><span class="p">,</span>
|
||||
<span class="nx">optionalFunc</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">func</span><span class="p">,</span>
|
||||
<span class="nx">optionalNumber</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">number</span><span class="p">,</span>
|
||||
<span class="nx">optionalObject</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">object</span><span class="p">,</span>
|
||||
<span class="nx">optionalString</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">string</span><span class="p">,</span>
|
||||
|
||||
<span class="c1">// 所有可以被渲染的对象：数字，</span>
|
||||
<span class="c1">// 字符串，DOM 元素或包含这些类型的数组。</span>
|
||||
<span class="nx">optionalNode</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">node</span><span class="p">,</span>
|
||||
|
||||
<span class="c1">// React 元素</span>
|
||||
<span class="nx">optionalElement</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">element</span><span class="p">,</span>
|
||||
|
||||
<span class="c1">// 用 JS 的 instanceof 操作符声明 prop 为类的实例。</span>
|
||||
<span class="nx">optionalMessage</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">instanceOf</span><span class="p">(</span><span class="nx">Message</span><span class="p">),</span>
|
||||
|
||||
<span class="c1">// 用 enum 来限制 prop 只接受指定的值。</span>
|
||||
<span class="nx">optionalEnum</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">oneOf</span><span class="p">([</span><span class="s1">'News'</span><span class="p">,</span> <span class="s1">'Photos'</span><span class="p">]),</span>
|
||||
|
||||
<span class="c1">// 指定的多个对象类型中的一个</span>
|
||||
<span class="nx">optionalUnion</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">oneOfType</span><span class="p">([</span>
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">string</span><span class="p">,</span>
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">number</span><span class="p">,</span>
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">instanceOf</span><span class="p">(</span><span class="nx">Message</span><span class="p">)</span>
|
||||
<span class="p">]),</span>
|
||||
|
||||
<span class="c1">// 指定类型组成的数组</span>
|
||||
<span class="nx">optionalArrayOf</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">arrayOf</span><span class="p">(</span><span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">number</span><span class="p">),</span>
|
||||
|
||||
<span class="c1">// 指定类型的属性构成的对象</span>
|
||||
<span class="nx">optionalObjectOf</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">objectOf</span><span class="p">(</span><span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">number</span><span class="p">),</span>
|
||||
|
||||
<span class="c1">// 特定形状参数的对象</span>
|
||||
<span class="nx">optionalObjectWithShape</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">shape</span><span class="p">({</span>
|
||||
<span class="nx">color</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">string</span><span class="p">,</span>
|
||||
<span class="nx">fontSize</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">number</span>
|
||||
<span class="p">}),</span>
|
||||
|
||||
<span class="c1">// 以后任意类型加上 `isRequired` 来使 prop 不可空。</span>
|
||||
<span class="nx">requiredFunc</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">func</span><span class="p">.</span><span class="nx">isRequired</span><span class="p">,</span>
|
||||
|
||||
<span class="c1">// 不可空的任意类型</span>
|
||||
<span class="nx">requiredAny</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">any</span><span class="p">.</span><span class="nx">isRequired</span><span class="p">,</span>
|
||||
|
||||
<span class="c1">// 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接</span>
|
||||
<span class="c1">// 使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。</span>
|
||||
<span class="nx">customProp</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">props</span><span class="p">,</span> <span class="nx">propName</span><span class="p">,</span> <span class="nx">componentName</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="sr">/matchme/</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">props</span><span class="p">[</span><span class="nx">propName</span><span class="p">]))</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s1">'Validation failed!'</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span>
|
||||
<span class="cm">/* ... */</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div><h2><a class="anchor" name="-prop-"></a>默认 Prop 值 <a class="hash-link" href="#-prop-">#</a></h2>
|
||||
<p>React 支持以声明式的方式来定义 <code>props</code> 的默认值。</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">ComponentWithDefaultProps</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">getDefaultProps</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span>
|
||||
<span class="nx">value</span><span class="o">:</span> <span class="s1">'default value'</span>
|
||||
<span class="p">};</span>
|
||||
<span class="p">}</span>
|
||||
<span class="cm">/* ... */</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>当父级没有传入 props 时，<code>getDefaultProps()</code> 可以保证 <code>this.props.value</code> 有默认值，注意 <code>getDefaultProps</code> 的结果会被 <em>缓存</em>。得益于此，你可以直接使用 props，而不必写手动编写一些重复或无意义的代码。</p>
|
||||
<h2><a class="anchor" name="-props"></a>传递 Props：小技巧 <a class="hash-link" href="#-props">#</a></h2>
|
||||
<p>有一些常用的 React 组件只是对 HTML 做简单扩展。通常，你想少写点代码来把传入组件的 props 复制到对应的 HTML 元素上。这时 JSX 的 <em>spread</em> 语法会帮到你：</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">CheckLink</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// 这样会把 CheckList 所有的 props 复制到 <a></span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">a</span> <span class="p">{...</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">}</span><span class="o">></span><span class="p">{</span><span class="s1">'√ '</span><span class="p">}{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">children</span><span class="p">}</span><span class="o"><</span><span class="err">/a>;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">CheckLink</span> <span class="nx">href</span><span class="o">=</span><span class="s2">"/checked.html"</span><span class="o">></span>
|
||||
<span class="nx">Click</span> <span class="nx">here</span><span class="o">!</span>
|
||||
<span class="o"><</span><span class="err">/CheckLink>,</span>
|
||||
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'example'</span><span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div><h2><a class="anchor" name=""></a>单个子级 <a class="hash-link" href="#">#</a></h2>
|
||||
<p><code>React.PropTypes.element</code> 可以限定只能有一个子级传入。</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">propTypes</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">children</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">element</span><span class="p">.</span><span class="nx">isRequired</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</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="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">children</span><span class="p">}</span> <span class="c1">// 有且仅有一个元素，否则会抛异常。</span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="p">});</span>
|
||||
</code></pre></div><h2><a class="anchor" name="mixins"></a>Mixins <a class="hash-link" href="#mixins">#</a></h2>
|
||||
<p>组件是 React 里复用代码最佳方式，但是有时一些复杂的组件间也需要共用一些功能。有时会被称为 <a href="http://en.wikipedia.org/wiki/Cross-cutting_concern">跨切面关注点</a>。React 使用 <code>mixins</code> 来解决这类问题。</p>
|
||||
|
||||
<p>一个通用的场景是：一个组件需要定期更新。用 <code>setInterval()</code> 做很容易，但当不需要它的时候取消定时器来节省内存是非常重要的。React 提供 <a href="/react/docs/working-with-the-browser.html#component-lifecycle">生命周期方法</a> 来告知组件创建或销毁的时间。下面来做一个简单的 mixin，使用 <code>setInterval()</code> 并保证在组件销毁时清理定时器。</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">SetIntervalMixin</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">componentWillMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">intervals</span> <span class="o">=</span> <span class="p">[];</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">setInterval</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">intervals</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">setInterval</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">));</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">componentWillUnmount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">intervals</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">clearInterval</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">TickTock</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">SetIntervalMixin</span><span class="p">],</span> <span class="c1">// 引用 mixin</span>
|
||||
<span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span><span class="nx">seconds</span><span class="o">:</span> <span class="mi">0</span><span class="p">};</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">componentDidMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setInterval</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">tick</span><span class="p">,</span> <span class="mi">1000</span><span class="p">);</span> <span class="c1">// 调用 mixin 的方法</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">tick</span><span class="o">:</span> <span class="kd">function</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">seconds</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">seconds</span> <span class="o">+</span> <span class="mi">1</span><span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</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">p</span><span class="o">></span>
|
||||
<span class="nx">React</span> <span class="nx">has</span> <span class="nx">been</span> <span class="nx">running</span> <span class="k">for</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">seconds</span><span class="p">}</span> <span class="nx">seconds</span><span class="p">.</span>
|
||||
<span class="o"><</span><span class="err">/p></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">TickTock</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">'example'</span><span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>关于 mixin 值得一提的优点是，如果一个组件使用了多个 mixin，并用有多个 mixin 定义了同样的生命周期方法（如：多个 mixin 都需要在组件销毁时做资源清理操作），所有这些生命周期方法都保证会被执行到。方法执行顺序是：首先按 mixin 引入顺序执行 mixin 里方法，最后执行组件内定义的方法。</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/multiple-components-zh-CN.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/transferring-props-zh-CN.html">Next →</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">
|
||||
A Facebook & Instagram collaboration.<br>
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<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/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -555,7 +555,7 @@ a component as children.</p>
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -410,7 +410,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -459,7 +459,7 @@ strokeOpacity strokeWidth textAnchor transform version viewBox x1 x2 x y1 y2 y
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -457,7 +457,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -543,7 +543,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -420,7 +420,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -477,7 +477,7 @@ existing DOM node without overwriting the existing children.</p>
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -0,0 +1,554 @@
|
||||
<!DOCTYPE html>
|
||||
<!--[if IE]><![endif]-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>传递 Props | React</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="传递 Props | React">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/transferring-props-zh-CN.html">
|
||||
<meta property="og:image" content="http://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="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<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 type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<!--[if lte IE 8]>
|
||||
<script type="text/javascript" src="/react/js/html5shiv.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/es5-shim.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/es5-sham.min.js"></script>
|
||||
<![endif]-->
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="nav-main">
|
||||
<div class="wrap">
|
||||
<a class="nav-home" href="/react/index.html">
|
||||
<img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<li><a href="/react/docs/getting-started.html" class="active">docs</a></li>
|
||||
<li><a href="/react/support.html">support</a></li>
|
||||
<li><a href="/react/downloads.html">download</a></li>
|
||||
<li><a href="/react/blog/">blog</a></li>
|
||||
<li><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<!-- Docs Nav -->
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Quick Start</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/getting-started.html">Getting Started</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tutorial.html">Tutorial</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/thinking-in-react.html">Thinking in React</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Community Resources</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/videos.html">Videos</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/complementary-tools.html">Complementary Tools</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">Examples</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Guides</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/why-react.html">Why React?</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/displaying-data.html">Displaying Data</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-in-depth.html">JSX in Depth</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-spread.html">JSX Spread Attributes</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-gotchas.html">JSX Gotchas</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/interactivity-and-dynamic-uis.html">Interactivity and Dynamic UIs</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/multiple-components.html">Multiple Components</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reusable-components.html">Reusable Components</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/transferring-props.html">Transferring Props</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/forms.html">Forms</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/working-with-the-browser.html">Working With the Browser</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/more-about-refs.html">More About Refs</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tooling-integration.html">Tooling Integration</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">Add-Ons</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/animation.html">Animation</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/two-way-binding-helpers.html">Two-Way Binding Helpers</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/class-name-manipulation.html">Class Name Manipulation</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/test-utils.html">Test Utilities</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/clone-with-props.html">Cloning Components</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/update.html">Immutability Helpers</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/pure-render-mixin.html">PureRenderMixin</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/perf.html">Performance Tools</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/top-level-api.html">Top-Level API</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/component-api.html">Component API</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/component-specs.html">Component Specs and Lifecycle</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tags-and-attributes.html">Supported Tags and Attributes</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/events.html">Event System</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/dom-differences.html">DOM Differences</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/special-non-dom-attributes.html">Special Non-DOM Attributes</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reconciliation.html">Reconciliation</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/glossary.html">React (Virtual) DOM Terminology</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Flux</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="http://facebook.github.io/flux/docs/overview.html">Flux Overview</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="http://facebook.github.io/flux/docs/todo-list.html">Flux TodoMVC Tutorial</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Tips Nav -->
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Tips</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/introduction.html">Introduction</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/inline-styles.html">Inline Styles</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/if-else-in-JSX.html">If-Else in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/self-closing-tag.html">Self-Closing Tag</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/maximum-number-of-jsx-root-nodes.html">Maximum Number of JSX Root Nodes</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/style-props-value-px.html">Shorthand for Specifying Pixel Values in style props</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/children-props-type.html">Type of the Children props</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/controlled-input-null-value.html">Value of null for Controlled Input</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html">componentWillReceiveProps Not Triggered After Mounting</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/props-in-getInitialState-as-anti-pattern.html">Props in getInitialState Is an Anti-Pattern</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/dom-event-listeners.html">DOM Event Listeners in a Component</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/initial-ajax.html">Load Initial Data via AJAX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/expose-component-functions.html">Expose Component Functions</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/references-to-components.html">References to Components</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/children-undefined.html">this.props.children undefined</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/use-react-with-other-libraries.html">Use React with Other Libraries</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>
|
||||
传递 Props
|
||||
<a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs/docs/06-transferring-props.zh-CN.md" target="_blank">Edit on GitHub</a>
|
||||
</h1>
|
||||
<div class="subHeader"></div>
|
||||
|
||||
<p>React 里有一个非常常用的模式就是对组件做一层抽象。组件对外公开一个简单的属性（Props）来实现功能，但内部细节可能有非常复杂的实现。</p>
|
||||
|
||||
<p>可以使用 <a href="/react/docs/jsx-spread-zh-CN.html">JSX 展开属性</a> 来合并现有的 props 和其它值：</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="k">return</span> <span class="o"><</span><span class="nx">Component</span> <span class="p">{...</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">}</span> <span class="nx">more</span><span class="o">=</span><span class="s2">"values"</span> <span class="o">/></span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p>如果不使用 JSX，可以使用一些对象辅助方法如 ES6 的 <code>Object.assign</code> 或 Underscore <code>_.extend</code>。</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="k">return</span> <span class="nx">Component</span><span class="p">(</span><span class="nb">Object</span><span class="p">.</span><span class="nx">assign</span><span class="p">({},</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">,</span> <span class="p">{</span> <span class="nx">more</span><span class="o">:</span> <span class="s1">'values'</span> <span class="p">}));</span>
|
||||
</code></pre></div>
|
||||
<p>下面的教程介绍一些最佳实践。使用了 JSX 和 ES7 的还在试验阶段的特性。</p>
|
||||
<h2><a class="anchor" name=""></a>手动传递 <a class="hash-link" href="#">#</a></h2>
|
||||
<p>大部分情况下你应该显式地向下传递 props。这样可以确保只公开你认为是安全的内部 API 的子集。</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">FancyCheckbox</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">fancyClass</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">checked</span> <span class="o">?</span> <span class="s1">'FancyChecked'</span> <span class="o">:</span> <span class="s1">'FancyUnchecked'</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="nx">className</span><span class="o">=</span><span class="p">{</span><span class="nx">fancyClass</span><span class="p">}</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">props</span><span class="p">.</span><span class="nx">onClick</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">props</span><span class="p">.</span><span class="nx">children</span><span class="p">}</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">React</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">FancyCheckbox</span> <span class="nx">checked</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="nx">console</span><span class="p">)}</span><span class="o">></span>
|
||||
<span class="nx">Hello</span> <span class="nx">world</span><span class="o">!</span>
|
||||
<span class="o"><</span><span class="err">/FancyCheckbox>,</span>
|
||||
<span class="nb">document</span><span class="p">.</span><span class="nx">body</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>但 <code>name</code> 这个属性怎么办？还有 <code>title</code>、<code>onMouseOver</code> 这些 props？</p>
|
||||
<h2><a class="anchor" name="-jsx--...-"></a>在 JSX 里使用 <code>...</code> 传递 <a class="hash-link" href="#-jsx--...-">#</a></h2>
|
||||
<p>有时把所有属性都传下去是不安全或啰嗦的。这时可以使用 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">解构赋值</a> 中的剩余属性特性来把未知属性批量提取出来。</p>
|
||||
|
||||
<p>列出所有要当前使用的属性，后面跟着 <code>...other</code>。</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="p">{</span> <span class="nx">checked</span><span class="p">,</span> <span class="p">...</span><span class="nx">other</span> <span class="p">}</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p>这样能确保把所有 props 传下去，<em>除了</em> 那些已经被使用了的。</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">FancyCheckbox</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="p">{</span> <span class="nx">checked</span><span class="p">,</span> <span class="p">...</span><span class="nx">other</span> <span class="p">}</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">fancyClass</span> <span class="o">=</span> <span class="nx">checked</span> <span class="o">?</span> <span class="s1">'FancyChecked'</span> <span class="o">:</span> <span class="s1">'FancyUnchecked'</span><span class="p">;</span>
|
||||
<span class="c1">// `other` 包含 { onClick: console.log } 但 checked 属性除外</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span> <span class="p">{...</span><span class="nx">other</span><span class="p">}</span> <span class="nx">className</span><span class="o">=</span><span class="p">{</span><span class="nx">fancyClass</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">FancyCheckbox</span> <span class="nx">checked</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="nx">console</span><span class="p">)}</span><span class="o">></span>
|
||||
<span class="nx">Hello</span> <span class="nx">world</span><span class="o">!</span>
|
||||
<span class="o"><</span><span class="err">/FancyCheckbox>,</span>
|
||||
<span class="nb">document</span><span class="p">.</span><span class="nx">body</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<blockquote>
|
||||
<p>注意:</p>
|
||||
|
||||
<p>上面例子中，<code>checked</code> 属性也是一个有效的 DOM 属性。如果你没有使用解构赋值，那么可能无意中把它传下去。</p>
|
||||
</blockquote>
|
||||
|
||||
<p>在传递这些未知的 <code>other</code> 属性时，要经常使用解构赋值模式。</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">FancyCheckbox</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">fancyClass</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">checked</span> <span class="o">?</span> <span class="s1">'FancyChecked'</span> <span class="o">:</span> <span class="s1">'FancyUnchecked'</span><span class="p">;</span>
|
||||
<span class="c1">// 反模式：`checked` 会被传到里面的组件里</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span> <span class="p">{...</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">}</span> <span class="nx">className</span><span class="o">=</span><span class="p">{</span><span class="nx">fancyClass</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div><h2><a class="anchor" name="-prop"></a>使用和传递同一个 Prop <a class="hash-link" href="#-prop">#</a></h2>
|
||||
<p>如果组件需要使用一个属性又要往下传递，可以直接使用 <code>checked={checked}</code> 再传一次。这样做比传整个 <code>this.props</code> 对象要好，因为更利于重构和语法检查。</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">FancyCheckbox</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="p">{</span> <span class="nx">checked</span><span class="p">,</span> <span class="nx">title</span><span class="p">,</span> <span class="p">...</span><span class="nx">other</span> <span class="p">}</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">fancyClass</span> <span class="o">=</span> <span class="nx">checked</span> <span class="o">?</span> <span class="s1">'FancyChecked'</span> <span class="o">:</span> <span class="s1">'FancyUnchecked'</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">fancyTitle</span> <span class="o">=</span> <span class="nx">checked</span> <span class="o">?</span> <span class="s1">'X '</span> <span class="o">+</span> <span class="nx">title</span> <span class="o">:</span> <span class="s1">'O '</span> <span class="o">+</span> <span class="nx">title</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">label</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">input</span> <span class="p">{...</span><span class="nx">other</span><span class="p">}</span>
|
||||
<span class="nx">checked</span><span class="o">=</span><span class="p">{</span><span class="nx">checked</span><span class="p">}</span>
|
||||
<span class="nx">className</span><span class="o">=</span><span class="p">{</span><span class="nx">fancyClass</span><span class="p">}</span>
|
||||
<span class="nx">type</span><span class="o">=</span><span class="s2">"checkbox"</span>
|
||||
<span class="o">/></span>
|
||||
<span class="p">{</span><span class="nx">fancyTitle</span><span class="p">}</span>
|
||||
<span class="o"><</span><span class="err">/label></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<blockquote>
|
||||
<p>注意:</p>
|
||||
|
||||
<p>顺序很重要，把 <code>{...other}</code> 放到 JSX props 前面会使它不被覆盖。上面例子中我们可以保证 input 的 type 是 <code>"checkbox"</code>。</p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="-..."></a>剩余属性和展开属性 <code>...</code> <a class="hash-link" href="#-...">#</a></h2>
|
||||
<p>剩余属性可以把对象剩下的属性提取到一个新的对象。会把所有在解构赋值中列出的属性剔除。</p>
|
||||
|
||||
<p>这是 <a href="https://github.com/sebmarkbage/ecmascript-rest-spread">ES7 草案</a> 中的试验特性。</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="p">{</span> <span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">,</span> <span class="p">...</span><span class="nx">z</span> <span class="p">}</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">x</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> <span class="nx">y</span><span class="o">:</span> <span class="mi">2</span><span class="p">,</span> <span class="nx">a</span><span class="o">:</span> <span class="mi">3</span><span class="p">,</span> <span class="nx">b</span><span class="o">:</span> <span class="mi">4</span> <span class="p">};</span>
|
||||
<span class="nx">x</span><span class="p">;</span> <span class="c1">// 1</span>
|
||||
<span class="nx">y</span><span class="p">;</span> <span class="c1">// 2</span>
|
||||
<span class="nx">z</span><span class="p">;</span> <span class="c1">// { a: 3, b: 4 }</span>
|
||||
</code></pre></div>
|
||||
<blockquote>
|
||||
<p>注意:</p>
|
||||
|
||||
<p>使用 <a href="http://npmjs.org/package/react-tools">JSX 命令行工具</a> 配合 <code>--harmony</code> 标记来启用 ES7 语法。</p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="-underscore-"></a>使用 Underscore 来传递 <a class="hash-link" href="#-underscore-">#</a></h2>
|
||||
<p>如果不使用 JSX，可以使用一些库来实现相同效果。Underscore 提供 <code>_.omit</code> 来过滤属性，<code>_.extend</code> 复制属性到新的对象。
|
||||
<code>javascript
|
||||
var FancyCheckbox = React.createClass({
|
||||
render: function() {
|
||||
var checked = this.props.checked;
|
||||
var other = _.omit(this.props, 'checked');
|
||||
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
|
||||
return (
|
||||
React.DOM.div(_.extend({}, other, { className: fancyClass }))
|
||||
);
|
||||
}
|
||||
});
|
||||
</code></p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/reusable-components-zh-CN.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/forms-zh-CN.html">Next →</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">
|
||||
A Facebook & Instagram collaboration.<br>
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<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/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -523,7 +523,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
+3
-3
@@ -791,8 +791,8 @@
|
||||
</span><span class="hll"> <span class="p">},</span>
|
||||
</span> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</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">form</span> <span class="nx">className</span><span class="o">=</span><span class="s2">"commentForm"</span> <span class="nx">onSubmit</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">}</span><span class="o">></span>
|
||||
<span class="hll"> <span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"text"</span> <span class="nx">placeholder</span><span class="o">=</span><span class="s2">"Your name"</span> <span class="nx">ref</span><span class="o">=</span><span class="s2">"author"</span> <span class="o">/></span>
|
||||
<span class="hll"> <span class="o"><</span><span class="nx">form</span> <span class="nx">className</span><span class="o">=</span><span class="s2">"commentForm"</span> <span class="nx">onSubmit</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">}</span><span class="o">></span>
|
||||
</span><span class="hll"> <span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"text"</span> <span class="nx">placeholder</span><span class="o">=</span><span class="s2">"Your name"</span> <span class="nx">ref</span><span class="o">=</span><span class="s2">"author"</span> <span class="o">/></span>
|
||||
</span><span class="hll"> <span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"text"</span> <span class="nx">placeholder</span><span class="o">=</span><span class="s2">"Say something..."</span> <span class="nx">ref</span><span class="o">=</span><span class="s2">"text"</span> <span class="o">/></span>
|
||||
</span><span class="hll"> <span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"submit"</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"Post"</span> <span class="o">/></span>
|
||||
</span> <span class="o"><</span><span class="err">/form></span>
|
||||
@@ -988,7 +988,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -492,7 +492,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
+1
-1
@@ -461,7 +461,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
+1
-1
@@ -504,7 +504,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -414,7 +414,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
+1
-1
@@ -414,7 +414,7 @@
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -522,7 +522,7 @@ Currently a handler to this event is ignored on IE8.</p>
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
Reference in New Issue
Block a user