mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Rebuild website
This commit is contained in:
Travis CI
@@ -0,0 +1,470 @@
|
||||
<!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="https://facebook.github.io/react/docs/addons-ja-JP.html">
|
||||
<meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces">
|
||||
<meta property="fb:app_id" content="623268441017527">
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="https://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="/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>
|
||||
</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 nav-site-internal">
|
||||
<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>
|
||||
</ul>
|
||||
|
||||
<ul class="nav-site nav-site-external">
|
||||
<li><a href="https://github.com/facebook/react">GitHub</a>
|
||||
<li><a href="https://facebook.github.io/react-native/">React Native</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/conferences.html">Conferences</a>
|
||||
|
||||
</li>
|
||||
|
||||
<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" class="active">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 Elements</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/create-fragment.html">Keyed Fragments</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>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/advanced-performance.html">Advanced Performance</a>
|
||||
|
||||
</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="https://facebook.github.io/flux/docs/overview.html">Flux Overview</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://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>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/dangerously-set-inner-html.html">Dangerously Set innerHTML</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/10-addons.ja-JP.md" target="_blank">Edit on GitHub</a>
|
||||
</h1>
|
||||
<div class="subHeader"></div>
|
||||
|
||||
<p><code>React.addons</code> はReactのアプリケーションを作成する上で便利なユーティリティを置いておくための場所です。 <strong>それらは実験的なものであると考えられるべきです。</strong> しかし、ゆくゆくはコアに入ってくるか、以下のような承認されたユーティリティとなるでしょう。</p>
|
||||
|
||||
<ul>
|
||||
<li>アニメーションや推移を扱う<a href="animation-ja-JP.html"><code>TransitionGroup</code> や <code>CSSTransitionGroup</code></a>は多くの場合実行するのが簡単ではありません。例えば、コンポーネントの削除の前などは。</li>
|
||||
<li><a href="two-way-binding-helpers-ja-JP.html"><code>LinkedStateMixin</code></a>はユーザのフォームの入力データとコンポーネントのstateの間の調整を単純化します。</li>
|
||||
<li><a href="clone-with-props-ja-JP.html"><code>cloneWithProps</code></a>はReactのコンポーネントのシャローコピーを作成したり、それらのpropsを変更したりします。</li>
|
||||
<li><a href="create-fragment-ja-JP.html"><code>createFragment</code></a>は外部のキー化された子要素のセットを作成します。</li>
|
||||
<li><a href="update-ja-JP.html"><code>update</code></a>はJavaScriptでイミュータブルなデータを扱うことを簡単にするヘルパーの関数です。</li>
|
||||
<li><p><a href="pure-render-mixin-ja-JP.html"><code>PureRenderMixin</code></a>は特定のシチュエーションでパフォーマンスを改善します。
|
||||
以下のアドオンはReactだけの開発版（縮小されていない版）です。</p></li>
|
||||
<li><p><a href="test-utils-ja-JP.html"><code>TestUtils</code></a>はテストケースを記述する単純なヘルパーです（縮小されていないビルドのみ）。</p></li>
|
||||
<li><p><a href="perf-ja-JP.html"><code>Perf</code></a>はパフォーマンスを測り、どこを最適化するかのヒントを与えます。</p></li>
|
||||
</ul>
|
||||
|
||||
<p>アドオンを使うには、共通の <code>react.js</code> を使うよりも <code>react-with-addons.js</code> （とその縮小されたもの）を使ってください。</p>
|
||||
|
||||
<p>npmからReactのパッケージを使う際には、Reactと全てのアドオンを使うために <code>require('react')</code> を使う代わりに、単純に <code>require('react/addons')</code> を使ってください。</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/tooling-integration-ja-JP.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/animation-ja-JP.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="https://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>
|
||||
@@ -0,0 +1,620 @@
|
||||
<!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="https://facebook.github.io/react/docs/animation-ja-JP.html">
|
||||
<meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces">
|
||||
<meta property="fb:app_id" content="623268441017527">
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="https://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="/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>
|
||||
</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 nav-site-internal">
|
||||
<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>
|
||||
</ul>
|
||||
|
||||
<ul class="nav-site nav-site-external">
|
||||
<li><a href="https://github.com/facebook/react">GitHub</a>
|
||||
<li><a href="https://facebook.github.io/react-native/">React Native</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/conferences.html">Conferences</a>
|
||||
|
||||
</li>
|
||||
|
||||
<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" class="active">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 Elements</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/create-fragment.html">Keyed Fragments</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>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/advanced-performance.html">Advanced Performance</a>
|
||||
|
||||
</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="https://facebook.github.io/flux/docs/overview.html">Flux Overview</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://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>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/dangerously-set-inner-html.html">Dangerously Set innerHTML</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/10.1-animation.ja-JP.md" target="_blank">Edit on GitHub</a>
|
||||
</h1>
|
||||
<div class="subHeader"></div>
|
||||
|
||||
<p>ReactはアニメーションのためにローレベルAPIとして <code>ReactTransitionGroup</code> アドオンコンポーネントと、基本的なCSSアニメーションとトランジションを簡単に実行するために <code>ReactCSSTransitionGroup</code> を提供しています。</p>
|
||||
<h2><a class="anchor" name="api-reactcsstransitiongroup"></a>ハイレベルAPI: <code>ReactCSSTransitionGroup</code> <a class="hash-link" href="#api-reactcsstransitiongroup">#</a></h2>
|
||||
<p><code>ReactCSSTransitionGroup</code> は <code>ReactTransitionGroup</code> に基づいており、ReactコンポーネントがDOMを作成したり、削除したりする際に、CSSのトランジションとアニメーションを行う簡単な方法です。これは、素晴らしい<a href="http://www.nganimate.org/">ng-animate</a>ライブラリにインスパイアされています。</p>
|
||||
<h3><a class="anchor" name=""></a>はじめに <a class="hash-link" href="#">#</a></h3>
|
||||
<p><code>ReactCSSTransitionGroup</code> は <code>ReactTransitions</code> のインターフェースです。アニメーションに関心がある全てのコンポーネントをラップする単純な要素です。以下が、リストのアイテムをフェードインやフェードアウトさせる例です。</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">ReactCSSTransitionGroup</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">addons</span><span class="p">.</span><span class="nx">CSSTransitionGroup</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">TodoList</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">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">items</span><span class="o">:</span> <span class="p">[</span><span class="s1">'hello'</span><span class="p">,</span> <span class="s1">'world'</span><span class="p">,</span> <span class="s1">'click'</span><span class="p">,</span> <span class="s1">'me'</span><span class="p">]};</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">handleAdd</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">newItems</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">items</span><span class="p">.</span><span class="nx">concat</span><span class="p">([</span><span class="nx">prompt</span><span class="p">(</span><span class="s1">'Enter some text'</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">items</span><span class="o">:</span> <span class="nx">newItems</span><span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">handleRemove</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">i</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">newItems</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">items</span><span class="p">;</span>
|
||||
<span class="nx">newItems</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">i</span><span class="p">,</span> <span class="mi">1</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">items</span><span class="o">:</span> <span class="nx">newItems</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="kd">var</span> <span class="nx">items</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">items</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">item</span><span class="p">,</span> <span class="nx">i</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="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">item</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">handleRemove</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">i</span><span class="p">)}</span><span class="o">></span>
|
||||
<span class="p">{</span><span class="nx">item</span><span class="p">}</span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">));</span>
|
||||
<span class="k">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">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleAdd</span><span class="p">}</span><span class="o">></span><span class="nx">Add</span> <span class="nx">Item</span><span class="o"><</span><span class="err">/button></span>
|
||||
<span class="hll"> <span class="o"><</span><span class="nx">ReactCSSTransitionGroup</span> <span class="nx">transitionName</span><span class="o">=</span><span class="s2">"example"</span><span class="o">></span>
|
||||
</span><span class="hll"> <span class="p">{</span><span class="nx">items</span><span class="p">}</span>
|
||||
</span><span class="hll"> <span class="o"><</span><span class="err">/ReactCSSTransitionGroup></span>
|
||||
</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>
|
||||
<blockquote>
|
||||
<p>注意:
|
||||
もし子要素を1つだけレンダリングするとしても、 <code>ReactCSSTransitionGroup</code> の全ての子要素に提供しなければなりません。これが、Reactが、子要素が作成されているか、削除されたか、あるいはそのままであるか判断する方法です。</p>
|
||||
</blockquote>
|
||||
|
||||
<p>このコンポーネントでは、 <code>ReactCSSTransitionGroup</code> に新しいアイテムが追加された次の瞬間に、 <code>example-enter</code> CSSクラスと <code>example-enter-active</code> CSSクラスを得ます。これは、 <code>transitionName</code> propに基づく習慣です。</p>
|
||||
|
||||
<p>これらのクラスはCSSアニメーションやトランジションのトリガーとして使うことができます。例えば、以下のようにして、このCSSを加え、新しいリストアイテムを加えてみましょう。</p>
|
||||
<div class="highlight"><pre><code class="language-css" data-lang="css"><span class="nc">.example-enter</span> <span class="p">{</span>
|
||||
<span class="k">opacity</span><span class="o">:</span> <span class="m">0</span><span class="o">.</span><span class="m">01</span><span class="p">;</span>
|
||||
<span class="n">transition</span><span class="o">:</span> <span class="k">opacity</span> <span class="m">.5s</span> <span class="n">ease</span><span class="o">-</span><span class="n">in</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nc">.example-enter.example-enter-active</span> <span class="p">{</span>
|
||||
<span class="k">opacity</span><span class="o">:</span> <span class="m">1</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>アイテムを削除しようとしたときに、 <code>ReactCSSTransitionGroup</code> がDOMの中にそれを保持していることに気づくでしょう。縮小化されていないReactのビルドとアドオンを使っているならば、Reactがアニメーションやトランジションが起こることを予期しているという警告が出るでしょう。これは、 <code>ReactCSSTransitionGroup</code> がアニメーションが終わるまでDOM要素をページに保持し続けるからです。以下のCSSを加えてみましょう。</p>
|
||||
<div class="highlight"><pre><code class="language-css" data-lang="css"><span class="nc">.example-leave</span> <span class="p">{</span>
|
||||
<span class="k">opacity</span><span class="o">:</span> <span class="m">1</span><span class="p">;</span>
|
||||
<span class="n">transition</span><span class="o">:</span> <span class="k">opacity</span> <span class="m">.5s</span> <span class="n">ease</span><span class="o">-</span><span class="n">in</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nc">.example-leave.example-leave-active</span> <span class="p">{</span>
|
||||
<span class="k">opacity</span><span class="o">:</span> <span class="m">0</span><span class="o">.</span><span class="m">01</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div><h3><a class="anchor" name=""></a>最初のマウントにおけるアニメーション <a class="hash-link" href="#">#</a></h3>
|
||||
<p><code>ReactCSSTransitionGroup</code> は <code>transitionAppear</code> というオプションのプロパティを提供します。コンポーネントの最初のマウントの際に、更なるトランジションのフェーズを加えるためです。一般的には、 <code>transitionAppear</code> が <code>false</code> である最初のマウントの際にはトランジションのフェーズはありません。 <code>transitionAppear</code> プロパティを値が <code>true</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="k">return</span> <span class="p">(</span>
|
||||
<span class="hll"> <span class="o"><</span><span class="nx">ReactCSSTransitionGroup</span> <span class="nx">transitionName</span><span class="o">=</span><span class="s2">"example"</span> <span class="nx">transitionAppear</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span><span class="o">></span>
|
||||
</span><span class="hll"> <span class="o"><</span><span class="nx">h1</span><span class="o">></span><span class="nx">Fading</span> <span class="nx">at</span> <span class="nx">Initial</span> <span class="nx">Mount</span><span class="o"><</span><span class="err">/h1></span>
|
||||
</span><span class="hll"> <span class="o"><</span><span class="err">/ReactCSSTransitionGroup></span>
|
||||
</span> <span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>最初のマウントの間、 <code>ReactCSSTransitionGroup</code> は <code>example-appear</code> CSSクラスを得て、次の瞬間に <code>example-appear-active</code> CSSクラスを加えます。</p>
|
||||
<div class="highlight"><pre><code class="language-css" data-lang="css"><span class="nc">.example-appear</span> <span class="p">{</span>
|
||||
<span class="k">opacity</span><span class="o">:</span> <span class="m">0</span><span class="o">.</span><span class="m">01</span><span class="p">;</span>
|
||||
<span class="n">transition</span><span class="o">:</span> <span class="k">opacity</span> <span class="m">.5s</span> <span class="n">ease</span><span class="o">-</span><span class="n">in</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nc">.example-appear.example-appear-active</span> <span class="p">{</span>
|
||||
<span class="k">opacity</span><span class="o">:</span> <span class="m">1</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>最初のマウントの際には、 <code>ReactCSSTransitionGroup</code> の全ての子要素は <code>appear</code> しますが、 <code>enter</code> はしません。一方、存在する <code>ReactCSSTransitionGroup</code> に後から加えられた子要素は全て <code>enter</code> しますが、 <code>appear</code> はしません。</p>
|
||||
|
||||
<blockquote>
|
||||
<p>注意:
|
||||
<code>transitionAppear</code> プロパティはバージョン <code>0.13</code> で <code>ReactCSSTransitionGroup</code> に加えられました。後方互換性を維持するために、デフォルトの値は <code>false</code> に指定されています。</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" name=""></a>アニメーショングループを動かすためには、マウントされている必要があります <a class="hash-link" href="#">#</a></h3>
|
||||
<p>子要素にトランジションを適用するためには、 <code>ReactCSSTransitionGroup</code> はすでにDOMにマウントされているか、 <code>transitionAppear</code> プロパティに <code>true</code> がセットされている必要があります。以下の例は動きません。 <code>ReactCSSTransitionGroup</code> が新しいアイテムとともにマウントされており、新しいマウントがマウントされていないからです。これと上の<a href="#getting-started">はじめに</a> とで違いを比較してみてください。</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="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">items</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">item</span><span class="p">,</span> <span class="nx">i</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="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">item</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">handleRemove</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">i</span><span class="p">)}</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">ReactCSSTransitionGroup</span> <span class="nx">transitionName</span><span class="o">=</span><span class="s2">"example"</span><span class="o">></span>
|
||||
<span class="p">{</span><span class="nx">item</span><span class="p">}</span>
|
||||
<span class="o"><</span><span class="err">/ReactCSSTransitionGroup></span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">},</span> <span class="k">this</span><span class="p">);</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="hll"> <span class="o"><</span><span class="nx">div</span><span class="o">></span>
|
||||
</span><span class="hll"> <span class="o"><</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleAdd</span><span class="p">}</span><span class="o">></span><span class="nx">Add</span> <span class="nx">Item</span><span class="o"><</span><span class="err">/button></span>
|
||||
</span><span class="hll"> <span class="p">{</span><span class="nx">items</span><span class="p">}</span>
|
||||
</span><span class="hll"> <span class="o"><</span><span class="err">/div></span>
|
||||
</span> <span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div><h3><a class="anchor" name="10"></a>1個か0個のアイテムをアニメーションする <a class="hash-link" href="#10">#</a></h3>
|
||||
<p>上の例では、 <code>ReactCSSTransitionGroup</code> にアイテムのリストをレンダリングしました。しかし、 <code>ReactCSSTransitionGroup</code> の子要素は1個や0個のアイテムになり得ます。単一の要素が作成や削除のアニメーションを可能にします。同様に、現在の要素を置き換える新しい要素をアニメーションできます。例えば、以下のように、1つの画像でカルーセルを実行できます。</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">ReactCSSTransitionGroup</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">addons</span><span class="p">.</span><span class="nx">CSSTransitionGroup</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">ImageCarousel</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">imageSrc</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">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="hll"> <span class="o"><</span><span class="nx">ReactCSSTransitionGroup</span> <span class="nx">transitionName</span><span class="o">=</span><span class="s2">"carousel"</span><span class="o">></span>
|
||||
</span><span class="hll"> <span class="o"><</span><span class="nx">img</span> <span class="nx">src</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">imageSrc</span><span class="p">}</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">imageSrc</span><span class="p">}</span> <span class="o">/></span>
|
||||
</span><span class="hll"> <span class="o"><</span><span class="err">/ReactCSSTransitionGroup></span>
|
||||
</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><h3><a class="anchor" name=""></a>アニメーションを作動させないようにする <a class="hash-link" href="#">#</a></h3>
|
||||
<p>もししたいならば、 <code>enter</code> や <code>leave</code> のアニメーションを無効にすることもできます。例えば、 <code>enter</code> アニメーションは行いたいが、 <code>leave</code> のアニメーションは行いたくない場合があるでしょう。しかし、 <code>ReactCSSTransitionGroup</code> はDOMのノードが削除される前にアニメーションが終わるのを待ちます。<code>ReactCSSTransitionGroup</code> がそれらのアニメーションを無効化するために、 <code>transitionEnter={false}</code> や <code>transitionLeave={false}</code> といったプロパティを追加することができます。</p>
|
||||
|
||||
<blockquote>
|
||||
<p>注意:
|
||||
<code>ReactCSSTransitionGroup</code> を使う際には、コンポーネントがトランジションが終わったことを検知したり、アニメーション関連でさらに複雑なロジックを実行するといったことはできません。更に細かな制御を求める場合は、トランジションをカスタムするために必要なフックを提供するローレベルの <code>ReactTransitionGroup</code> APIを使用できます。</p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="api-reacttransitiongroup"></a>ローレベルAPI: <code>ReactTransitionGroup</code> <a class="hash-link" href="#api-reacttransitiongroup">#</a></h2>
|
||||
<p><code>ReactTransitionGroup</code> はアニメーションの基盤です。 <code>React.addons.TransitionGroup</code> と同じくらい簡単に使用できます。これによって（上記の例のように）、宣言的に子要素が追加されたり削除されたりするときに、それらの上で特別なライフサイクルのフックが呼ばれます。</p>
|
||||
<h3><a class="anchor" name="componentwillappearcallback"></a><code>componentWillAppear(callback)</code> <a class="hash-link" href="#componentwillappearcallback">#</a></h3>
|
||||
<p>このメソッドは <code>TransitionGroup</code> の中で最初にマウントされるコンポーネントのために <code>componentDidMount()</code> と同時に呼ばれます。これは、 <code>callback</code> が呼ばれるまで、他のアニメーションが発生するのをブロックします。これは、 <code>TransitionGroup</code> の最初のレンダリングのときにのみ呼ばれます。</p>
|
||||
<h3><a class="anchor" name="componentdidappear"></a><code>componentDidAppear()</code> <a class="hash-link" href="#componentdidappear">#</a></h3>
|
||||
<p><code>componentWillAppear</code> が呼ばれて渡される <code>callback</code> 関数の後に呼ばれます。</p>
|
||||
<h3><a class="anchor" name="componentwillentercallback"></a><code>componentWillEnter(callback)</code> <a class="hash-link" href="#componentwillentercallback">#</a></h3>
|
||||
<p>これは、存在する <code>TransitionGroup</code> に追加されるコンポーネントのために、 <code>componentDidMount()</code> と同時に呼ばれます。これは、 <code>callback</code> が呼ばれるまで、他のアニメーションが発生するのをブロックします。これは、 <code>TransitionGroup</code> の最初のレンダリングのときには呼ばれません。</p>
|
||||
<h3><a class="anchor" name="componentdidenter"></a><code>componentDidEnter()</code> <a class="hash-link" href="#componentdidenter">#</a></h3>
|
||||
<p><code>componentWillEnter</code> が呼ばれて渡される <code>callback</code> 関数の後に呼ばれます。</p>
|
||||
<h3><a class="anchor" name="componentwillleavecallback"></a><code>componentWillLeave(callback)</code> <a class="hash-link" href="#componentwillleavecallback">#</a></h3>
|
||||
<p>これは、 <code>ReactTransitionGroup</code> から子要素が削除されたときに呼ばれます。子要素が削除されても、 <code>ReactTransitionGroup</code> は <code>callback</code> が呼ばれるまでDOMの中に子要素を保持し続けます。</p>
|
||||
<h3><a class="anchor" name="componentdidleave"></a><code>componentDidLeave()</code> <a class="hash-link" href="#componentdidleave">#</a></h3>
|
||||
<p>これは、 <code>willLeave</code> の <code>callback</code> が呼ばれた際に呼ばれます（ <code>componentWillUnmount</code> と同時です）。</p>
|
||||
<h3><a class="anchor" name=""></a>異なるコンポーネントをレンダリングする <a class="hash-link" href="#">#</a></h3>
|
||||
<p>デフォルトで、 <code>ReactTransitionGroup</code> は <code>span</code> としてレンダリングされます。この動きは、 <code>component</code> プロパティによって変更できます。例えば、 <code><ul></code> をレンダリングしたい場合は以下のようになります。 </p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="hll"><span class="o"><</span><span class="nx">ReactTransitionGroup</span> <span class="nx">component</span><span class="o">=</span><span class="s2">"ul"</span><span class="o">></span>
|
||||
</span> <span class="p">...</span>
|
||||
<span class="o"><</span><span class="err">/ReactTransitionGroup></span>
|
||||
</code></pre></div>
|
||||
<p>Reactがレンダリングできる全てのDOMコンポーネントが使用できます。しかし、 <code>component</code> はDOMコンポーネントである必要はありません。あなたが求めているどんなReactのコンポーネントにもなり得ます。あなた自身が記述したものにもです！</p>
|
||||
|
||||
<blockquote>
|
||||
<p>注意:
|
||||
v0.12以前では、DOMのコンポーネントを使用する際には、 <code>component</code> プロパティが <code>React.DOM.*</code> を参照している必要がありました。コンポーネントが単純に <code>React.createElement</code>から渡されていたからです。これは今は文字列である必要があります。複合的なコンポーネントは複合的なものを渡す必要があります。</p>
|
||||
</blockquote>
|
||||
|
||||
<p>全ての付加的な、ユーザー定義のプロパティはレンダリングされたコンポーネントのプロパティになります。例えば、以下はCSSクラスとともに <code><ul></code> をレンダリングする方法です。</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="hll"><span class="o"><</span><span class="nx">ReactTransitionGroup</span> <span class="nx">component</span><span class="o">=</span><span class="s2">"ul"</span> <span class="nx">className</span><span class="o">=</span><span class="s2">"animated-list"</span><span class="o">></span>
|
||||
</span> <span class="p">...</span>
|
||||
<span class="o"><</span><span class="err">/ReactTransitionGroup></span>
|
||||
</code></pre></div>
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/addons-ja-JP.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/two-way-binding-helpers-ja-JP.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="https://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>
|
||||
+3
-3
@@ -455,21 +455,21 @@
|
||||
<p>You can use these classes to trigger a CSS animation or transition. For example, try adding this CSS and adding a new list item:</p>
|
||||
<div class="highlight"><pre><code class="language-css" data-lang="css"><span class="nc">.example-enter</span> <span class="p">{</span>
|
||||
<span class="k">opacity</span><span class="o">:</span> <span class="m">0</span><span class="o">.</span><span class="m">01</span><span class="p">;</span>
|
||||
<span class="n">transition</span><span class="o">:</span> <span class="k">opacity</span> <span class="m">.5s</span> <span class="n">ease</span><span class="o">-</span><span class="n">in</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nc">.example-enter.example-enter-active</span> <span class="p">{</span>
|
||||
<span class="k">opacity</span><span class="o">:</span> <span class="m">1</span><span class="p">;</span>
|
||||
<span class="n">transition</span><span class="o">:</span> <span class="k">opacity</span> <span class="m">.5s</span> <span class="n">ease</span><span class="o">-</span><span class="n">in</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>You'll notice that when you try to remove an item <code>ReactCSSTransitionGroup</code> keeps it in the DOM. If you're using an unminified build of React with add-ons you'll see a warning that React was expecting an animation or transition to occur. That's because <code>ReactCSSTransitionGroup</code> keeps your DOM elements on the page until the animation completes. Try adding this CSS:</p>
|
||||
<div class="highlight"><pre><code class="language-css" data-lang="css"><span class="nc">.example-leave</span> <span class="p">{</span>
|
||||
<span class="k">opacity</span><span class="o">:</span> <span class="m">1</span><span class="p">;</span>
|
||||
<span class="n">transition</span><span class="o">:</span> <span class="k">opacity</span> <span class="m">.5s</span> <span class="n">ease</span><span class="o">-</span><span class="n">in</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nc">.example-leave.example-leave-active</span> <span class="p">{</span>
|
||||
<span class="k">opacity</span><span class="o">:</span> <span class="m">0</span><span class="o">.</span><span class="m">01</span><span class="p">;</span>
|
||||
<span class="n">transition</span><span class="o">:</span> <span class="k">opacity</span> <span class="m">.5s</span> <span class="n">ease</span><span class="o">-</span><span class="n">in</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div><h3><a class="anchor" name="animate-initial-mounting"></a>Animate Initial Mounting <a class="hash-link" href="#animate-initial-mounting">#</a></h3>
|
||||
<p><code>ReactCSSTransitionGroup</code> provides the optional prop <code>transitionAppear</code>, to add an extra transition phase at the initial mount of the component. There is generally no transition phase at the initial mount as the default value of <code>transitionAppear</code> is <code>false</code>. Following an example which passes the prop <code>transitionAppear</code> with the value <code>true</code>.</p>
|
||||
@@ -571,7 +571,7 @@
|
||||
<p>Prior to v0.12, when using DOM components, the <code>component</code> prop needed to be a reference to <code>React.DOM.*</code>. Since the component is simply passed to <code>React.createElement</code>, it must now be a string. Composite components must pass the factory.</p>
|
||||
</blockquote>
|
||||
|
||||
<p>Any additional, user-defined, properties will become properties of the rendered component. For example, here's how you would render a <code><ul></code> with css class:</p>
|
||||
<p>Any additional, user-defined, properties will become properties of the rendered component. For example, here's how you would render a <code><ul></code> with CSS class:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="hll"><span class="o"><</span><span class="nx">ReactTransitionGroup</span> <span class="nx">component</span><span class="o">=</span><span class="s2">"ul"</span> <span class="nx">className</span><span class="o">=</span><span class="s2">"animated-list"</span><span class="o">></span>
|
||||
</span> <span class="p">...</span>
|
||||
<span class="o"><</span><span class="err">/ReactTransitionGroup></span>
|
||||
|
||||
@@ -0,0 +1,499 @@
|
||||
<!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="https://facebook.github.io/react/docs/class-name-manipulation-ja-JP.html">
|
||||
<meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces">
|
||||
<meta property="fb:app_id" content="623268441017527">
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="https://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="/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>
|
||||
</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 nav-site-internal">
|
||||
<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>
|
||||
</ul>
|
||||
|
||||
<ul class="nav-site nav-site-external">
|
||||
<li><a href="https://github.com/facebook/react">GitHub</a>
|
||||
<li><a href="https://facebook.github.io/react-native/">React Native</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/conferences.html">Conferences</a>
|
||||
|
||||
</li>
|
||||
|
||||
<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="active">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 Elements</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/create-fragment.html">Keyed Fragments</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>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/advanced-performance.html">Advanced Performance</a>
|
||||
|
||||
</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="https://facebook.github.io/flux/docs/overview.html">Flux Overview</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://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>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/dangerously-set-inner-html.html">Dangerously Set innerHTML</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/10.3-class-name-manipulation.ja-JP.md" target="_blank">Edit on GitHub</a>
|
||||
</h1>
|
||||
<div class="subHeader"></div>
|
||||
|
||||
<blockquote>
|
||||
<p>注意:
|
||||
このモジュールは現在<a href="https://github.com/JedWatson/classnames">JedWatson/classnames</a>に独立して存在しており、Reactは変更を検知していません。したがって、こちらは将来削除される予定です。</p>
|
||||
</blockquote>
|
||||
|
||||
<p><code>classSet()</code> はDOMの <code>class</code> 文字列を簡単に操作するすっきりとしたユーティリティです。</p>
|
||||
|
||||
<p>以下は、 <code>classSet()</code> を使用しない共通なシナリオと解決策です。</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// `<Message />` などの中のReactコンポーネント</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">classString</span> <span class="o">=</span> <span class="s1">'message'</span><span class="p">;</span>
|
||||
<span class="k">if</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">isImportant</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">classString</span> <span class="o">+=</span> <span class="s1">' message-important'</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">if</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">isRead</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">classString</span> <span class="o">+=</span> <span class="s1">' message-read'</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="c1">// 'message message-important message-read'</span>
|
||||
<span class="k">return</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">classString</span><span class="p">}</span><span class="o">></span><span class="nx">Great</span><span class="p">,</span> <span class="nx">I</span><span class="err">'</span><span class="nx">ll</span> <span class="nx">be</span> <span class="nx">there</span><span class="p">.</span><span class="o"><</span><span class="err">/div>;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>上記は、クラス名を文字列として渡しているので、面倒で、読みにくく、エラーが発生しやすくなります。以下のように、 <code>classSet()</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">cx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">addons</span><span class="p">.</span><span class="nx">classSet</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">classes</span> <span class="o">=</span> <span class="nx">cx</span><span class="p">({</span>
|
||||
<span class="s1">'message'</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
|
||||
<span class="s1">'message-important'</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">isImportant</span><span class="p">,</span>
|
||||
<span class="s1">'message-read'</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">isRead</span>
|
||||
<span class="p">});</span>
|
||||
<span class="c1">// 同様に最終的には文字列になりますが、クリアにはなります</span>
|
||||
<span class="k">return</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">classes</span><span class="p">}</span><span class="o">></span><span class="nx">Great</span><span class="p">,</span> <span class="nx">I</span><span class="err">'</span><span class="nx">ll</span> <span class="nx">be</span> <span class="nx">there</span><span class="p">.</span><span class="o"><</span><span class="err">/div>;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p><code>classSet()</code> を使用する際には、キーと、必要であったり、必要でないCSSのクラス名をオブジェクトとして渡してください。値が真であるものはキーとなり、最終的には文字列の一部になります。</p>
|
||||
|
||||
<p><code>classSet()</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">cx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">addons</span><span class="p">.</span><span class="nx">classSet</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">importantModifier</span> <span class="o">=</span> <span class="s1">'message-important'</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">readModifier</span> <span class="o">=</span> <span class="s1">'message-read'</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">classes</span> <span class="o">=</span> <span class="nx">cx</span><span class="p">(</span><span class="s1">'message'</span><span class="p">,</span> <span class="nx">importantModifier</span><span class="p">,</span> <span class="nx">readModifier</span><span class="p">);</span>
|
||||
<span class="c1">// 最終的な文字列は 'message message-important message-read'</span>
|
||||
<span class="k">return</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">classes</span><span class="p">}</span><span class="o">></span><span class="nx">Great</span><span class="p">,</span> <span class="nx">I</span><span class="err">'</span><span class="nx">ll</span> <span class="nx">be</span> <span class="nx">there</span><span class="p">.</span><span class="o"><</span><span class="err">/div>;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>文字列の連結を手で書くのはやめましょう！</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/two-way-binding-helpers-ja-JP.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/test-utils-ja-JP.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="https://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>
|
||||
@@ -410,6 +410,7 @@
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp"><!DOCTYPE html></span>
|
||||
<span class="nt"><html></span>
|
||||
<span class="nt"><head></span>
|
||||
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
|
||||
<span class="nt"><title></span>Hello React<span class="nt"></title></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://fb.me/react-0.13.3.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://fb.me/JSXTransformer-0.13.3.js"</span><span class="nt">></script></span>
|
||||
@@ -443,7 +444,7 @@
|
||||
<span class="p">);</span>
|
||||
<span class="p">},</span> <span class="mi">500</span><span class="p">);</span>
|
||||
</code></pre></div><h2><a class="anchor" name=""></a>リアクティブなアップデート <a class="hash-link" href="#">#</a></h2>
|
||||
<p><code>hello-react.html</code> をウェブブラウザで開き、テキストフィールドにあなたの名前を入力してください。ReactはUIのうち、時間の文字列しか変更しないことに注意してください。あなたがテキストフィールドに入力したものは残っています。あなたはそういったコードを書いていないのにも関わらずです。Reactはあなたのことを理解しており、正しいことを行います。</p>
|
||||
<p><code>hello-react.html</code> をウェブブラウザで開き、テキストフィールドにあなたの名前を入力してください。ReactはUIのうち、時間の文字列しか変更しないことに注意してください。あなたがテキストフィールドに入力したものは残っています。あなたはそういったコードを書いていないのにも関わらずです。Reactはあなたのことを理解しており、正しいことを行います。</p>
|
||||
|
||||
<p>このことについて私たちが理解できる方法は、Reactは必要になるまで、DOMの操作を行わないということです。 <strong>Reactは、DOMの変化を表現し、あなたにもっとも効率的なDOMの変化を見積もるために早い、内部のモックのDOMを使っています。</strong></p>
|
||||
|
||||
@@ -463,7 +464,7 @@
|
||||
|
||||
<p>上記のことを簡単に行うために、私たちはReactのツリーノードを構築するためのとても単純で、 <strong>オプショナルな</strong> HTMLに似たシンタックスを加えました。</p>
|
||||
|
||||
<p><strong>JSXはHTMLのシンタックスを使ってJavaScriptのオブジェクトを構築するのを可能にします。</strong> 純粋にJavaScriptを使ってReactでリンクを構築するには、以下のように書きます。</p>
|
||||
<p><strong>JSXはHTMLのシンタックスを使ってJavaScriptのオブジェクトを構築するのを可能にします。</strong> 純粋にJavaScriptを使ってReactでリンクを構築するには、以下のように書きます。</p>
|
||||
|
||||
<p><code>React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello!')</code></p>
|
||||
|
||||
|
||||
@@ -410,6 +410,7 @@
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp"><!DOCTYPE html></span>
|
||||
<span class="nt"><html></span>
|
||||
<span class="nt"><head></span>
|
||||
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
|
||||
<span class="nt"><title></span>Hello React<span class="nt"></title></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://fb.me/react-0.13.3.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://fb.me/JSXTransformer-0.13.3.js"</span><span class="nt">></script></span>
|
||||
|
||||
@@ -410,6 +410,7 @@
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp"><!DOCTYPE html></span>
|
||||
<span class="nt"><html></span>
|
||||
<span class="nt"><head></span>
|
||||
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
|
||||
<span class="nt"><title></span>Hello React<span class="nt"></title></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://fb.me/react-0.13.3.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://fb.me/JSXTransformer-0.13.3.js"</span><span class="nt">></script></span>
|
||||
@@ -461,7 +462,7 @@
|
||||
|
||||
<p>我们得出解决这个问题最好的方案是通过 JavaScript 直接生成模板，这样你就可以用一个真正语言的所有表达能力去构建用户界面。为了使这变得更简单，我们做了一个非常简单、<strong>可选</strong>类似 HTML 语法 ，通过函数调用即可生成模板的编译器，称为 JSX。</p>
|
||||
|
||||
<p><strong>JSX 让你可以用 HTML 语法去写 JavaScript 函数调用</strong> 为了在 React 生成一个链接，通过纯 JavaScript 你可以这么写： </p>
|
||||
<p><strong>JSX 让你可以用 HTML 语法去写 JavaScript 函数调用</strong> 为了在 React 生成一个链接，通过纯 JavaScript 你可以这么写：</p>
|
||||
|
||||
<p><code>React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello React!')</code>。</p>
|
||||
|
||||
|
||||
@@ -410,6 +410,7 @@
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp"><!DOCTYPE html></span>
|
||||
<span class="nt"><html></span>
|
||||
<span class="nt"><head></span>
|
||||
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
|
||||
<span class="nt"><title></span>Hello React<span class="nt"></title></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://fb.me/react-0.13.3.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://fb.me/JSXTransformer-0.13.3.js"</span><span class="nt">></script></span>
|
||||
|
||||
@@ -462,7 +462,7 @@
|
||||
<span class="k">return</span> <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="o">/></span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>上記は、空の値で最初は始まるinputをレンダリングします。どのようなユーザのinputも即座にレンダリングされた要素によって反映されます。値の更新を検知したいなら、 <code>onChange</code> イベントを、制御されたコンポーネントと同様に使用することができます。</p>
|
||||
<p>上記は、空の値で最初は始まるinputをレンダリングします。どのようなユーザのinputも即座にレンダリングされた要素によって反映されます。値の更新を検知したいなら、 <code>onChange</code> イベントを、制御されたコンポーネントと同様に使用することができます。</p>
|
||||
|
||||
<p>コンポーネントを空ではない値で初期化したいなら、 <code>defaultValue</code> propを提供することができます。例えば、</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>
|
||||
|
||||
+7
-1
@@ -464,7 +464,7 @@
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>This will render an input that starts off with an empty value. Any user input will be immediately reflected by the rendered element. If you wanted to listen to updates to the value, you could use the <code>onChange</code> event just like you can with controlled components.</p>
|
||||
|
||||
<h3><a class="anchor" name="default-value"></a>Default Value <a class="hash-link" href="#default-value">#</a></h3>
|
||||
<p>If you want to initialize the component with a non-empty value, you can supply a <code>defaultValue</code> prop. For example:</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="k">return</span> <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">defaultValue</span><span class="o">=</span><span class="s2">"Hello!"</span> <span class="o">/></span><span class="p">;</span>
|
||||
@@ -473,6 +473,12 @@
|
||||
<p>This example will function much like the <strong>Controlled Components</strong> example above.</p>
|
||||
|
||||
<p>Likewise, <code><input></code> supports <code>defaultChecked</code> and <code><select></code> supports <code>defaultValue</code>.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Note:</p>
|
||||
|
||||
<p>The <code>defaultValue</code> and <code>defaultChecked</code> props are only used during initial render. If you need to update the value in a subsequent render, you will need to use a <a href="#controlled-components">controlled component</a>.</p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="advanced-topics"></a>Advanced Topics <a class="hash-link" href="#advanced-topics">#</a></h2><h3><a class="anchor" name="why-controlled-components"></a>Why Controlled Components? <a class="hash-link" href="#why-controlled-components">#</a></h3>
|
||||
<p>Using form components such as <code><input></code> in React presents a challenge that is absent when writing traditional form HTML. For example, in HTML:</p>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"title"</span> <span class="na">value=</span><span class="s">"Untitled"</span> <span class="nt">/></span>
|
||||
|
||||
@@ -424,6 +424,7 @@
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp"><!DOCTYPE html></span>
|
||||
<span class="nt"><html></span>
|
||||
<span class="nt"><head></span>
|
||||
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
|
||||
<span class="nt"><title></span>Hello React!<span class="nt"></title></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"build/react.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"build/JSXTransformer.js"</span><span class="nt">></script></span>
|
||||
@@ -466,6 +467,7 @@
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp"><!DOCTYPE html></span>
|
||||
<span class="nt"><html></span>
|
||||
<span class="nt"><head></span>
|
||||
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
|
||||
<span class="nt"><title></span>Hello React!<span class="nt"></title></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"build/react.js"</span><span class="nt">></script></span>
|
||||
<span class="hll"> <span class="c"><!-- JSXTransformer は必要ありません！ --></span>
|
||||
|
||||
@@ -424,6 +424,7 @@
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp"><!DOCTYPE html></span>
|
||||
<span class="nt"><html></span>
|
||||
<span class="nt"><head></span>
|
||||
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
|
||||
<span class="nt"><title></span>Hello React!<span class="nt"></title></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"build/react.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"build/JSXTransformer.js"</span><span class="nt">></script></span>
|
||||
@@ -466,6 +467,7 @@
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp"><!DOCTYPE html></span>
|
||||
<span class="nt"><html></span>
|
||||
<span class="nt"><head></span>
|
||||
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
|
||||
<span class="nt"><title></span>Hello React!<span class="nt"></title></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"build/react.js"</span><span class="nt">></script></span>
|
||||
<span class="hll"> <span class="c"><!-- JSXTransformer는 이제 불필요합니다! --></span>
|
||||
|
||||
@@ -424,6 +424,7 @@
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp"><!DOCTYPE html></span>
|
||||
<span class="nt"><html></span>
|
||||
<span class="nt"><head></span>
|
||||
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
|
||||
<span class="nt"><title></span>Hello React!<span class="nt"></title></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"build/react.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"build/JSXTransformer.js"</span><span class="nt">></script></span>
|
||||
@@ -466,6 +467,7 @@
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp"><!DOCTYPE html></span>
|
||||
<span class="nt"><html></span>
|
||||
<span class="nt"><head></span>
|
||||
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
|
||||
<span class="nt"><title></span>Hello React!<span class="nt"></title></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"build/react.js"</span><span class="nt">></script></span>
|
||||
<span class="hll"> <span class="c"><!-- 不需要 JSXTransformer！ --></span>
|
||||
|
||||
@@ -424,6 +424,7 @@
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp"><!DOCTYPE html></span>
|
||||
<span class="nt"><html></span>
|
||||
<span class="nt"><head></span>
|
||||
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
|
||||
<span class="nt"><title></span>Hello React!<span class="nt"></title></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"build/react.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"build/JSXTransformer.js"</span><span class="nt">></script></span>
|
||||
@@ -449,7 +450,9 @@
|
||||
</code></pre></div>
|
||||
<p>Then reference it from <code>helloworld.html</code>:</p>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><script </span><span class="na">type=</span><span class="s">"text/jsx"</span> <span class="na">src=</span><span class="s">"src/helloworld.js"</span><span class="nt">></script></span>
|
||||
</code></pre></div><h3><a class="anchor" name="offline-transform"></a>Offline Transform <a class="hash-link" href="#offline-transform">#</a></h3>
|
||||
</code></pre></div>
|
||||
<p>Note that some browsers (Chrome, e.g.) will fail to load the file unless it's served via HTTP.</p>
|
||||
<h3><a class="anchor" name="offline-transform"></a>Offline Transform <a class="hash-link" href="#offline-transform">#</a></h3>
|
||||
<p>First install the command-line tools (requires <a href="https://www.npmjs.com/">npm</a>):</p>
|
||||
<div class="highlight"><pre><code class="language-text" data-lang="text">npm install -g react-tools
|
||||
</code></pre></div>
|
||||
@@ -466,6 +469,7 @@
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp"><!DOCTYPE html></span>
|
||||
<span class="nt"><html></span>
|
||||
<span class="nt"><head></span>
|
||||
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
|
||||
<span class="nt"><title></span>Hello React!<span class="nt"></title></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"build/react.js"</span><span class="nt">></script></span>
|
||||
<span class="hll"> <span class="c"><!-- No need for JSXTransformer! --></span>
|
||||
@@ -478,7 +482,7 @@
|
||||
</code></pre></div><h2><a class="anchor" name="want-commonjs"></a>Want CommonJS? <a class="hash-link" href="#want-commonjs">#</a></h2>
|
||||
<p>If you want to use React with <a href="http://browserify.org/">browserify</a>, <a href="https://webpack.github.io/">webpack</a>, or another CommonJS-compatible module system, just use the <a href="https://www.npmjs.com/package/react"><code>react</code> npm package</a>. In addition, the <code>jsx</code> build tool can be integrated into most packaging systems (not just CommonJS) quite easily.</p>
|
||||
<h2><a class="anchor" name="next-steps"></a>Next Steps <a class="hash-link" href="#next-steps">#</a></h2>
|
||||
<p>Check out <a href="/react/docs/tutorial.html">the tutorial</a> and the other examples in the starter kit's <code>examples</code> directory to learn more. </p>
|
||||
<p>Check out <a href="/react/docs/tutorial.html">the tutorial</a> and the other examples in the starter kit's <code>examples</code> directory to learn more.</p>
|
||||
|
||||
<p>We also have a wiki where the community contributes with <a href="https://github.com/facebook/react/wiki/Complementary-Tools">workflows, UI-components, routing, data management etc.</a></p>
|
||||
|
||||
|
||||
@@ -434,7 +434,7 @@
|
||||
<p><strong>オートバインディング:</strong> JavaScriptでコールバックを作成するときには、普通は <code>this</code> の値が正しくなるように、インスタンスにメソッドをはっきりとバインドする必要があります。
|
||||
Reactでは、全てのメソッドが自動でコンポーネントのインスタンスにバインドされます。ReactはCPUとメモリを効率的に使えるように、バインドするメソッドを持っています。これによって、タイピングの量を少なくすることもできます！</p>
|
||||
|
||||
<p><strong>イベントの委譲:</strong> Reactは実際はノード自体にイベントハンドラをアタッチはしません。Reactを立ち上げる時、1つのイベントリスナを使って最上位で全てのイベントをリスニングし始めます。コンポーネントがマウントされたり、アンマウントされた時は、イベントハンドラは内部のマッピングを単純に加えたり減らしたりします。イベントが起こった時には、Reactはこのマッピングを使ってどのようにディスパッチするかを知っています。マッピングの中にイベントハンドラが無い場合は、Reactのイベントハンドラは何も行いません。なぜこれの速度が早いかについて詳しく知るためには、<a href="http://davidwalsh.name/event-delegate">David Walshの素晴らしいブログの投稿</a>をご覧ください。</p>
|
||||
<p><strong>イベントの委譲:</strong> Reactは実際はノード自体にイベントハンドラをアタッチはしません。Reactを立ち上げる時、1つのイベントリスナを使って最上位で全てのイベントをリスニングし始めます。コンポーネントがマウントされたり、アンマウントされた時は、イベントハンドラは内部のマッピングを単純に加えたり減らしたりします。イベントが起こった時には、Reactはこのマッピングを使ってどのようにディスパッチするかを知っています。マッピングの中にイベントハンドラが無い場合は、Reactのイベントハンドラは何も行いません。なぜこれの速度が速いかについて詳しく知るためには、<a href="http://davidwalsh.name/event-delegate">David Walshの素晴らしいブログの投稿</a>をご覧ください。</p>
|
||||
<h2><a class="anchor" name=""></a>コンポーネントは静的なマシーンに過ぎない <a class="hash-link" href="#">#</a></h2>
|
||||
<p>ReactはUIをただの静的なマシーンと考えます。UIがたくさんのstateの中にあり、それらのstateをレンダリングするものだと考えることで、UIの一貫性を保ちやすくなります。</p>
|
||||
|
||||
|
||||
@@ -0,0 +1,571 @@
|
||||
<!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="https://facebook.github.io/react/docs/more-about-refs-ja-JP.html">
|
||||
<meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces">
|
||||
<meta property="fb:app_id" content="623268441017527">
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="https://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="/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>
|
||||
</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 nav-site-internal">
|
||||
<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>
|
||||
</ul>
|
||||
|
||||
<ul class="nav-site nav-site-external">
|
||||
<li><a href="https://github.com/facebook/react">GitHub</a>
|
||||
<li><a href="https://facebook.github.io/react-native/">React Native</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/conferences.html">Conferences</a>
|
||||
|
||||
</li>
|
||||
|
||||
<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" class="active">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 Elements</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/create-fragment.html">Keyed Fragments</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>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/advanced-performance.html">Advanced Performance</a>
|
||||
|
||||
</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="https://facebook.github.io/flux/docs/overview.html">Flux Overview</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://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>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/dangerously-set-inner-html.html">Dangerously Set innerHTML</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/08.1-more-about-refs.ja-JP.md" target="_blank">Edit on GitHub</a>
|
||||
</h1>
|
||||
<div class="subHeader"></div>
|
||||
|
||||
<p>renderメソッドからUIの構成をリターンした後、あなたは「リーチアウト」を見て、renderから返ってきたコンポーネントのインスタンスの上でメソッドを実行するでしょう。多くの場合、アプリケーションにおいて、データフローを作成することは必要ではありません。リアクティブなデータフローは常に最新の <code>props</code> が <code>render()</code> から出力されたそれぞれの子要素に送られたことを保証するからです。しかし、まだ必要であったり、利益をもたらすケースもあります。</p>
|
||||
|
||||
<p><code>''</code> という空の文字列でその値をアップデートした後にフォーカスするということを <code><input /></code> 要素（インスタンスのサブ階層に存在します）に伝えたいという場合を考えましょう。</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="kd">var</span> <span class="nx">App</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">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">userInput</span><span class="o">:</span> <span class="s1">''</span><span class="p">};</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">handleChange</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</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">userInput</span><span class="o">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">clearAndFocusInput</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">userInput</span><span class="o">:</span> <span class="s1">''</span><span class="p">});</span> <span class="c1">// inputをクリアします</span>
|
||||
<span class="c1">// ここで、<input /> にフォーカスさせたいです！</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">div</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">clearAndFocusInput</span><span class="p">}</span><span class="o">></span>
|
||||
<span class="nx">Click</span> <span class="nx">to</span> <span class="nx">Focus</span> <span class="nx">and</span> <span class="nx">Reset</span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="o"><</span><span class="nx">input</span>
|
||||
<span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">userInput</span><span class="p">}</span>
|
||||
<span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleChange</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>
|
||||
</code></pre></div>
|
||||
<p>この例では、どうにかしてinputに何かを「伝え」たいということに着目してください。何かというのは、propsから推測できるものではありません。このケースでは、inputが今フォーカスされるべきであるということを「伝え」たいのです。しかし、いくつか問題があります。<code>render()</code> で返されるものは実際の「子供の」要素ではありません。しかし、特別なインスタンスにおいて子要素の <em>説明</em> を行うよりかは、スナップショットを見ていったほうがいいでしょう。</p>
|
||||
|
||||
<blockquote>
|
||||
<p>注意:
|
||||
<code>render()</code> からリターンされるものは <em>実際に</em> レンダリングされた子要素のインスタンスではないと覚えておいてください。 <code>render()</code> からリターンされるものは、ある特定の時点においてのコンポーネントの副階層にある単なる子要素のインスタンスの <em>説明</em> に過ぎません。</p>
|
||||
</blockquote>
|
||||
|
||||
<p>これは、 <code>render()</code> からリターンされる何かを「保持し続ける」ことはできないことを意味します。そして、それは何かしら意味のあることであると予測できます。</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="c1">// 反例: このようには記述しないでください！</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">myInput</span> <span class="o">=</span> <span class="o"><</span><span class="nx">input</span> <span class="o">/></span><span class="p">;</span> <span class="c1">// このinputの上にあるメソッドを未来のいつかの</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">rememberThisInput</span> <span class="o">=</span> <span class="nx">myInput</span><span class="p">;</span> <span class="c1">// タイミングで呼ぼうとしています！いえいっ！</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">div</span><span class="o">></span><span class="p">...</span><span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">{</span><span class="nx">myInput</span><span class="p">}</span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>この反例では、 <code><input /></code> は単に <code><input /></code> の <em>説明</em> に過ぎず、この説明は <code><input /></code> の <em>現実の</em> <strong>バッキングインスタンス</strong> を作るために使われます。</p>
|
||||
|
||||
<p>では、inputの <em>現実の</em> バッキングインスタンスについて、どのように話していきましょうか？</p>
|
||||
<h2><a class="anchor" name=""></a>参照の文字列属性 <a class="hash-link" href="#">#</a></h2>
|
||||
<p>Reactは <code>render()</code> からの出力であるコンポーネントであれば何でもアタッチできるとても特別なプロパティをサポートしています。この特別なプロパティは <code>render()</code> からのリターンである <strong>バッキングインスタンス</strong> に対応したものに参照することを許可します。これはどのタイミングにおいても、固有のインスタンスであることを保証されています。</p>
|
||||
|
||||
<p>これは以下のように単純です。</p>
|
||||
|
||||
<ol>
|
||||
<li>以下のように、 <code>render</code> からのリターンであれば何でも <code>ref</code> 属性をアサインする。</li>
|
||||
</ol>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"> <span class="nt"><input</span> <span class="na">ref=</span><span class="s">"myInput"</span> <span class="nt">/></span>
|
||||
</code></pre></div>
|
||||
<ol>
|
||||
<li>いくつかの他のコードは（一般的にイベントハンドラのコード）、以下にあるように <code>this.refs</code> を通して <strong>バッキングインスタンス</strong> にアクセスします。</li>
|
||||
</ol>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">myInput</span>
|
||||
</code></pre></div>
|
||||
<p><code>React.findDOMNode(this.refs.myInput)</code> を呼ぶことで、コンポーネントのDOMノードに直接アクセスできる。</p>
|
||||
<h2><a class="anchor" name=""></a>参照のコールバック属性 <a class="hash-link" href="#">#</a></h2>
|
||||
<p><code>ref</code> 属性は名前の代わりのコールバック関数になり得ます。このコールバックはコンポーネントがマウントされた直後に実行されます。参照されたコンポーネントはパラメータとして渡され、コールバック関数はコンポーネントを即座に使用するか、または将来使用するために参照を保存します（またはその両方を行います）。</p>
|
||||
|
||||
<p>これは、以下のように、 <code>render</code> でリターンされてきたものに <code>ref</code> 属性をアサインするのと同じくらい簡単です。</p>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"> <span class="nt"><input</span> <span class="na">ref=</span><span class="s">{</span> <span class="na">function</span><span class="err">(</span><span class="na">component</span><span class="err">){</span> <span class="na">React</span><span class="err">.</span><span class="na">findDOMNode</span><span class="err">(</span><span class="na">component</span><span class="err">).</span><span class="na">focus</span><span class="err">();}</span> <span class="err">}</span> <span class="nt">/></span>
|
||||
</code></pre></div><h2><a class="anchor" name=""></a>完全な例 <a class="hash-link" href="#">#</a></h2><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="kd">var</span> <span class="nx">App</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">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">userInput</span><span class="o">:</span> <span class="s1">''</span><span class="p">};</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">handleChange</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</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">userInput</span><span class="o">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">clearAndFocusInput</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// inputをクリアする</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">userInput</span><span class="o">:</span> <span class="s1">''</span><span class="p">},</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// このコードはコンポーネントが再度レンダリングされた後に実行されます。</span>
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">findDOMNode</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">theInput</span><span class="p">).</span><span class="nx">focus</span><span class="p">();</span> <span class="c1">// どーん！フォーカスされました！</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">div</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">div</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">clearAndFocusInput</span><span class="p">}</span><span class="o">></span>
|
||||
<span class="nx">Click</span> <span class="nx">to</span> <span class="nx">Focus</span> <span class="nx">and</span> <span class="nx">Reset</span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="o"><</span><span class="nx">input</span>
|
||||
<span class="nx">ref</span><span class="o">=</span><span class="s2">"theInput"</span>
|
||||
<span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">userInput</span><span class="p">}</span>
|
||||
<span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleChange</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>
|
||||
</code></pre></div>
|
||||
<p>この例では、レンダリング関数は <code><input /></code> インスタンスの説明をリターンします。しかし、実際のインスタンスは <code>this.refs.theInput</code> を通してアクセスされます。 <code>ref="theInput"</code> を持つ子要素のコンポーネントが <code>render</code> からリターンされる限り、 <code>this.refs.theInput</code> は固有のインスタンスにアクセスするでしょう。これは <code><Typeahead ref="myTypeahead" /></code> のような高階層の（DOMでない）コンポーネントでも同様に動きます。</p>
|
||||
<h2><a class="anchor" name=""></a>要約 <a class="hash-link" href="#">#</a></h2>
|
||||
<p>リアクティブな <code>props</code> と <code>state</code> を通してのストリーミングのアクセスは便利とは言えないため、参照は特定の子要素のインスタンスにメッセージを送るための素晴らしい方法です。しかし、それらは、アプリケーションを通したデータフローの抽象化につながるわけではありません。デフォルトで、リアクティブなデータフローを使ってください。そして、ユースケースのために <code>ref</code> を保存するのは本質的にはリアクティブではありません。</p>
|
||||
<h3><a class="anchor" name=""></a>利益: <a class="hash-link" href="#">#</a></h3>
|
||||
<ul>
|
||||
<li>コンポーネントクラス（例えば、Typeaheadのリセットメソッドのようなもの）にパブリックなメソッドを定義できる。また、参照（例えば、 <code>this.refs.myTypeahead.reset()</code> のように）を通してそれらのパブリックなメソッドを呼べる。</li>
|
||||
<li>DOMの計測を行うことは大体いつも <code><input /></code> のような「ネイティブの」コンポーネントや <code>React.findDOMNode(this.refs.myInput)</code> を通した根本のDOMノードにアクセスすることを必要とします。参照は、こういったことを期待通りに行う唯一の実用的な方法です。</li>
|
||||
<li>参照は自動的に管理されます！もし子要素が削除されたら、その参照もまた削除されます。メモリに関しての心配は要りません（あなた自身が参照を維持するために何かおかしなことを行っていなければ）。</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name=""></a>警告: <a class="hash-link" href="#">#</a></h3>
|
||||
<ul>
|
||||
<li><em>決して</em> コンポーネントのレンダリングメソッドの中の参照にアクセスしてはいけません。たとえコンポーネントのレンダリングメソッドのいずれかがコールスタックの中のどこかで動いているとしても。</li>
|
||||
<li>もしGoogle Closure Compilerのクラッシュからの回復を守りたいなら、文字列として指定されたプロパティとしてアクセスしてはいけないことに気をつけてください。これは、 <code>ref="myRefString"</code> として参照が定義されている場合は、 <code>this.refs['myRefString']</code> を使ってアクセスしなければいけないことを意味します。</li>
|
||||
<li>まだReactでプログラムを書いたことがない場合は、アプリケーションで「何かを起こす」ために参照を使おうとするでしょう。もしそのケースだった場合は、時間をかけて <code>state</code> がコンポーネントの階層のどこで保持されるべきか批評的に考えてください。多くの場合は、そのstateを「保持する」ための固有の場所が階層の高いレベルにあることがクリアになります。そのstateをその場所に配置することはよく「何かを起こす」ために <code>ref</code> を使うための願望を排除します。代わりに、データフローは普通、目標を達成します。</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/working-with-the-browser-ja-JP.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/tooling-integration-ja-JP.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="https://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>
|
||||
@@ -508,7 +508,7 @@
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>In this example, our render function returns a description of an <code><input /></code> instance. But the true instance is accessed via <code>this.refs.theInput</code>. As long as a child component with <code>ref="theInput"</code> is returned from render, <code>this.refs.theInput</code> will access the proper instance. This even works on higher level (non-DOM) components such as <code><Typeahead ref="myTypeahead" /></code>.</p>
|
||||
<p>In this example, our render function returns a description of an <code><input /></code> instance. But the true instance is accessed via <code>this.refs.theInput</code>. As long as a child component with <code>ref="theInput"</code> is returned from <code>render</code>, <code>this.refs.theInput</code> will access the proper instance. This even works on higher level (non-DOM) components such as <code><Typeahead ref="myTypeahead" /></code>.</p>
|
||||
<h2><a class="anchor" name="summary"></a>Summary <a class="hash-link" href="#summary">#</a></h2>
|
||||
<p>Refs are a great way to send a message to a particular child instance in a way that would be inconvenient to do via streaming Reactive <code>props</code> and <code>state</code>. They should, however, not be your go-to abstraction for flowing data through your application. By default, use the Reactive data flow and save <code>ref</code>s for use cases that are inherently non-reactive.</p>
|
||||
<h3><a class="anchor" name="benefits"></a>Benefits: <a class="hash-link" href="#benefits">#</a></h3>
|
||||
|
||||
@@ -511,8 +511,7 @@
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="c1">// Correct :)</span>
|
||||
</code></pre></div><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Correct :)</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>
|
||||
|
||||
@@ -0,0 +1,473 @@
|
||||
<!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="https://facebook.github.io/react/docs/tooling-integration-ja-JP.html">
|
||||
<meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces">
|
||||
<meta property="fb:app_id" content="623268441017527">
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="https://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="/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>
|
||||
</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 nav-site-internal">
|
||||
<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>
|
||||
</ul>
|
||||
|
||||
<ul class="nav-site nav-site-external">
|
||||
<li><a href="https://github.com/facebook/react">GitHub</a>
|
||||
<li><a href="https://facebook.github.io/react-native/">React Native</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/conferences.html">Conferences</a>
|
||||
|
||||
</li>
|
||||
|
||||
<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" class="active">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 Elements</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/create-fragment.html">Keyed Fragments</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>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/advanced-performance.html">Advanced Performance</a>
|
||||
|
||||
</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="https://facebook.github.io/flux/docs/overview.html">Flux Overview</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://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>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/dangerously-set-inner-html.html">Dangerously Set innerHTML</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/09-tooling-integration.ja-JP.md" target="_blank">Edit on GitHub</a>
|
||||
</h1>
|
||||
<div class="subHeader"></div>
|
||||
|
||||
<p>全てのプロジェクトがJavaScriptをビルドしたりデプロイするのに様々なシステムを使用しています。私たちはReactをできるだけ環境不問にしようとしています。</p>
|
||||
<h2><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h2><h3><a class="anchor" name="cdnreact"></a>CDNにホストされたReact <a class="hash-link" href="#cdnreact">#</a></h3>
|
||||
<p><a href="/react/downloads.html">ダウンロードページ</a>でCDNにホストされたバージョンのReactが提供されています。それらの、事前にビルドされたファイルはUMDモジュールフォーマットを使用しています。簡単な <code><script></code> タグを使ってそれらを導入することで、あなたの環境でグローバルに <code>React</code> を使うことができます。CommonJSの外や、AMDの環境でも、それは動作するでしょう。</p>
|
||||
<h3><a class="anchor" name="master"></a>masterを使う <a class="hash-link" href="#master">#</a></h3>
|
||||
<p><a href="https://github.com/facebook/react">GitHubリポジトリに</a> <code>master</code> からビルドする説明が書いてあります。<code>build/modules</code> の下にCommonJSモジュールのツリーをビルドします。それらは、どんな環境やCommonJSがサポートされているパッケージングツールでも導入できます。</p>
|
||||
<h2><a class="anchor" name="jsx"></a>JSX <a class="hash-link" href="#jsx">#</a></h2><h3><a class="anchor" name="jsx"></a>ブラウザ上でのJSXの変換 <a class="hash-link" href="#jsx">#</a></h3>
|
||||
<p>JSXを使用したい場合、<a href="/react/downloads.html">ダウンロードページに</a>開発のためにブラウザ上でのJSXトランスフォーマーを提供しています。単純に <code><script type="text/jsx"></code> をインクルードすることでJSXトランスフォーマーを使用できます。</p>
|
||||
|
||||
<blockquote>
|
||||
<p>注意:
|
||||
ブラウザ上でのJSXトランスフォーマーをとても大きく、避けることのできるクライアントサイドの計算になりかねません。プロダクションでは使わないでください。詳細は次のセクションをご覧ください。</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" name="jsx"></a>プロダクションで使う場合:事前にコンパイルされたJSX <a class="hash-link" href="#jsx">#</a></h3>
|
||||
<p><a href="https://www.npmjs.com/">npm</a>がインストールされている場合、コマンドラインの <code>jsx</code> ツールは単純に <code>npm install -g react-tools</code> コマンドを流せばインストールできます。このツールはJSXを使用しているファイルを直接ブラウザ上で動く生のJavaScriptファイルに変換します。また、ディレクトリをウォッチして、ファイルが変更されたら自動的に変換を行います。例えば、次のようなコマンドで。 <code>jsx --watch src/ build/</code></p>
|
||||
|
||||
<p>デフォルトで、拡張子が <code>.js</code> のJSXファイルは変換されます。拡張子が <code>.jsx</code> のファイルを変換するには <code>jsx --extension jsx src/ build/</code> コマンドを使用してください。</p>
|
||||
|
||||
<p>このツールの使用方法についての詳細の情報については、 <code>jsx --help</code> コマンドを使用してください。</p>
|
||||
<h3><a class="anchor" name=""></a>役に立つオープンソースのプロジェクト <a class="hash-link" href="#">#</a></h3>
|
||||
<p>オープンソースコミュニティがJSXをいくつかのエディタやビルドシステムで使用するためのツールを作成しました。一覧は<a href="https://github.com/facebook/react/wiki/Complementary-Tools#jsx-integrations">JSXのインテグレーション</a>を参照してください。</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/more-about-refs-ja-JP.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/addons-ja-JP.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="https://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>
|
||||
@@ -433,6 +433,7 @@
|
||||
<span class="cp"><!DOCTYPE html></span>
|
||||
<span class="nt"><html></span>
|
||||
<span class="nt"><head></span>
|
||||
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
|
||||
<span class="nt"><title></span>Hello React<span class="nt"></title></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"</span><span class="nt">></script></span>
|
||||
@@ -577,6 +578,7 @@
|
||||
<p>まず最初に、サードパーティ製の <strong>Showdown</strong> ライブラリをアプリケーションに追加します。 Showdown は Markdown テキストを生の HTML に変換する JavaScript ライブラリです。 既にある head タグの内側に script タグを書き込み、以下のように Showdown を読み込ませます。</p>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- index.html --></span>
|
||||
<span class="nt"><head></span>
|
||||
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
|
||||
<span class="nt"><title></span>Hello React<span class="nt"></title></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"</span><span class="nt">></script></span>
|
||||
|
||||
@@ -433,6 +433,7 @@
|
||||
<span class="cp"><!DOCTYPE html></span>
|
||||
<span class="nt"><html></span>
|
||||
<span class="nt"><head></span>
|
||||
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
|
||||
<span class="nt"><title></span>Hello React<span class="nt"></title></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"</span><span class="nt">></script></span>
|
||||
@@ -579,6 +580,7 @@
|
||||
<p>먼저 서드파티 라이브러리인 <strong>marked</strong>를 애플리케이션에 추가합니다. 이 JavaScript 라이브러리는 Markdown 텍스트를 HTML 문법으로 변환해줍니다. head 태그안에 스크립트 태그를 추가해 주세요. (React playground에는 이미 포함되어 있습니다):</p>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- index.html --></span>
|
||||
<span class="nt"><head></span>
|
||||
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
|
||||
<span class="nt"><title></span>Hello React<span class="nt"></title></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"</span><span class="nt">></script></span>
|
||||
|
||||
+3
-1
@@ -433,6 +433,7 @@
|
||||
<span class="cp"><!DOCTYPE html></span>
|
||||
<span class="nt"><html></span>
|
||||
<span class="nt"><head></span>
|
||||
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
|
||||
<span class="nt"><title></span>Hello React<span class="nt"></title></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"</span><span class="nt">></script></span>
|
||||
@@ -579,6 +580,7 @@
|
||||
<p>First, add the third-party library <strong>marked</strong> to your application. This is a JavaScript library which takes Markdown text and converts it to raw HTML. This requires a script tag in your head (which we have already included in the React playground):</p>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- index.html --></span>
|
||||
<span class="nt"><head></span>
|
||||
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
|
||||
<span class="nt"><title></span>Hello React<span class="nt"></title></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"</span><span class="nt">></script></span>
|
||||
@@ -704,7 +706,7 @@
|
||||
</code></pre></div>
|
||||
<p><code>getInitialState()</code> executes exactly once during the lifecycle of the component and sets up the initial state of the component.</p>
|
||||
<h4><a class="anchor" name="updating-state"></a>Updating state <a class="hash-link" href="#updating-state">#</a></h4>
|
||||
<p>When the component is first created, we want to GET some JSON from the server and update the state to reflect the latest data. In a real application this would be a dynamic endpoint, but for this example, we will use a static JSON file to keep things simple:</p>
|
||||
<p>When the component is first created, we want to GET some JSON from the server and update the state to reflect the latest data. In a real application this would be a dynamic endpoint, but for this example we will keep things simple by creating a static JSON file <code>public/comments.json</code> containing the array of comments:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// tutorial13.json</span>
|
||||
<span class="p">[</span>
|
||||
<span class="p">{</span><span class="s2">"author"</span><span class="o">:</span> <span class="s2">"Pete Hunt"</span><span class="p">,</span> <span class="s2">"text"</span><span class="o">:</span> <span class="s2">"This is one comment"</span><span class="p">},</span>
|
||||
|
||||
@@ -0,0 +1,539 @@
|
||||
<!DOCTYPE html>
|
||||
<!--[if IE]><![endif]-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>2ウェイバインディングのヘルパ | React</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="2ウェイバインディングのヘルパ | React">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://facebook.github.io/react/docs/two-way-binding-helpers-ja-JP.html">
|
||||
<meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces">
|
||||
<meta property="fb:app_id" content="623268441017527">
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="https://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="/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>
|
||||
</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 nav-site-internal">
|
||||
<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>
|
||||
</ul>
|
||||
|
||||
<ul class="nav-site nav-site-external">
|
||||
<li><a href="https://github.com/facebook/react">GitHub</a>
|
||||
<li><a href="https://facebook.github.io/react-native/">React Native</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/conferences.html">Conferences</a>
|
||||
|
||||
</li>
|
||||
|
||||
<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" class="active">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 Elements</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/create-fragment.html">Keyed Fragments</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>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/advanced-performance.html">Advanced Performance</a>
|
||||
|
||||
</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="https://facebook.github.io/flux/docs/overview.html">Flux Overview</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://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>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/dangerously-set-inner-html.html">Dangerously Set innerHTML</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>
|
||||
2ウェイバインディングのヘルパ
|
||||
<a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs/docs/10.2-form-input-binding-sugar.ja-JP.md" target="_blank">Edit on GitHub</a>
|
||||
</h1>
|
||||
<div class="subHeader"></div>
|
||||
|
||||
<p><code>ReactLink</code> はReactで2ウェイバインディングを表現する簡単な方法です。</p>
|
||||
|
||||
<blockquote>
|
||||
<p>注意:
|
||||
もしあなたがフレームワークについてあまりよく知らないのであれば、 <code>ReactLink</code> は多くのアプリケーションには必要なく、慎重に使うべきであることに注意してください。</p>
|
||||
</blockquote>
|
||||
|
||||
<p>Reactでは所有者から子要素へと、データの流れは一方向です。これはデータが<a href="https://en.wikipedia.org/wiki/Von_Neumann_architecture">Von Neumannのコンピューティングモデル</a>によって一方向にのみ流れるからです。これを「1ウェイデータバインディング」だと考えることができます。</p>
|
||||
|
||||
<p>しかし、データやプログラムに戻る流れを読む必要が有るアプリケーションもたくさんあります。例えば、フォームを作る際に、ユーザのインプットを受け取った時には、Reactの <code>state</code> を更新したいと思うことはよくあるでしょう。または、JavaScriptでレイアウトを形作ったり、DOM要素のサイズの変化に反応したいと思うでしょう。</p>
|
||||
|
||||
<p>Reactでは、「変更」のイベントを検知し、データソース（普通はDOMです）を読み、コンポーネントのうちの1つの上で <code>setState()</code> を呼ぶことでこの要求を満たすことができます。「データフローのループを止めること」は理解しやすく、維持しやすいプログラムを明確に導きます。詳細な情報については、<a href="/react/docs/forms-ja-JP.html">フォームのドキュメント</a>をご覧ください。 </p>
|
||||
|
||||
<p>2ウェイバインディングはDOMの値が常にReactの <code>state</code> と一致していることを暗黙に強制しますが、簡潔で、多くの種類のアプリケーションをサポートします。上で説明されているような共通のデータフローループパターンのセットアップや、データソースをReactの <code>state</code> に「接続する」ための糖衣構文である <code>ReactLink</code> が提供されています。</p>
|
||||
|
||||
<blockquote>
|
||||
<p>注意:
|
||||
<code>ReactLink</code> は薄いラッパーであり、 <code>onChange</code>/<code>setState()</code> パターンにおける習慣です。Reactアプリケーションのデータフローの方法を根本から変えるようなものではありません。</p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="reactlink-"></a>ReactLink: ビフォーアフター <a class="hash-link" href="#reactlink-">#</a></h2>
|
||||
<p>以下が、 <code>ReactLink</code> を使用しない単純なフォームの例です。</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">NoLink</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">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">message</span><span class="o">:</span> <span class="s1">'Hello!'</span><span class="p">};</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">handleChange</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</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">message</span><span class="o">:</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</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="kd">var</span> <span class="nx">message</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">message</span><span class="p">;</span>
|
||||
<span class="k">return</span> <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">value</span><span class="o">=</span><span class="p">{</span><span class="nx">message</span><span class="p">}</span> <span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>これはとてもよく動き、データがどう流れているかとても明確です。しかし、たくさんのフォームのフィールドがあった場合、少し冗長になります。以下のように、 <code>ReactLink</code> を使うことでタイピング量が少なくて済みます。</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">WithLink</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="hll"> <span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">React</span><span class="p">.</span><span class="nx">addons</span><span class="p">.</span><span class="nx">LinkedStateMixin</span><span class="p">],</span>
|
||||
</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">message</span><span class="o">:</span> <span class="s1">'Hello!'</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="hll"> <span class="k">return</span> <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">valueLink</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">linkState</span><span class="p">(</span><span class="s1">'message'</span><span class="p">)}</span> <span class="o">/></span><span class="p">;</span>
|
||||
</span> <span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p><code>LinkedStateMixin</code> は <code>linkState()</code> と呼ばれるReactコンポーネントにメソッドを追加します。
|
||||
<code>linkState()</code> はReactのステータスの現在の値と、それを変更するコールバックを持った <code>ReactLink</code> オブジェクトを返します。</p>
|
||||
|
||||
<p><code>ReactLink</code> オブジェクトはプロパティとして、木構造の上や下に渡される可能性があります。だから、階層の深い位置にいるコンポーネントと階層の高い位置にいるステータスの間の2ウェイバインディングをセットアップすることは簡単（で、明確）です。</p>
|
||||
|
||||
<p>チェックボックスはその <code>value</code> 属性に対しての特別な態度を持っていることに注意してください。それは、チェックボックスがチェックされている（デフォルトで <code>on</code> ）場合にフォームのサブミットで送信される値です。 <code>value</code> 属性はチェックボックスがチェックされていても、チェックされていなくても、更新されません。チェックボックスについては、<code>valueLink</code> の代わりに、 <code>checkedLink</code> を使うべきです。以下のように。</p>
|
||||
<div class="highlight"><pre><code class="language-text" data-lang="text"><input type="checkbox" checkedLink={this.linkState('booleanValue')} />
|
||||
</code></pre></div><h2><a class="anchor" name=""></a>フードの下 <a class="hash-link" href="#">#</a></h2>
|
||||
<p><code>ReactLink</code> には2つの側面があります。 <code>ReactLink</code> のインスタンスを作成する場所と、それを使う場所です。 <code>ReactLink</code> がどれだけ単純か証明するために、それぞれの側面を分けて、明確に再度記述してみましょう。</p>
|
||||
<h3><a class="anchor" name="linkedstatemixinreactlink"></a>LinkedStateMixinを使わないReactLink <a class="hash-link" href="#linkedstatemixinreactlink">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">WithoutMixin</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">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">message</span><span class="o">:</span> <span class="s1">'Hello!'</span><span class="p">};</span>
|
||||
<span class="p">},</span>
|
||||
<span class="hll"> <span class="nx">handleChange</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">newValue</span><span class="p">)</span> <span class="p">{</span>
|
||||
</span><span class="hll"> <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">message</span><span class="o">:</span> <span class="nx">newValue</span><span class="p">});</span>
|
||||
</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="hll"> <span class="kd">var</span> <span class="nx">valueLink</span> <span class="o">=</span> <span class="p">{</span>
|
||||
</span><span class="hll"> <span class="nx">value</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">message</span><span class="p">,</span>
|
||||
</span><span class="hll"> <span class="nx">requestChange</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span>
|
||||
</span><span class="hll"> <span class="p">};</span>
|
||||
</span> <span class="k">return</span> <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">valueLink</span><span class="o">=</span><span class="p">{</span><span class="nx">valueLink</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>今まで見てきたように <code>ReactLink</code> オブジェクトは <code>value</code> と <code>requestChange</code> プロパティだけを持ったとても単純なオブジェクトです。そして、 <code>LinkedStateMixin</code> も同様に単純です。それらのフィールドを <code>this.state</code> の値と、 <code>this.setState()</code> を呼ぶコールバックで満たします。</p>
|
||||
<h3><a class="anchor" name="valuelinkreactlink"></a>valueLinkを使わないReactLink <a class="hash-link" href="#valuelinkreactlink">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">WithoutLink</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">React</span><span class="p">.</span><span class="nx">addons</span><span class="p">.</span><span class="nx">LinkedStateMixin</span><span class="p">],</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">message</span><span class="o">:</span> <span class="s1">'Hello!'</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="kd">var</span> <span class="nx">valueLink</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">linkState</span><span class="p">(</span><span class="s1">'message'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">handleChange</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">valueLink</span><span class="p">.</span><span class="nx">requestChange</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
|
||||
<span class="p">};</span>
|
||||
<span class="k">return</span> <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">value</span><span class="o">=</span><span class="p">{</span><span class="nx">valueLink</span><span class="p">.</span><span class="nx">value</span><span class="p">}</span> <span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="nx">handleChange</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p><code>valueLink</code> プロパティも同様にとても単純です。単純に <code>onChange</code> イベントをハンドルし、 <code>this.props.valueLink.requestChange()</code> を呼び、 <code>this.props.value</code> の代わりに <code>this.props.valueLink.value</code> を使用します。それだけです！</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/animation-ja-JP.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/test-utils-ja-JP.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="https://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>
|
||||
@@ -423,7 +423,7 @@
|
||||
<blockquote>
|
||||
<p>Note:</p>
|
||||
|
||||
<p>ReactLink is just a thin wrapper and convention around the <code>onChange</code>/<code>setState()</code> pattern. It doesn't fundamentally change how data flows in your React application.</p>
|
||||
<p><code>ReactLink</code> is just a thin wrapper and convention around the <code>onChange</code>/<code>setState()</code> pattern. It doesn't fundamentally change how data flows in your React application.</p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="reactlink-before-and-after"></a>ReactLink: Before and After <a class="hash-link" href="#reactlink-before-and-after">#</a></h2>
|
||||
<p>Here's a simple form example without using <code>ReactLink</code>:</p>
|
||||
|
||||
@@ -417,8 +417,7 @@
|
||||
<p>That's not valid JS. You probably want to make use of a ternary expression:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><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">div</span> <span class="nx">id</span><span class="o">=</span><span class="p">{</span><span class="nx">condition</span> <span class="o">?</span> <span class="s1">'msg'</span> <span class="o">:</span> <span class="s1">''</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="err">/div>, mountNode);</span>
|
||||
</code></pre></div>
|
||||
<p>If a ternary expression isn't robust enough, you can use <code>if</code> statements to determine which
|
||||
components should be used.</p>
|
||||
<p>If a ternary expression isn't robust enough, you can use <code>if</code> statements outside of your JSX to determine which components should be used:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">loginButton</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">loggedIn</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">loginButton</span> <span class="o">=</span> <span class="o"><</span><span class="nx">LogoutButton</span> <span class="o">/></span><span class="p">;</span>
|
||||
@@ -431,8 +430,34 @@ components should be used.</p>
|
||||
<span class="o"><</span><span class="nx">Home</span> <span class="o">/></span>
|
||||
<span class="p">{</span><span class="nx">loginButton</span><span class="p">}</span>
|
||||
<span class="o"><</span><span class="err">/nav></span>
|
||||
<span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>Or if you prefer a more "inline" aesthetic, define <a href="https://en.wikipedia.org/wiki/Immediately-invoked_function_expression">immediately-invoked function expressions</a> <em>inside</em> your JSX:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">section</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">h1</span><span class="o">></span><span class="nx">Color</span><span class="o"><</span><span class="err">/h1></span>
|
||||
<span class="o"><</span><span class="nx">h3</span><span class="o">></span><span class="nx">Name</span><span class="o"><</span><span class="err">/h3></span>
|
||||
<span class="o"><</span><span class="nx">p</span><span class="o">></span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">color</span> <span class="o">||</span> <span class="s2">"white"</span><span class="p">}</span><span class="o"><</span><span class="err">/p></span>
|
||||
<span class="o"><</span><span class="nx">h3</span><span class="o">></span><span class="nx">Hex</span><span class="o"><</span><span class="err">/h3></span>
|
||||
<span class="o"><</span><span class="nx">p</span><span class="o">></span>
|
||||
<span class="p">{()</span> <span class="o">=></span> <span class="p">{</span>
|
||||
<span class="k">switch</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">color</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">case</span> <span class="s2">"red"</span><span class="o">:</span> <span class="k">return</span> <span class="s2">"#FF0000"</span><span class="p">;</span>
|
||||
<span class="k">case</span> <span class="s2">"green"</span><span class="o">:</span> <span class="k">return</span> <span class="s2">"#00FF00"</span><span class="p">;</span>
|
||||
<span class="k">case</span> <span class="s2">"blue"</span><span class="o">:</span> <span class="k">return</span> <span class="s2">"#0000FF"</span><span class="p">;</span>
|
||||
<span class="k">default</span><span class="o">:</span> <span class="k">return</span> <span class="s2">"#FFFFFF"</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}()}</span>
|
||||
<span class="o"><</span><span class="err">/p></span>
|
||||
<span class="o"><</span><span class="err">/section></span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<blockquote>
|
||||
<p>Note:</p>
|
||||
|
||||
<p>In the example above, an ES6 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow function</a> is utilized to lexically bind the value of <code>this</code>.</p>
|
||||
</blockquote>
|
||||
|
||||
<p>Try using it today with the <a href="/react/jsx-compiler.html">JSX compiler</a>.</p>
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,456 @@
|
||||
<!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="https://facebook.github.io/react/tips/self-closing-tag-ja-JP.html">
|
||||
<meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces">
|
||||
<meta property="fb:app_id" content="623268441017527">
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="https://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="/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>
|
||||
</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 nav-site-internal">
|
||||
<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>
|
||||
</ul>
|
||||
|
||||
<ul class="nav-site nav-site-external">
|
||||
<li><a href="https://github.com/facebook/react">GitHub</a>
|
||||
<li><a href="https://facebook.github.io/react-native/">React Native</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/conferences.html">Conferences</a>
|
||||
|
||||
</li>
|
||||
|
||||
<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 Elements</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/create-fragment.html">Keyed Fragments</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>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/advanced-performance.html">Advanced Performance</a>
|
||||
|
||||
</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="https://facebook.github.io/flux/docs/overview.html">Flux Overview</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://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>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/dangerously-set-inner-html.html">Dangerously Set innerHTML</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>自己終了タグ</h1>
|
||||
<div class="subHeader"></div>
|
||||
<p>JSXでは、 <code><MyComponent /></code> 単体は正しいですが、 <code><MyComponent></code> は正しくありません。 全てのタグは、自己終了の形式または対応する終了タグ( <code></MyComponent></code> )で閉じるべきです。</p>
|
||||
|
||||
<blockquote>
|
||||
<p>注意:</p>
|
||||
|
||||
<p>全てのReactコンポーネントは <code><div /></code> のように自己終了タグになり得ます。 <code><div></div></code> もまた同様です。</p>
|
||||
</blockquote>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/tips/if-else-in-JSX-ja-JP.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/tips/maximum-number-of-jsx-root-nodes-ja-JP.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="https://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>
|
||||
Reference in New Issue
Block a user