mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Travis CI
542 lines
29 KiB
HTML
542 lines
29 KiB
HTML
<!DOCTYPE html>
|
||
<!--[if IE]><![endif]-->
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
<title>Top-Level API | React</title>
|
||
<meta name="viewport" content="width=device-width">
|
||
<meta property="og:title" content="Top-Level API | React">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://facebook.github.io/react/docs/top-level-api-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 src="//use.typekit.net/vqa1hcx.js"></script>
|
||
<script>try{Typekit.load();}catch(e){}</script>
|
||
|
||
<!--[if lte IE 8]>
|
||
<script src="/react/js/html5shiv.min.js"></script>
|
||
<script src="/react/js/es5-shim.min.js"></script>
|
||
<script src="/react/js/es5-sham.min.js"></script>
|
||
<![endif]-->
|
||
<script src="/react/js/codemirror.js"></script>
|
||
<script src="/react/js/javascript.js"></script>
|
||
<script src="/react/js/react.js"></script>
|
||
<script src="/react/js/react-dom.js"></script>
|
||
<script src="/react/js/babel-browser.min.js"></script>
|
||
<script src="/react/js/live_editor.js"></script>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="container">
|
||
|
||
<div class="nav-main">
|
||
<div class="wrap">
|
||
<a class="nav-home" href="/react/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>
|
||
<li><a href="https://facebook.github.io/react-native/">React Native</a></li>
|
||
</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="https://github.com/facebook/react/wiki/Complementary-Tools" class="external">Complementary Tools</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="https://github.com/facebook/react/wiki/Examples" class="external">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">Refs to Components</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/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>
|
||
|
||
<li>
|
||
<a href="/react/docs/shallow-compare.html">Shallow Compare</a>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/advanced-performance.html">Advanced Performance</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/context.html">Context</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/webcomponents.html">Web Components</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" class="external">Flux Overview</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="https://facebook.github.io/flux/docs/todo-list.html" class="external">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/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>
|
||
Top-Level API
|
||
<a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs/docs/ref-01-top-level-api.ja-JP.md" target="_blank">Edit on GitHub</a>
|
||
</h1>
|
||
<div class="subHeader"></div>
|
||
|
||
<h2><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h2>
|
||
<p><code>React</code> はReactのライブラリに対するエントリーポイントです。事前にビルドされたパッケージを使用する場合は、グローバルで使用可能です。CommonJSのモジュールを使用する場合は、 <code>require()</code> できます。</p>
|
||
<h3><a class="anchor" name="react.component"></a>React.Component <a class="hash-link" href="#react.component">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Component</span>
|
||
</code></pre></div>
|
||
<p>これは、ES6のクラスを使用して定義されている場合の、Reactコンポーネントに対する基底クラスです。ReactでES6のクラスを使用する方法については、<a href="/react/docs/reusable-components-ja-JP.html#es6-classes">再利用可能なコンポーネント</a>をご覧ください。基底クラスからどのメソッドが実際に提供されるかについては、<a href="/react/docs/component-api-ja-JP.html">コンポーネントAPI</a>をご覧ください。</p>
|
||
<h3><a class="anchor" name="react.createclass"></a>React.createClass <a class="hash-link" href="#react.createclass">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">ReactClass</span> <span class="nx">createClass</span><span class="p">(</span><span class="nx">object</span> <span class="nx">specification</span><span class="p">)</span>
|
||
</code></pre></div>
|
||
<p>与えられた仕様に基づいてコンポーネントクラスを作成します。コンポーネントは <strong>ある単一の</strong> 子要素を返す <code>render</code> メソッドを実行します。その子要素は勝手に深い子要素の構造を保持しています。コンポーネントが標準的なプロトタイプのクラスと異なっている部分は、newを呼ぶ必要がないということです。それらは内部で（newを行う）インスタンスを構築する便利なラッパーです。</p>
|
||
|
||
<p>specificationオブジェクトについての情報は、<a href="/react/docs/component-specs-ja-JP.html">コンポーネントのスペックとライフサイクル</a>をご覧ください。</p>
|
||
<h3><a class="anchor" name="react.createelement"></a>React.createElement <a class="hash-link" href="#react.createelement">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">ReactElement</span> <span class="nx">createElement</span><span class="p">(</span>
|
||
<span class="nx">string</span><span class="o">/</span><span class="nx">ReactClass</span> <span class="nx">type</span><span class="p">,</span>
|
||
<span class="p">[</span><span class="nx">object</span> <span class="nx">props</span><span class="p">],</span>
|
||
<span class="p">[</span><span class="nx">children</span> <span class="p">...]</span>
|
||
<span class="p">)</span>
|
||
</code></pre></div>
|
||
<p>与えられた型の <code>ReactElement</code> を作成し、返します。type引数はhtmlタグ名（例えば、'div'、'span'など）の文字列にも<code>ReactClass</code>（<code>React.createClass</code> によって作成される）にもなり得ます。</p>
|
||
<h3><a class="anchor" name="react.cloneelement"></a>React.cloneElement <a class="hash-link" href="#react.cloneelement">#</a></h3><div class="highlight"><pre><code class="language-text" data-lang="text">ReactElement cloneElement(
|
||
ReactElement element,
|
||
[object props],
|
||
[children ...]
|
||
)
|
||
</code></pre></div>
|
||
<p><code>element</code> をスターティングポイントとして使用する新しい <code>ReactElement</code> をクローンして返します。
|
||
結果として生まれる要素はオリジナルの要素のpropsと新しいpropsを暗にマージしたものを保持しています。新しい子要素は現存する子要素を置き換えます。 <code>React.addons.cloneWithProps</code> と異なり、オリジナルの要素から得られた <code>key</code> と <code>ref</code> は保存されます。（<code>cloneWithProps</code> とは異なり）propsをマージする際に特別な動きは行いません。詳細については、<a href="/react/blog/2015/03/03/react-v0.13-rc2.html">v0.13 RC2 blog記事</a>をご覧ください。</p>
|
||
<h3><a class="anchor" name="react.createfactory"></a>React.createFactory <a class="hash-link" href="#react.createfactory">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">factoryFunction</span> <span class="nx">createFactory</span><span class="p">(</span>
|
||
<span class="nx">string</span><span class="o">/</span><span class="nx">ReactClass</span> <span class="nx">type</span>
|
||
<span class="p">)</span>
|
||
</code></pre></div>
|
||
<p>与えられた型のReactElementsを生成する関数を返します。 <code>React.createElement</code> と同様に、type引数はhtmlタグ名（例えば、'div'、'span'など）の文字列にも<code>ReactClass</code> にもなり得ます。</p>
|
||
<h3><a class="anchor" name="react.render"></a>React.render <a class="hash-link" href="#react.render">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">ReactComponent</span> <span class="nx">render</span><span class="p">(</span>
|
||
<span class="nx">ReactElement</span> <span class="nx">element</span><span class="p">,</span>
|
||
<span class="nx">DOMElement</span> <span class="nx">container</span><span class="p">,</span>
|
||
<span class="p">[</span><span class="kd">function</span> <span class="nx">callback</span><span class="p">]</span>
|
||
<span class="p">)</span>
|
||
</code></pre></div>
|
||
<p>与えられた <code>container</code> によってReactElementをDOMにレンダリングし、コンポーネントへの参照を返します。</p>
|
||
|
||
<p>もしReactElementが事前に <code>container</code> にレンダリングされていた場合は、更新を行い、DOMが最新のReactのコンポーネントを表すように変化させます。</p>
|
||
|
||
<p>オプションのコールバックが与えられた場合は、コンポーネントがレンダリングされたり、更新された後に実行されます。</p>
|
||
|
||
<blockquote>
|
||
<p>注意:
|
||
<code>React.render()</code> は渡されたコンテナーノードの内容を制御します。内部に存在するDOM要素は最初に呼ばれた際に置き換えられます。その後に呼ばれた場合は、ReactのDOMの差分アルゴリズムを使用して、効率的に更新されます。</p>
|
||
|
||
<p><code>React.render()</code> はコンテナーノードの変更は行いません（コンテナの子要素のみ変更を行います）。今後、存在する子要素を上書きすることなく、存在するDOMノードにコンポーネントを挿入することが可能になるでしょう。</p>
|
||
</blockquote>
|
||
<h3><a class="anchor" name="react.unmountcomponentatnode"></a>React.unmountComponentAtNode <a class="hash-link" href="#react.unmountcomponentatnode">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">unmountComponentAtNode</span><span class="p">(</span><span class="nx">DOMElement</span> <span class="nx">container</span><span class="p">)</span>
|
||
</code></pre></div>
|
||
<p>マウントされたReactのコンポーネントをDOMから削除し、そのイベントハンドラとstateをクリーンアップします。コンテナにコンポーネントがマウントされていない場合は、この関数を呼んでも何も行われません。コンポーネントがアンマウントされた場合は <code>true</code> を返し、アンマウントするコンポーネントが存在しない場合は <code>false</code> を返します。</p>
|
||
<h3><a class="anchor" name="react.rendertostring"></a>React.renderToString <a class="hash-link" href="#react.rendertostring">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">string</span> <span class="nx">renderToString</span><span class="p">(</span><span class="nx">ReactElement</span> <span class="nx">element</span><span class="p">)</span>
|
||
</code></pre></div>
|
||
<p>ReactElementを最初にHTMLにレンダリングします。これはサーバでのみ使用されるべきです。ReactはHTML文字列を返します。このメソッドを、サーバでHTMLを生成し、最初のリクエストに対してマークアップを送るのに使用することができます。そうすることで、ページロードが速くなり、サーチエンジンはSEOの目的でページをクロールします。</p>
|
||
|
||
<p>既にサーバでレンダリングされたマークアップを保持しているノードで <code>React.render()</code> を呼んだ場合は、Reactはそれを保護し、イベントハンドラを加えます。そうすることで、最初のローディングのパフォーマンスがとても良くなります。</p>
|
||
<h3><a class="anchor" name="react.rendertostaticmarkup"></a>React.renderToStaticMarkup <a class="hash-link" href="#react.rendertostaticmarkup">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">string</span> <span class="nx">renderToStaticMarkup</span><span class="p">(</span><span class="nx">ReactElement</span> <span class="nx">element</span><span class="p">)</span>
|
||
</code></pre></div>
|
||
<p><code>renderToString</code> に似ていますが、Reactが内部で使用する <code>data-react-id</code> のような外部のDOM属性を作成しません。Reactを、単純な静的なページを生成するために使用したい場合は有用です。外部の属性を取り除くことでメモリを節約することができます。</p>
|
||
<h3><a class="anchor" name="react.isvalidelement"></a>React.isValidElement <a class="hash-link" href="#react.isvalidelement">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">isValidElement</span><span class="p">(</span><span class="o">*</span> <span class="nx">object</span><span class="p">)</span>
|
||
</code></pre></div>
|
||
<p>オブジェクトがReactElementであるかどうか調査します。</p>
|
||
<h3><a class="anchor" name="react.finddomnode"></a>React.findDOMNode <a class="hash-link" href="#react.finddomnode">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">DOMElement</span> <span class="nx">findDOMNode</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">component</span><span class="p">)</span>
|
||
</code></pre></div>
|
||
<p>このコンポーネントがDOMにマウントされた場合は、対応するネイティブブラウザのDOM要素を返します。このメソッドはDOMの外の値を読み込む場合に有用です。例えば、formフィールドの値やDOMの測定を行う場合があります。 <code>render</code> が <code>null</code> や <code>false</code> を返した場合は、 <code>findDOMNode</code> は <code>null</code> を返します。</p>
|
||
<h3><a class="anchor" name="react.dom"></a>React.DOM <a class="hash-link" href="#react.dom">#</a></h3>
|
||
<p><code>React.DOM</code> はDOMコンポーネントのための <code>React.createElement</code> の周りの便利なラッパーを提供します。JSXを使用しない場合にのみ使用すべきです。例えば、 <code>React.DOM.div(null, 'Hello World!')</code> のように。</p>
|
||
<h3><a class="anchor" name="react.proptypes"></a>React.PropTypes <a class="hash-link" href="#react.proptypes">#</a></h3>
|
||
<p><code>React.PropTypes</code> はコンポーネントに与えられたpropsをバリデーションするためにコンポーネントの <code>propTypes</code> と使用できる型を含んでいます。 <code>propTypes</code> についての更なる情報は、<a href="/react/docs/reusable-components-ja-JP.html">再利用可能なコンポーネント</a>をご覧ください。</p>
|
||
<h3><a class="anchor" name="react.children"></a>React.Children <a class="hash-link" href="#react.children">#</a></h3>
|
||
<p><code>React.Children</code> は <code>this.props.children</code> の不透明なデータ構造を扱うユーティリティを提供します。</p>
|
||
<h4><a class="anchor" name="react.children.map"></a>React.Children.map <a class="hash-link" href="#react.children.map">#</a></h4><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">object</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Children</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">object</span> <span class="nx">children</span><span class="p">,</span> <span class="kd">function</span> <span class="nx">fn</span> <span class="p">[,</span> <span class="nx">object</span> <span class="nx">thisArg</span><span class="p">])</span>
|
||
</code></pre></div>
|
||
<p>全ての <code>children</code> を含む子要素に対して、 <code>fn</code> を実行します。 <code>this</code> は <code>thisArg</code> にセットされます。 <code>children</code> がネストしたオブジェクトや配列だった場合は、実行されません。 <code>fn</code> はコンテナのオブジェクトから渡されません。子要素が <code>null</code> か <code>undefined</code> だった場合は、空のオブジェクトではなく <code>null</code> か <code>undefined</code> を返します。</p>
|
||
<h4><a class="anchor" name="react.children.foreach"></a>React.Children.forEach <a class="hash-link" href="#react.children.foreach">#</a></h4><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">Children</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">object</span> <span class="nx">children</span><span class="p">,</span> <span class="kd">function</span> <span class="nx">fn</span> <span class="p">[,</span> <span class="nx">object</span> <span class="nx">thisArg</span><span class="p">])</span>
|
||
</code></pre></div>
|
||
<p><code>React.Children.map()</code> に似ていますが、オブジェクトを返しはしません。</p>
|
||
<h4><a class="anchor" name="react.children.count"></a>React.Children.count <a class="hash-link" href="#react.children.count">#</a></h4><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">number</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Children</span><span class="p">.</span><span class="nx">count</span><span class="p">(</span><span class="nx">object</span> <span class="nx">children</span><span class="p">)</span>
|
||
</code></pre></div>
|
||
<p><code>children</code> の中のコンポーネントの合計数を返します。 <code>map</code> や <code>forEach</code> に渡されるコールバックが実行される数と等しくなります。</p>
|
||
<h4><a class="anchor" name="react.children.only"></a>React.Children.only <a class="hash-link" href="#react.children.only">#</a></h4><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">object</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Children</span><span class="p">.</span><span class="nx">only</span><span class="p">(</span><span class="nx">object</span> <span class="nx">children</span><span class="p">)</span>
|
||
</code></pre></div>
|
||
<p><code>children</code> の単一の子要素を返します。それ以外の場合は例外をスローします。</p>
|
||
|
||
|
||
<div class="docs-prevnext">
|
||
|
||
|
||
<a class="docs-next" href="/react/docs/component-api-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–2016 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>
|