mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Travis CI
592 lines
30 KiB
HTML
592 lines
30 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>Отображение данных | 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/displaying-data-ru-RU.html">
|
||
<meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
|
||
<meta property="og:description" content="A JavaScript library for building user interfaces">
|
||
<meta property="fb:app_id" content="623268441017527">
|
||
|
||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||
<link rel="alternate" type="application/rss+xml" title="React" href="https://facebook.github.io/react/feed.xml">
|
||
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
|
||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||
<link rel="stylesheet" href="/react/css/react.css">
|
||
|
||
<script src="//use.typekit.net/vqa1hcx.js"></script>
|
||
<script>try{Typekit.load();}catch(e){}</script>
|
||
|
||
<!--[if lte IE 8]>
|
||
<script src="/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 type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
|
||
<script src="/react/js/codemirror.js"></script>
|
||
<script src="/react/js/javascript.js"></script>
|
||
<script src="/react/js/xml.js"></script>
|
||
<script src="/react/js/jsx.js"></script>
|
||
<script src="/react/js/react.js"></script>
|
||
<script src="/react/js/react-dom.js"></script>
|
||
<script src="/react/js/babel.min.js"></script>
|
||
<script src="/react/js/live_editor.js"></script>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="container">
|
||
|
||
<div class="nav-main">
|
||
<div class="wrap">
|
||
<a class="nav-home" href="/react/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>
|
||
<li>
|
||
<input id="algolia-doc-search" type="text" placeholder="Search docs..." />
|
||
</li>
|
||
</ul>
|
||
|
||
<ul class="nav-site nav-site-external">
|
||
<li><a href="https://github.com/facebook/react">GitHub</a></li>
|
||
<li><a href="https://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>
|
||
|
||
<ul>
|
||
|
||
<li>
|
||
<a href="/react/docs/language-tooling.html">Language Tooling</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/package-management.html">Package Management</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/environments.html">Server-side Environments</a>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
</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>
|
||
|
||
|
||
<!-- 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>
|
||
|
||
|
||
<!-- Contributing Nav -->
|
||
|
||
<div class="nav-docs-section">
|
||
<h3>Contributing</h3>
|
||
<ul>
|
||
|
||
<li>
|
||
<a href="/react/contributing/how-to-contribute.html">How to Contribute</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/contributing/codebase-overview.html">Codebase Overview</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/contributing/implementation-notes.html">Implementation Notes</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/contributing/design-principles.html">Design Principles</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<div class="inner-content">
|
||
<a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs/docs/02-displaying-data.ru-RU.md" target="_blank">Edit on GitHub</a>
|
||
<h1>
|
||
Отображение данных
|
||
</h1>
|
||
<div class="subHeader"></div>
|
||
|
||
<p>Главная задача интерфейса — это отображать данные. React делает это легко и обновляет интерфейс сразу, как только изменятся данные.</p>
|
||
<h2><a class="anchor" name="Начало"></a>Начало <a class="hash-link" href="#Начало">#</a></h2>
|
||
<p>Давайте рассмотрим простой пример. Создайте файл <code>hello-react.html</code> со следующим текстом:</p>
|
||
<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://unpkg.com/react@15.3.2/dist/react.js"</span><span class="nt">></script></span>
|
||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"</span><span class="nt">></script></span>
|
||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://unpkg.com/babel-core@5.8.38/browser.min.js"</span><span class="nt">></script></span>
|
||
<span class="nt"></head></span>
|
||
<span class="nt"><body></span>
|
||
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"example"</span><span class="nt">></div></span>
|
||
<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/babel"</span><span class="nt">></span>
|
||
|
||
<span class="c1">// ** Ваш код будет здесь! **</span>
|
||
|
||
<span class="nt"></script></span>
|
||
<span class="nt"></body></span>
|
||
<span class="nt"></html></span>
|
||
</code></pre></div>
|
||
<p>Добавим в этот шаблон немного JavaScript. Замените комментарий на следующий JSX-код:</p>
|
||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">HelloWorld</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||
<span class="k">return</span> <span class="p">(</span>
|
||
<span class="o"><</span><span class="nx">p</span><span class="o">></span>
|
||
<span class="nx">Hello</span><span class="p">,</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">placeholder</span><span class="o">=</span><span class="s2">"Your name here"</span> <span class="o">/>!</span>
|
||
<span class="nx">It</span> <span class="nx">is</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">date</span><span class="p">.</span><span class="nx">toTimeString</span><span class="p">()}</span>
|
||
<span class="o"><</span><span class="err">/p></span>
|
||
<span class="p">);</span>
|
||
<span class="p">}</span>
|
||
<span class="p">});</span>
|
||
|
||
<span class="nx">setInterval</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
|
||
<span class="o"><</span><span class="nx">HelloWorld</span> <span class="nx">date</span><span class="o">=</span><span class="p">{</span><span class="k">new</span> <span class="nb">Date</span><span class="p">()}</span> <span class="o">/></span><span class="p">,</span>
|
||
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'example'</span><span class="p">)</span>
|
||
<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 сам отлично понимает что надо делать и обновляет элементы на странице по мере необходимости.</p>
|
||
|
||
<p>Суть в том, что React не меняет DOM-дерево до тех пор, пока это не потребуется. <strong>Чтобы отразить изменения, React использует быстрое внутреннее представление DOM-дерева и просчитывает как его изменить наиболее эффективно</strong>.</p>
|
||
|
||
<p>Передаваемые в компонент данные называются <code>props</code> — сокращенно от "properties". В JSX коде они передаются как атрибуты компонента. Считайте, что компонент получает <code>props</code> только для чтения. <strong>Никогда не перезаписывайте значения <code>this.props</code> внутри компонента.</strong></p>
|
||
<h2><a class="anchor" name="Компоненты-как-функции"></a>Компоненты как функции <a class="hash-link" href="#Компоненты-как-функции">#</a></h2>
|
||
<p>Компоненты React — довольно простые сущности. Можно считать их обыкновенными функциями, которые принимают на входе <code>props</code> и <code>state</code> (см. далее) и возвращают HTML. Если помнить об этом, то компоненты становятся простыми для понимания.</p>
|
||
|
||
<blockquote>
|
||
<p>Замечание:</p>
|
||
|
||
<p><strong>Есть одно ограничение</strong>: Компоненты React умеют возвращать только один узел. Если вам надо вернуть сразу несколько, они <em>должны</em> быть обернуты в один корневой узел.</p>
|
||
</blockquote>
|
||
<h2><a class="anchor" name="Синтаксис-jsx"></a>Синтаксис JSX <a class="hash-link" href="#Синтаксис-jsx">#</a></h2>
|
||
<p>Мы убеждены, что компоненты — самый подходящий способ разделения ответственностей, гораздо более удобный чем "шаблоны" и "вынесение логики на страницу". Мы считаем, что разметка и код, который её генерирует, неотделимы друг от друга. Плюс, логика на странице часто бывает запутанной, и использование шаблонизаторов, чтобы описать её, только затрудняет работу.</p>
|
||
|
||
<p>Мы решили, что лучшим вариантом будет генерировать HTML и деревья компонентов прямо из JS кода. Так вы сможете зайдействовать всю выразительную мощь современного языка программирования для создания интерфейсов.</p>
|
||
|
||
<p>А чтобы упростить создание узлов дерева, мы ввели <strong>опциональный</strong> HTML-подобный синтаксис.</p>
|
||
|
||
<p><strong>JSX позволяет вам создавать JavaScript объекты используя синтаксис HTML</strong>. Для генерации ссылки в React вы напишете на чистом JavaScript:</p>
|
||
|
||
<p><code>React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello!')</code></p>
|
||
|
||
<p>С JSX это станет:</p>
|
||
|
||
<p><code><a href="https://facebook.github.io/react/">Hello!</a></code></p>
|
||
|
||
<p>Мы установили, что с JSX создавать React приложения проще, и дизайнеров как правило устраивает его синтаксис. Но у разных людей разные предпочтения, поэтому стоит сказать, что <strong>JSX необязателен при работе с React.</strong></p>
|
||
|
||
<p>JSX сам по себе очень прост. Чтобы узнать о нем больше, почитайте <a href="/react/docs/jsx-in-depth.html">подробно про JSX</a>. Или можете попробовать его в <a href="https://babeljs.io/repl/">Babel REPL</a>.</p>
|
||
|
||
<p>JSX похож на HTML, но но имеет существенные отличия. Почитайте про <a href="/react/docs/jsx-gotchas.html">подводные камни JSX</a>, чтобы понять их ключевые различия.</p>
|
||
|
||
<p><a href="http://babeljs.io/docs/setup/">Babel предлагает несколько способов начать работу с JSX</a>, от консольных утилит до интеграций с Ruby on Rails. Выберите тот инструмент, который лучше всего вам подходит.</p>
|
||
<h2><a class="anchor" name="react-без-использования-jsx"></a>React без использования JSX <a class="hash-link" href="#react-без-использования-jsx">#</a></h2>
|
||
<p>JSX полностью опционален; вам совсем необязательно использовать его вместе с React. Вы можете создавать React-элементы на чистом JavaScript используя функцию <code>React.createElement</code>, которая принимает имя тега или компонента, объект со свойствами, и набор необязательных дочерних элементов.</p>
|
||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">child1</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'li'</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="s1">'First Text Content'</span><span class="p">);</span>
|
||
<span class="kd">var</span> <span class="nx">child2</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'li'</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="s1">'Second Text Content'</span><span class="p">);</span>
|
||
<span class="kd">var</span> <span class="nx">root</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'ul'</span><span class="p">,</span> <span class="p">{</span> <span class="nx">className</span><span class="o">:</span> <span class="s1">'my-list'</span> <span class="p">},</span> <span class="nx">child1</span><span class="p">,</span> <span class="nx">child2</span><span class="p">);</span>
|
||
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="nx">root</span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'example'</span><span class="p">));</span>
|
||
</code></pre></div>
|
||
<p>Для удобства, вы можете создать сокращенные фабричные функции, чтобы создавать React-элементы из ваших собственных компонентов.</p>
|
||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Factory</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createFactory</span><span class="p">(</span><span class="nx">ComponentClass</span><span class="p">);</span>
|
||
<span class="p">...</span>
|
||
<span class="kd">var</span> <span class="nx">root</span> <span class="o">=</span> <span class="nx">Factory</span><span class="p">({</span> <span class="nx">custom</span><span class="o">:</span> <span class="s1">'prop'</span> <span class="p">});</span>
|
||
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="nx">root</span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'example'</span><span class="p">));</span>
|
||
</code></pre></div>
|
||
<p>А для базовых HTML тегов в React уже есть встроенные фабрики:</p>
|
||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">root</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">ul</span><span class="p">({</span> <span class="nx">className</span><span class="o">:</span> <span class="s1">'my-list'</span> <span class="p">},</span>
|
||
<span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">li</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="s1">'Text Content'</span><span class="p">)</span>
|
||
<span class="p">);</span>
|
||
</code></pre></div>
|
||
|
||
<div class="docs-prevnext">
|
||
|
||
<a class="docs-prev" href="/react/docs/why-react-ru-RU.html">← Prev</a>
|
||
|
||
|
||
<a class="docs-next" href="/react/docs/jsx-in-depth.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/sdk.js#xfbml=1&version=v2.6&appId=623268441017527";
|
||
fjs.parentNode.insertBefore(js, fjs);
|
||
}(document, 'script', 'facebook-jssdk'));
|
||
|
||
docsearch({
|
||
apiKey: '36221914cce388c46d0420343e0bb32e',
|
||
indexName: 'react',
|
||
inputSelector: '#algolia-doc-search'
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|