mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
New Documentation
This commit is contained in:
Kevin Lacker
committed by
Dan Abramov
Dan Abramov
parent
8cac523bea
commit
455d2d1b48
@@ -1,28 +0,0 @@
|
||||
---
|
||||
id: why-react-de-DE
|
||||
title: Warum React?
|
||||
permalink: docs/why-react-de-DE.html
|
||||
---
|
||||
React ist eine JavaScript-Bibliothek von Facebook und Instagram für Benutzeroberflächen. Man kann sich React als das **V** in **[MVC](https://de.wikipedia.org/wiki/Model_View_Controller)** vorstellen.
|
||||
|
||||
Wir haben React für folgende Aufgabe entwickelt: **umfangreiche Anwendungen zu bauen, deren Daten sich zeitlich ändern**.
|
||||
|
||||
## Einfach
|
||||
|
||||
Beschreibe, wie sich Deine App zu jedem gewünschten Zeitpunkt präsentieren soll und React kümmert sich um alle Benutzeroberflächen-Änderungen sobald sich die zugrundeliegenden Daten ändern.
|
||||
|
||||
## Deklarativ
|
||||
|
||||
Bei Datenveränderungen drückt React bildlich die "Aktualisieren"-Taste und versteht sich darauf, nur die veränderten Elemente zu erneuern.
|
||||
|
||||
## Baue zusammensetzbare Komponenten
|
||||
|
||||
React unterstützt die Entwicklung wiederverwendbarer Komponenten. Tatsächlich machst Du in React nichts anderes, als Komponenten zu bauen. Dank ihrer Kapselung erleichtern Komponenten die Wiederverwendung und das Testen von Code sowie die Trennung der Belange.
|
||||
|
||||
## Gib' ihnen fünf Minuten
|
||||
|
||||
React hinterfragt eine ganze Reihe konventioneller Standpunkte. Auf den ersten Blick mögen einige Ideen verrückt klingen. [Gib' ihnen fünf Minuten](https://signalvnoise.com/posts/3124-give-it-five-minutes) während Du diese Anleitung liest; diese verrückten Ideen halfen dabei, tausende von Komponenten innerhalb und außerhalb von Facebook und Instagram zu entwickeln.
|
||||
|
||||
## Erfahre mehr
|
||||
|
||||
Erfahre mehr über unsere Motivation zur Entwicklung von React in [diesem Blogeintrag](/react/blog/2013/06/05/why-react.html).
|
||||
@@ -1,29 +0,0 @@
|
||||
---
|
||||
id: why-react-it-IT
|
||||
title: Perché React?
|
||||
permalink: docs/why-react-it-IT.html
|
||||
next: displaying-data-it-IT.html
|
||||
---
|
||||
React è una libreria JavaScript per creare interfacce utente scritta da Facebook e Instagram. A molti piace pensare a React come alla **V** di **[MVC](https://it.wikipedia.org/wiki/Model-View-Controller)**.
|
||||
|
||||
Abbiamo costruito React per risolvere un problema: **costruire applicazioni di grandi dimensioni con dati che cambiano nel tempo**.
|
||||
|
||||
## Semplice
|
||||
|
||||
Dichiara semplicemente come la tua app debba apparire in ogni istante, e React gestirà automaticamente tutti gli aggiornamenti della UI quando i dati sottostanti cambiano.
|
||||
|
||||
## Dichiarativo
|
||||
|
||||
Quando i dati cambiano, React preme idealmente il bottone "aggiorna", e sa come aggiornare soltanto le parti che sono cambiate.
|
||||
|
||||
## Costruisci Componenti Componibili
|
||||
|
||||
React è basato interamente sulla costruzione di componenti riutilizzabili. Infatti, con React l'*unica* cosa che fai è costruire componenti. Dal momento che sono così incapsulati, i componenti facilitano il riutilizzo del codice, la verifica e la separazione dei concetti.
|
||||
|
||||
## Dagli Cinque Minuti
|
||||
|
||||
React sfida molte convenzioni, e a prima vista alcune delle idee potrebbero sembrare folli. [Dagli cinque minuti](https://signalvnoise.com/posts/3124-give-it-five-minutes) mentre leggi questa guida; quelle idee folli hanno funzionato per costruire migliaia di componenti sia dentro che fuori da Facebook e Instagram.
|
||||
|
||||
## Per Approfondire
|
||||
|
||||
Puoi approfondire le nostre motivazioni per la costruzione di React leggendo [questo articolo del blog](/react/blog/2013/06/05/why-react.html).
|
||||
@@ -1,29 +0,0 @@
|
||||
---
|
||||
id: why-react-ja-JP
|
||||
title: なぜReactを使うのでしょうか？
|
||||
permalink: docs/why-react-ja-JP.html
|
||||
next: displaying-data-ja-JP.html
|
||||
|
||||
---
|
||||
ReactはFacebookとInstagramによって作られたユーザーインターフェイスを構築するためのJavaScriptのライブラリです。
|
||||
多くの人がReactを **[MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)** の **V** だと考えています。
|
||||
私たちはReactをある1つの問題を解決するために使います。それは、 **絶えず変化していくデータとともに大きなアプリケーションを構築する** ことです。それを行うために、Reactは2つの主要な考えを持っています。
|
||||
|
||||
## 単純さ
|
||||
|
||||
どのタイミングにおいても、アプリケーションがどのように見えるべきかを単純に表現し、Reactは根底にあるデータの変更があった場合に自動的に全てのUIを管理します。
|
||||
|
||||
## 叙述的
|
||||
|
||||
データが変わった時、Reactは概念的に「リフレッシュ」ボタンを押し、変わった箇所のみを検知します。
|
||||
|
||||
## コンポーザブルなコンポーネントの構築
|
||||
Reactは再利用可能なコンポーネントを構築するものです。実際、Reactを用いてあなたがする *ただ1つの* ことは、コンポーネントを構築することです。Reactは無駄な部分を省いてあるので、コンポーネントはコードの再利用、テスト、関心の分離を可能にします。
|
||||
|
||||
## 5分ください
|
||||
|
||||
Reactは型にはまった知識にも挑戦し、ちらっと見ただけではおかしく見えるアイディアもあるでしょう。このガイドを読むのに[5分ください](https://signalvnoise.com/posts/3124-give-it-five-minutes) 。それらのおかしく見えるアイディアはFacebookやInstagramの中と外の両方で何千ものコンポーネントを構築するために動いています。
|
||||
|
||||
## 更なる学習
|
||||
|
||||
[このブログの投稿](/react/blog/2013/06/05/why-react.html)で、私たちがReactを構築するモチベーションについて更に学習することができます。
|
||||
@@ -1,30 +0,0 @@
|
||||
---
|
||||
id: why-react-ko-KR
|
||||
title: 왜 React인가?
|
||||
permalink: docs/why-react-ko-KR.html
|
||||
next: displaying-data-ko-KR.html
|
||||
---
|
||||
|
||||
React는 페이스북과 인스타그램에서 사용자 인터페이스를 구성하기 위해 만들어진 라이브러리입니다. 많은 사람들은 React를 **[MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)** 에서의 **V** 로 생각하는 경향이 있습니다.
|
||||
|
||||
우리는 단 하나의 문제를 해결하기 위해 React를 만들었습니다: **지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기.** 이 문제를 해결하기 위해, React는 두가지 컨셉을 도입했습니다.
|
||||
|
||||
## 단순함
|
||||
|
||||
당신의 애플리케이션이 특정 시점에 어떻게 보여야 할지를 단순히 표현하는 것만으로, 데이터가 변할 때 React는 자동으로 모든 UI 업데이트를 관리해줍니다.
|
||||
|
||||
## 선언적 문법
|
||||
|
||||
데이터가 변할 때 React는 "새로 고침" 버튼을 누르듯이 작동하며, 데이터의 바뀐 부분만을 업데이트할 수 있습니다.
|
||||
|
||||
## 구성적인 컴포넌트를 만드세요
|
||||
|
||||
React는 재사용 가능한 컴포넌트들을 만드는 데에 도움이 됩니다. 사실, React를 사용하면 *단지* 컴포넌트를 만드는 일만 하게 됩니다. 컴포넌트들은 잘 캡슐화되어 되어 있기 때문에, 컴포넌트들은 코드의 재사용성을 높이고, 테스트를 쉽게 해 주며, 관심 분리의 원칙(separation of concerns)을 지키게 해 줍니다.
|
||||
|
||||
## 5분만 투자하세요
|
||||
|
||||
React는 많은 관습적인 사고에 도전하며, 첫눈에 볼 때는 이상한 아이디어들의 모음이라고 생각할 수도 있습니다. 이 가이드를 읽기 위해 [5분만 투자하세요](https://signalvnoise.com/posts/3124-give-it-five-minutes); 그 이상한 아이디어들은 페이스북과 인스타그램 안팎의 수천 개의 컴포넌트들을 만드는 데에 사용되었기 때문입니다.
|
||||
|
||||
## 더 알아보기
|
||||
|
||||
[이 블로그 포스트](/react/blog/2013/06/05/why-react.html)에서 React를 만든 우리의 동기에 대해 알아볼 수 있습니다.
|
||||
@@ -1,29 +0,0 @@
|
||||
---
|
||||
id: why-react
|
||||
title: Why React?
|
||||
permalink: docs/why-react.html
|
||||
next: displaying-data.html
|
||||
---
|
||||
React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the **V** in **[MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)**.
|
||||
|
||||
We built React to solve one problem: **building large applications with data that changes over time**.
|
||||
|
||||
## Simple
|
||||
|
||||
Simply express how your app should look at any given point in time, and React will automatically manage all UI updates when your underlying data changes.
|
||||
|
||||
## Declarative
|
||||
|
||||
When the data changes, React conceptually hits the "refresh" button, and knows to only update the changed parts.
|
||||
|
||||
## Build Composable Components
|
||||
|
||||
React is all about building reusable components. In fact, with React the *only* thing you do is build components. Since they're so encapsulated, components make code reuse, testing, and separation of concerns easy.
|
||||
|
||||
## Give It Five Minutes
|
||||
|
||||
React challenges a lot of conventional wisdom, and at first glance some of the ideas may seem crazy. [Give it five minutes](https://signalvnoise.com/posts/3124-give-it-five-minutes) while reading this guide; those crazy ideas have worked for building thousands of components both inside and outside of Facebook and Instagram.
|
||||
|
||||
## Learn More
|
||||
|
||||
You can learn more about our motivations behind building React in [this blog post](/react/blog/2013/06/05/why-react.html).
|
||||
@@ -1,29 +0,0 @@
|
||||
---
|
||||
id: why-react-ru-RU
|
||||
title: Почему именно React?
|
||||
permalink: docs/why-react-ru-RU.html
|
||||
next: displaying-data-ru-RU.html
|
||||
---
|
||||
React — библиотека JavaScript для создания интерфейсов от команд Facebook и Instagram. Многие ассоциируют React с понятием **View** в паттерне **[MVC](https://ru.wikipedia.org/wiki/Model-View-Controller)**.
|
||||
|
||||
Мы делали React, чтобы решить одну важную задачу: **создавать действительно большие приложения с постоянно меняющимися данными**.
|
||||
|
||||
## Простота
|
||||
|
||||
С React вы всегда точно знаете как будет выглядеть ваше приложение, ведь как только изменятся данные, он мгновенно отобразит эти изменения в интерфейсе.
|
||||
|
||||
## Декларативность
|
||||
|
||||
Как только состояние приложения изменится, React будто нажимает кнопку "обновить" и точно знает, какие части интерфейса надо поменять, а какие нет. Никаких дополнительных инструкций и команд, React сам отслеживает изменения данных и реагирует на них.
|
||||
|
||||
## Создание компонентов, как строительных блоков приложения
|
||||
|
||||
По сути, разработка на React целиком состоит в создании таких компонентов. С React вы *только* тем и занимаетесь, что пишете новые компоненты, те самые строительные блоки, из которых будет строиться приложение. А поскольку они хорошо инскапсулированы, их удобно использовать повторно даже в других проектах, плюс такой код проще тестировать.
|
||||
|
||||
## Уделите этому 5 минут
|
||||
|
||||
React бросает вызов многим устоявшимся идеям и правилам, и на первый взгляд, некоторые из его идей выглядят по меньшей мере странными. [Уделите этому 5 минут](https://signalvnoise.com/posts/3124-give-it-five-minutes) пока читаете эту статью; эти безумные идеи нашли свое применение при создании тысяч компонентов не только для Facebook и Instagram, но и в других крупных проектах.
|
||||
|
||||
## Узнай больше
|
||||
|
||||
Вы можете больше узнать о причинах создания React [отсюда](/react/blog/2013/06/05/why-react.html).
|
||||
@@ -1,29 +0,0 @@
|
||||
---
|
||||
id: why-react-zh-CN
|
||||
title: 为什么使用 React?
|
||||
permalink: docs/why-react-zh-CN.html
|
||||
next: displaying-data-zh-CN.html
|
||||
---
|
||||
React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很多人选择将 React 认为是 **[MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)** 中的 **V**（视图）。
|
||||
|
||||
我们创造 React 是为了解决一个问题：**构建随着时间数据不断变化的大规模应用程序**。
|
||||
|
||||
### 简单
|
||||
|
||||
仅仅只要表达出你的应用程序在任一个时间点应该呈现的样子，然后当底层的数据变了，React 会自动处理所有用户界面的更新。
|
||||
|
||||
### 声明式 (Declarative)
|
||||
|
||||
数据变化后，React 概念上与点击“刷新”按钮类似，但仅会更新变化的部分。
|
||||
|
||||
## 构建可组合的组件
|
||||
|
||||
React 都是关于构建可复用的组件。事实上，通过 React 你*唯一*要做的事情就是构建组件。得益于其良好的封装性，组件使代码复用、测试和关注分离（separation of concerns）更加简单。
|
||||
|
||||
## 给它5分钟的时间
|
||||
|
||||
React挑战了很多传统的知识，第一眼看上去可能很多想法有点疯狂。当你阅读这篇指南，请[给它5分钟的时间](https://signalvnoise.com/posts/3124-give-it-five-minutes)；那些疯狂的想法已经帮助 Facebook 和 Instagram 从里到外创建了上千的组件了。
|
||||
|
||||
## 了解更多
|
||||
|
||||
你可以从这篇[博客](/react/blog/2013/06/05/why-react.html)了解更多我们创造 React 的动机。
|
||||
@@ -1,29 +0,0 @@
|
||||
---
|
||||
id: why-react-zh-TW
|
||||
title: Why React?
|
||||
permalink: docs/why-react-zh-TW.html
|
||||
next: displaying-data.html
|
||||
---
|
||||
React是Facebook和Instagram用來建立使用者介面的JavaScript函式庫. 很多人認為React就是處理 **[MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)**架構中 **V** 的部份.
|
||||
|
||||
我們建造React用來解決一個問題: **開發資料能隨時間頻繁更新的大型應用程式**.
|
||||
|
||||
## 簡單(Simple)
|
||||
|
||||
簡單意味著你所開發的應用程式外觀任何一部分都要能即時呈現, 並且當資料有所變動時React能自動管理所有UI的更新.
|
||||
|
||||
## 陳述(Declarative)
|
||||
|
||||
當資料改變時, React概念上就像是點擊了 "刷新" 的按鈕, 並且知道只需更新有改變的部份.
|
||||
|
||||
## 建立可組合的元件(Composable Components)
|
||||
|
||||
React就是在建造可重用的元件(Components). 事實上, 當你使用React時 *唯一* 在做的事就是建立元件(Components). 由於它們封裝性高,元件使得程式碼能夠易於重複使用, 測試, 並且容易做到讓關注點分離(separation of concerns easy).
|
||||
|
||||
## 指引(Give It Five Minutes)
|
||||
|
||||
React挑戰了許多傳統的觀念, 第一次乍看之下這些構想可能看起來有點瘋狂. [Give it five minutes](https://signalvnoise.com/posts/3124-give-it-five-minutes) 而當閱讀完這篇指引; 這些瘋狂的構想在Facebook和Instagram裡裡外外建立了數以千計的元件(components)之後被證明是可實行的.
|
||||
|
||||
## 更多學習資源
|
||||
|
||||
從這裡你能學習到更多建造React背後的動機 [this blog post](/react/blog/2013/06/05/why-react.html).
|
||||
@@ -1,129 +0,0 @@
|
||||
---
|
||||
id: displaying-data-it-IT
|
||||
title: Visualizzare Dati
|
||||
permalink: docs/displaying-data-it-IT.html
|
||||
prev: why-react-it-IT.html
|
||||
next: jsx-in-depth-it-IT.html
|
||||
---
|
||||
|
||||
L'attività più basilare che puoi effettuare con una UI è mostrare dei dati. React rende visualizzare dati semplice e mantiene automaticamente l'interfaccia aggiornata quando i dati cambiano.
|
||||
|
||||
|
||||
## Per Cominciare
|
||||
|
||||
Diamo un'occhiata ad un esempio davvero semplice. Creiamo un file dal nome `hello-react.html` con il codice seguente:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Hello React</title>
|
||||
<script src="https://unpkg.com/react@{{site.react_version}}/dist/react.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@{{site.react_version}}/dist/react-dom.js"></script>
|
||||
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="example"></div>
|
||||
<script type="text/babel">
|
||||
|
||||
// ** Il tuo codice va qui! **
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Nel resto della documentazione, ci concentreremo soltanto sul codice JavaScript e assumeremo che sia inserito in un modello come quello qui sopra. Sostituisci il commento segnaposto qui sopra con il seguente codice JSX:
|
||||
|
||||
```javascript
|
||||
var HelloWorld = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<p>
|
||||
Ciao, <input type="text" placeholder="Scrivi il tuo nome" />!
|
||||
È il {this.props.date.toTimeString()}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
setInterval(function() {
|
||||
ReactDOM.render(
|
||||
<HelloWorld date={new Date()} />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
}, 500);
|
||||
```
|
||||
|
||||
|
||||
## Aggiornamenti Reattivi
|
||||
|
||||
Apri `hello-react.html` in un browser web e scrivi il tuo nome nel campo di testo. Osserva che React cambia soltanto la stringa di testo dell'ora nella UI — ogni input che inserisci nel campo di testo rimane, anche se non hai scritto alcun codice che gestisce questo comportamento. React lo capisce da solo al tuo posto e fa la cosa giusta.
|
||||
|
||||
La maniera in cui siamo in grado di capirlo è che React non manipola il DOM a meno che non sia necessario. **Utilizza un DOM interno fittizio e veloce per effettuare confronti ed effettuare le mutazioni del DOM più efficienti al tuo posto.**
|
||||
|
||||
Gli input di questo componente sono chiamati `props` — breve per "properties". Sono passati come attributi nella sintassi JSX. Puoi pensare ad essi come immutabili nel contesto del componente, ovvero, **non assegnare mai `this.props`**.
|
||||
|
||||
|
||||
## I Componenti Sono Come Funzioni
|
||||
|
||||
I componenti React sono molto semplici. Puoi immaginarli come semplici funzioni che ricevono in ingresso `props` e `state` (discusso in seguito) e rendono HTML. Fatta questa premessa, i componenti sono molto semplici da descrivere.
|
||||
|
||||
> Nota:
|
||||
>
|
||||
> **Una limitazione**: i componenti React possono rendere soltanto un singolo nodo radice. Se desideri restituire nodi multipli, essi *devono* essere avvolti in un singolo nodo radice.
|
||||
|
||||
|
||||
## Sintassi JSX
|
||||
|
||||
Crediamo fermamente che i componenti sono la maniera corretta di separare i concetti anziché i "modelli" e la "logica di presentazione." Pensiamo che il markup e il codice che lo genera siano intimamente collegati. Inoltre, la logica di presentazione è solitamente molto complessa e usare un linguaggio di modello per esprimerla risulta dispendioso.
|
||||
|
||||
Abbiamo scoperto che la migliore soluzione a questo problema è generare HTML e un albero di componenti direttamente dal codice JavaScript in maniera da poter utilizzare tutta la potenza espressiva di un vero linguaggio di programmazione per costruire UI.
|
||||
|
||||
Per rendere il compito più facile, abbiamo aggiunto una semplice e **opzionale** sintassi simile all'HTML per creare questi nodi di albero React.
|
||||
|
||||
**JSX ti permette di creare oggetti JavaScript usando una sintassi HTML.** Per generare un collegamento in React usando puro JavaScript puoi scrivere:
|
||||
|
||||
`React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Ciao!')`
|
||||
|
||||
Con JSX ciò diventa:
|
||||
|
||||
`<a href="https://facebook.github.io/react/">Ciao!</a>`
|
||||
|
||||
Abbiamo scoperto che questo ha reso la costruzione di applicazioni React più semplice e i designer tendono a preferire la sintassi, ma ciascuno ha un diverso flusso di lavoro, quindi **JSX non è richiesto per utilizzare React.**
|
||||
|
||||
JSX è di dimensioni contenute. Per maggiori informazioni, consulta [JSX in profondità](/react/docs/jsx-in-depth-it-IT.html). Oppure osserva la trasformazione in tempo reale sulla [REPL di Babel](https://babeljs.io/repl/).
|
||||
|
||||
JSX è simile all'HTML, ma non proprio identico. Consulta la guida [JSX gotchas](/react/docs/jsx-gotchas-it-IT.html) per alcune differenze fondamentali.
|
||||
|
||||
[Babel offre una varietà di strumenti per cominciare a usare JSX](http://babeljs.io/docs/setup/), dagli strumenti a riga di comando alle integrazioni in Ruby on Rails. Scegli lo strumento che funziona meglio per te.
|
||||
|
||||
|
||||
## React senza JSX
|
||||
|
||||
JSX è completamente opzionale; non è necessario utilizzare JSX con React. Puoi creare elementi React in puro JavaScript usando `React.createElement`, che richiede un nome di tag o di componente, un oggetto di proprietà e un numero variabile di argomenti che rappresentano nodi figli opzionali.
|
||||
|
||||
```javascript
|
||||
var child1 = React.createElement('li', null, 'Primo Contenuto di Testo');
|
||||
var child2 = React.createElement('li', null, 'Secondo Contenuto di Testo');
|
||||
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
|
||||
ReactDOM.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
Per comodità, puoi creare funzioni factory scorciatoia per costruire elementi da componenti personalizzati.
|
||||
|
||||
```javascript
|
||||
var Factory = React.createFactory(ComponentClass);
|
||||
...
|
||||
var root = Factory({ custom: 'prop' });
|
||||
ReactDOM.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
React possiede già delle factory predefinite per i tag HTML comuni:
|
||||
|
||||
```javascript
|
||||
var root = React.DOM.ul({ className: 'my-list' },
|
||||
React.DOM.li(null, 'Contenuto di Testo')
|
||||
);
|
||||
```
|
||||
@@ -1,125 +0,0 @@
|
||||
---
|
||||
id: displaying-data-ja-JP
|
||||
title: データを表示する
|
||||
permalink: docs/displaying-data-ja-JP.html
|
||||
prev: why-react-ja-JP.html
|
||||
next: jsx-in-depth-ja-JP.html
|
||||
|
||||
---
|
||||
|
||||
UIについて、最も基本的なことは、いくつかのデータを表示することです。Reactはデータを表示し、変更された時にはインターフェースを最新の状態に自動的に保つことが簡単にできるようになっています。
|
||||
|
||||
## はじめに
|
||||
|
||||
本当に単純な例を見てみましょう。`hello-react.html` ファイルを以下のようなコードで作成してください。
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Hello React</title>
|
||||
<script src="https://unpkg.com/react@{{site.react_version}}/dist/react.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@{{site.react_version}}/dist/react-dom.js"></script>
|
||||
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="example"></div>
|
||||
<script type="text/babel">
|
||||
|
||||
// ** コードをここに書きます！ **
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
このドキュメントの中では、JavaScriptのコードにのみフォーカスします。そして、それが上のようなテンプレートに挿入されていると考えます。
|
||||
|
||||
```javascript
|
||||
var HelloWorld = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<p>
|
||||
Hello, <input type="text" placeholder="Your name here" />!
|
||||
It is {this.props.date.toTimeString()}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
setInterval(function() {
|
||||
ReactDOM.render(
|
||||
<HelloWorld date={new Date()} />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
}, 500);
|
||||
```
|
||||
|
||||
|
||||
## リアクティブなアップデート
|
||||
|
||||
`hello-react.html` をウェブブラウザで開き、テキストフィールドにあなたの名前を入力してください。ReactはUIのうち、時間の文字列しか変更しないことに注意してください。あなたがテキストフィールドに入力したものは残っています。あなたはそういったコードを書いていないのにも関わらずです。Reactはあなたのことを理解しており、正しいことを行います。
|
||||
|
||||
このことについて私たちが理解できる方法は、Reactは必要になるまで、DOMの操作を行わないということです。 **Reactは、DOMの変化を表現し、あなたにもっとも効率的なDOMの変化を見積もるために早い、内部のモックのDOMを使っています。**
|
||||
|
||||
このコンポーネントのインプットは `props` と呼ばれるものです。"properties" の省略形です。それらはJSXシンタックスの中でアトリビュートとして渡されます。それらはコンポーネントの中で不変と考えるべきで、 **`this.props` には書き込まないようにしてください**
|
||||
|
||||
## コンポーネントは関数のようなものです。
|
||||
|
||||
Reactのコンポーネントはとても単純です。それらは `props` や `state` （後述します）を取り、HTMLをレンダリングする単純な関数だと考えることができます。この考えの元、コンポーネントは簡単に理解することができます。
|
||||
|
||||
> 注意:
|
||||
>
|
||||
> **1つの制限**: Reactのコンポーネントは単一の最上位のノードだけをレンダリングします。複数のノードをリターンしたい場合は、単一の最上位のもので *ラップする必要があります* 。
|
||||
|
||||
## JSXシンタックス
|
||||
|
||||
私たちは関心を分離する正しい方法は「テンプレート」と「ディスプレイロジック」ではなくコンポーネントであると強く考えています。ビューを生成するマークアップとコードは密接につながっていると考えています。加えて、ディスプレイロジックはとても複雑になりえますし、ビューを表現するのにテンプレート言語を使うことはとてもややこしくなりえます。
|
||||
|
||||
私たちは、この問題の最適解は、UIを構築するのにリアルなプログラミング言語の表現力の全てを使うことができるように、JavaScriptのコードからHTMLやコンポーネントのツリーを直接生成することだと発見しました。
|
||||
|
||||
上記のことを簡単に行うために、私たちはReactのツリーノードを構築するためのとても単純で、 **オプショナルな** HTMLに似たシンタックスを加えました。
|
||||
|
||||
**JSXはHTMLのシンタックスを使ってJavaScriptのオブジェクトを構築するのを可能にします。** 純粋にJavaScriptを使ってReactでリンクを構築するには、以下のように書きます。
|
||||
|
||||
`React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello!')`
|
||||
|
||||
JSXでは、以下のように変換されます。
|
||||
|
||||
`<a href="https://facebook.github.io/react/">Hello!</a>`
|
||||
|
||||
以上のようなことで、Reactのアプリを作成するのは簡単になりましたし、デザイナーはこのシンタックスを好むようになると発見しました。しかし、人は自分自身のワークフローを持っているものです。 **JSXはReactを使う際に必ずしも必要ではありません。**
|
||||
|
||||
JSXはとても小さいです。さらに学ぶためには、[JSXの深層](/react/docs/jsx-in-depth-ja-JP.html)を参照ください。または、[ライブJSXコンパイラー](/react/jsx-compiler.html)で変換の動作を確認してください。
|
||||
|
||||
JSXはHTMLに似ていますが、正確に同じではありません。いくつかのキーの違いについては[JSXの理解](/react/docs/jsx-gotchas.html) をご覧ください。
|
||||
|
||||
JSXを初めて使う際に最も簡単なのは、ブラウザで `JSXTransformer` を使う方法です。これはプロダクションでは使わないことを強くお勧めします。コードは、コマンドラインの[react-tools](https://www.npmjs.com/package/react-tools)パッケージを使うことでプリコンパイルできます。
|
||||
|
||||
## JSXを使わないReact
|
||||
|
||||
JSXは完全にオプションです。Reactと一緒にJSXを使う必要はありません。`React.createElement` を使って、ただのJavaScriptでReactの要素を作ることもできます。それは、タグの名前やコンポーネント、プロパティのオブジェクト、いくつかのオプションの子要素をとります。
|
||||
|
||||
```javascript
|
||||
var child1 = React.createElement('li', null, 'First Text Content');
|
||||
var child2 = React.createElement('li', null, 'Second Text Content');
|
||||
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
|
||||
ReactDOM.render(root, document.getElementById('example'));
|
||||
```
|
||||
便利に書くために、カスタムコンポーネントで要素を作るために簡略した記法でファクトリー関数を作ることができます。
|
||||
|
||||
```javascript
|
||||
var Factory = React.createFactory(ComponentClass);
|
||||
...
|
||||
var root = Factory({ custom: 'prop' });
|
||||
ReactDOM.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
Reactはすでに、共通なHTMLのタグについてはビルトインの関数を持っています。
|
||||
|
||||
```javascript
|
||||
var root = React.DOM.ul({ className: 'my-list' },
|
||||
React.DOM.li(null, 'Text Content')
|
||||
);
|
||||
```
|
||||
@@ -1,124 +0,0 @@
|
||||
---
|
||||
id: displaying-data-ko-KR
|
||||
title: 데이터를 표시하기
|
||||
permalink: docs/displaying-data-ko-KR.html
|
||||
prev: why-react-ko-KR.html
|
||||
next: jsx-in-depth-ko-KR.html
|
||||
---
|
||||
|
||||
UI를 가지고 할 수 있는 가장 기초적인 것은 데이터를 표시하는 것입니다. React는 데이터를 표시하고 데이터가 변할 때마다 인터페이스를 최신의 상태로 자동으로 유지하기 쉽게 해 줍니다.
|
||||
|
||||
## 시작하기
|
||||
|
||||
정말 간단한 예제를 보도록 하죠. 다음과 같은 코드의 `hello-react.html` 파일을 만듭시다.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Hello React</title>
|
||||
<script src="https://unpkg.com/react@{{site.react_version}}/dist/react.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@{{site.react_version}}/dist/react-dom.js"></script>
|
||||
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="example"></div>
|
||||
<script type="text/babel">
|
||||
|
||||
// ** 코드는 여기에 작성하면 됩니다! **
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
문서의 나머지에서, 코드가 위와 같은 HTML 템플릿에 들어갔다고 가정하고 JavaScript 코드에만 집중할 것입니다. 위의 주석 부분을 다음과 같은 JSX 코드로 바꿔 보세요:
|
||||
|
||||
```javascript
|
||||
var HelloWorld = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<p>
|
||||
안녕, <input type="text" placeholder="이름을 여기에 작성하세요" />!
|
||||
지금 시간은 {this.props.date.toTimeString()} 입니다.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
setInterval(function() {
|
||||
ReactDOM.render(
|
||||
<HelloWorld date={new Date()} />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
}, 500);
|
||||
```
|
||||
|
||||
## 반응 적(Reactive) 업데이트
|
||||
|
||||
`hello-react.html` 파일을 웹 브라우저에서 열어 당신의 이름을 텍스트 필드에 써 보세요. React는 단지 시간을 표시하는 부분만을 바꿉니다 — 텍스트 필드 안에 입력한 것은 그대로 남아 있구요, 당신이 이 동작을 관리하는 그 어떤 코드도 쓰지 않았음에도 불구하고 말이죠. React는 그걸 올바른 방법으로 알아서 해줍니다.
|
||||
|
||||
우리가 이걸 할 수 있었던 건, React는 필요한 경우에만 DOM을 조작하기 때문입니다. **React는 빠른 React 내부의 DOM 모형을 이용하여 변경된 부분을 측정하고, 가장 효율적인 DOM 조작 방법을 계산해 줍니다.**
|
||||
|
||||
이 컴포넌트에 대한 입력은 `props` 라고 불립니다 — "properties" 를 줄인 것이죠. 그들은 JSX 문법에서는 어트리뷰트로서 전달됩니다. 당신은 `props` 를 컴포넌트 안에서 불변의(immutable) 엘리먼트로서 생각해야 하고, `this.props` 를 덮어씌우려고 해서는 안됩니다.
|
||||
|
||||
## 컴포넌트들은 함수와 같습니다
|
||||
|
||||
React 컴포넌트들은 매우 단순합니다. 당신은 그것들을 `props` 와 `state` (이것들은 나중에 언급할 것입니다) 를 받고 HTML을 렌더링하는 단순한 함수들로 생각해도 됩니다. 이걸 염두하면, 컴포넌트의 작동을 이해하는 것도 쉽습니다.
|
||||
|
||||
> 주의:
|
||||
>
|
||||
> **한가지 제약이 있습니다**: React 컴포넌트들은 단 하나의 루트 노드(root node)만을 렌더할 수 있습니다. 만약 여러개의 노드들을 리턴하고 싶다면, 그것들은 단 하나의 루트 노드로 싸여져 있어야만 합니다.
|
||||
|
||||
## JSX 문법
|
||||
|
||||
우리는 컴포넌트를 사용하는 것이 "템플릿"과 "디스플레이 로직(display logic)"을 이용하는 것보다 관심을 분리(separate concerns)하는 데에 올바른 방법이라고 강하게 믿고 있습니다. 우리는 마크업과 그것을 만들어내는 코드는 친밀하게 함께 결합되어있다고 생각합니다. 또한, 디스플레이 로직은 종종 매우 복잡하고, 그것을 템플릿 언어를 이용해 표현하는 것은 점점 사용하기 어렵게 됩니다.
|
||||
|
||||
우리는 이 문제를 해결하는 최고의 해결책은, UI를 만드는 진짜 프로그래밍 언어의 표현력을 모두 사용할 수 있는 JavaScript 코드로부터 HTML과 컴포넌트 트리들을 생성하는 것임을 발견했습니다.
|
||||
|
||||
이것을 더 쉽게 하기 위해서, 우리는 매우 간단하고, **선택적인** HTML과 비슷한 문법을 추가하여 이 React 트리 노드들을 만들 수 있게 했습니다.
|
||||
|
||||
**JSX는 당신으로 하여금 HTML 문법을 이용해 JavaScript 객체를 만들게 해줍니다.** React를 이용해 순수한 JavaScript 문법으로 링크를 만드려고 한다면, 코드는 다음과 같습니다:
|
||||
|
||||
`React.createElement('a', {href: 'https://facebook.github.io/react/'}, '안녕하세요!')`
|
||||
|
||||
JSX를 이용하면:
|
||||
|
||||
`<a href="https://facebook.github.io/react/">안녕하세요!</a>`
|
||||
|
||||
우리는 이것이 React 앱들을 만들기 쉽게 하고, 디자이너들이 이 문법을 더 선호하는 것을 발견했습니다, 하지만 모든 사람은 그들만의 선호하는 워크플로우가 있기 마련이므로, **JSX는 React를 사용하기 위해 필수적이지는 않습니다.**
|
||||
|
||||
JSX는 매우 작은 언어입니다. 그것을 배우고 싶다면, [JSX 깊게 살펴보기](/react/docs/jsx-in-depth-ko-KR.html)를 살펴 보시기 바랍니다. 또는, [바벨 REPL](https://babeljs.io/repl/)를 통해 문법이 변환되는 것을 살펴 보시기 바랍니다.
|
||||
|
||||
JSX는 HTML과 비슷하지만, 완전히 똑같지는 않습니다. [JSX의 실수하기 쉬운 부분들](/react/docs/jsx-gotchas-ko-KR.html)에 중요한 차이점들에 대해 설명되어 있습니다.
|
||||
|
||||
[바벨에서 JSX를 시작하는 여러 방법을 제공합니다](http://babeljs.io/docs/setup/). 여기에는 커맨드 라인 툴부터 루비 온 레일스 연동까지 다양한 방법이 있습니다. 가장 편한 툴을 사용하세요.
|
||||
|
||||
## JSX 없이 React 사용하기
|
||||
|
||||
JSX는 완전히 선택적입니다. 당신은 React와 JSX를 함께 사용하지 않아도 상관없습니다. 그냥 JavaScript에서 React 엘리먼트를 `React.createElement`로 만들 수 있습니다. 여기에 태그 이름이나 컴포넌트, 속성 객체, 자식 엘리먼트들을 전달하면 됩니다.
|
||||
|
||||
```javascript
|
||||
var child1 = React.createElement('li', null, 'First Text Content');
|
||||
var child2 = React.createElement('li', null, 'Second Text Content');
|
||||
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
|
||||
ReactDOM.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
편의를 위하여, 당신은 팩토리 함수 헬퍼들을 이용해 커스텀 컴포넌트로부터 엘리먼트들을 만들 수 있습니다.
|
||||
|
||||
```javascript
|
||||
var Factory = React.createFactory(ComponentClass);
|
||||
...
|
||||
var root = Factory({ custom: 'prop' });
|
||||
ReactDOM.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
React는 이미 일반적인 HTML 태그에 대한 빌트인 팩토리를 가지고 있습니다.
|
||||
|
||||
```javascript
|
||||
var root = React.DOM.ul({ className: 'my-list' },
|
||||
React.DOM.li(null, '텍스트')
|
||||
);
|
||||
```
|
||||
@@ -1,126 +0,0 @@
|
||||
---
|
||||
id: displaying-data
|
||||
title: Displaying Data
|
||||
permalink: docs/displaying-data.html
|
||||
prev: why-react.html
|
||||
next: jsx-in-depth.html
|
||||
---
|
||||
|
||||
The most basic thing you can do with a UI is display some data. React makes it easy to display data and automatically keeps the interface up-to-date when the data changes.
|
||||
|
||||
## Getting Started
|
||||
|
||||
Let's look at a really simple example. Create a `hello-react.html` file with the following code:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Hello React</title>
|
||||
<script src="https://unpkg.com/react@{{site.react_version}}/dist/react.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@{{site.react_version}}/dist/react-dom.js"></script>
|
||||
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="example"></div>
|
||||
<script type="text/babel">
|
||||
|
||||
// ** Your code goes here! **
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
For the rest of the documentation, we'll just focus on the JavaScript code and assume it's inserted into a template like the one above. Replace the placeholder comment above with the following JSX:
|
||||
|
||||
```javascript
|
||||
class HelloWorld extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<p>
|
||||
Hello, <input type="text" placeholder="Your name here" />!
|
||||
It is {this.props.date.toTimeString()}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function tick() {
|
||||
ReactDOM.render(
|
||||
<HelloWorld date={new Date()} />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
}
|
||||
|
||||
setInterval(tick, 500);
|
||||
```
|
||||
|
||||
## Reactive Updates
|
||||
|
||||
Open `hello-react.html` in a web browser and type your name into the text field. Notice that React is only changing the time string in the UI — any input you put in the text field remains, even though you haven't written any code to manage this behavior. React figures it out for you and does the right thing.
|
||||
|
||||
The way we are able to figure this out is that React does not manipulate the DOM unless it needs to. **It uses a fast, internal mock DOM to perform diffs and computes the most efficient DOM mutation for you.**
|
||||
|
||||
The inputs to this component are called `props` — short for "properties". They're passed as attributes in JSX syntax. You should think of these as immutable within the component, that is, **never write to `this.props`**.
|
||||
|
||||
## Components are Just Like Functions
|
||||
|
||||
React components are very simple. You can think of them as simple functions that take in `props` and `state` (discussed later) and render HTML. With this in mind, components are easy to reason about.
|
||||
|
||||
> Note:
|
||||
>
|
||||
> **One limitation**: React components can only render a single root node. If you want to return multiple nodes they *must* be wrapped in a single root.
|
||||
|
||||
## JSX Syntax
|
||||
|
||||
We strongly believe that components are the right way to separate concerns rather than "templates" and "display logic." We think that markup and the code that generates it are intimately tied together. Additionally, display logic is often very complex and using template languages to express it becomes cumbersome.
|
||||
|
||||
We've found that the best solution for this problem is to generate HTML and component trees directly from the JavaScript code such that you can use all of the expressive power of a real programming language to build UIs.
|
||||
|
||||
In order to make this easier, we've added a very simple, **optional** HTML-like syntax to create these React tree nodes.
|
||||
|
||||
**JSX lets you create JavaScript objects using HTML syntax.** To generate a link in React using pure JavaScript you'd write:
|
||||
|
||||
`React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello!')`
|
||||
|
||||
With JSX this becomes:
|
||||
|
||||
`<a href="https://facebook.github.io/react/">Hello!</a>`
|
||||
|
||||
We've found this has made building React apps easier and designers tend to prefer the syntax, but everyone has their own workflow, so **JSX is not required to use React.**
|
||||
|
||||
JSX is very small. To learn more about it, see [JSX in depth](/react/docs/jsx-in-depth.html). Or see the transform in action in [the Babel REPL](https://babeljs.io/repl/).
|
||||
|
||||
JSX is similar to HTML, but not exactly the same. See [JSX gotchas](/react/docs/jsx-gotchas.html) for some key differences.
|
||||
|
||||
[Babel exposes a number of ways to get started using JSX](http://babeljs.io/docs/setup/), ranging from command line tools to Ruby on Rails integrations. Choose the tool that works best for you.
|
||||
|
||||
## React without JSX
|
||||
|
||||
JSX is completely optional; you don't have to use JSX with React. You can create React elements in plain JavaScript using `React.createElement`, which takes a tag name or component, a properties object, and variable number of optional child arguments.
|
||||
|
||||
```javascript
|
||||
var child1 = React.createElement('li', null, 'First Text Content');
|
||||
var child2 = React.createElement('li', null, 'Second Text Content');
|
||||
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
|
||||
ReactDOM.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
For convenience, you can create short-hand factory functions to create elements from custom components.
|
||||
|
||||
```javascript
|
||||
var Factory = React.createFactory(ComponentClass);
|
||||
...
|
||||
var root = Factory({ custom: 'prop' });
|
||||
ReactDOM.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
React already has built-in factories for common HTML tags:
|
||||
|
||||
```javascript
|
||||
var root = React.DOM.ul({ className: 'my-list' },
|
||||
React.DOM.li(null, 'Text Content')
|
||||
);
|
||||
```
|
||||
@@ -1,124 +0,0 @@
|
||||
---
|
||||
id: displaying-data-ru-RU
|
||||
title: Отображение данных
|
||||
permalink: docs/displaying-data-ru-RU.html
|
||||
prev: why-react-ru-RU.html
|
||||
next: jsx-in-depth.html
|
||||
---
|
||||
|
||||
Главная задача интерфейса — это отображать данные. React делает это легко и обновляет интерфейс сразу, как только изменятся данные.
|
||||
|
||||
## Начало
|
||||
|
||||
Давайте рассмотрим простой пример. Создайте файл `hello-react.html` со следующим текстом:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Hello React</title>
|
||||
<script src="https://unpkg.com/react@{{site.react_version}}/dist/react.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@{{site.react_version}}/dist/react-dom.js"></script>
|
||||
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="example"></div>
|
||||
<script type="text/babel">
|
||||
|
||||
// ** Ваш код будет здесь! **
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Добавим в этот шаблон немного JavaScript. Замените комментарий на следующий JSX-код:
|
||||
|
||||
```javascript
|
||||
var HelloWorld = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<p>
|
||||
Hello, <input type="text" placeholder="Your name here" />!
|
||||
It is {this.props.date.toTimeString()}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
setInterval(function() {
|
||||
ReactDOM.render(
|
||||
<HelloWorld date={new Date()} />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
}, 500);
|
||||
```
|
||||
|
||||
## Реактивные обновления
|
||||
|
||||
Откройте `hello-react.html` в браузере и введите в текстовое поле свое имя. Что происходит со страницей? Каждые полсекунды обновляется время, остальные же части страницы остаются без изменений. Обратите внимание, что мы не написали ни строчки кода, чтобы управлять этим поведением. React сам отлично понимает что надо делать и обновляет элементы на странице по мере необходимости.
|
||||
|
||||
Суть в том, что React не меняет DOM-дерево до тех пор, пока это не потребуется. **Чтобы отразить изменения, React использует быстрое внутреннее представление DOM-дерева и просчитывает как его изменить наиболее эффективно**.
|
||||
|
||||
Передаваемые в компонент данные называются `props` — сокращенно от "properties". В JSX коде они передаются как атрибуты компонента. Считайте, что компонент получает `props` только для чтения. **Никогда не перезаписывайте значения `this.props` внутри компонента.**
|
||||
|
||||
## Компоненты как функции
|
||||
|
||||
Компоненты React — довольно простые сущности. Можно считать их обыкновенными функциями, которые принимают на входе `props` и `state` (см. далее) и возвращают HTML. Если помнить об этом, то компоненты становятся простыми для понимания.
|
||||
|
||||
> Замечание:
|
||||
>
|
||||
> **Есть одно ограничение**: Компоненты React умеют возвращать только один узел. Если вам надо вернуть сразу несколько, они *должны* быть обернуты в один корневой узел.
|
||||
|
||||
## Синтаксис JSX
|
||||
|
||||
Мы убеждены, что компоненты — самый подходящий способ разделения ответственностей, гораздо более удобный чем "шаблоны" и "вынесение логики на страницу". Мы считаем, что разметка и код, который её генерирует, неотделимы друг от друга. Плюс, логика на странице часто бывает запутанной, и использование шаблонизаторов, чтобы описать её, только затрудняет работу.
|
||||
|
||||
Мы решили, что лучшим вариантом будет генерировать HTML и деревья компонентов прямо из JS кода. Так вы сможете зайдействовать всю выразительную мощь современного языка программирования для создания интерфейсов.
|
||||
|
||||
А чтобы упростить создание узлов дерева, мы ввели **опциональный** HTML-подобный синтаксис.
|
||||
|
||||
**JSX позволяет вам создавать JavaScript объекты используя синтаксис HTML**. Для генерации ссылки в React вы напишете на чистом JavaScript:
|
||||
|
||||
`React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello!')`
|
||||
|
||||
С JSX это станет:
|
||||
|
||||
`<a href="https://facebook.github.io/react/">Hello!</a>`
|
||||
|
||||
Мы установили, что с JSX создавать React приложения проще, и дизайнеров как правило устраивает его синтаксис. Но у разных людей разные предпочтения, поэтому стоит сказать, что **JSX необязателен при работе с React.**
|
||||
|
||||
JSX сам по себе очень прост. Чтобы узнать о нем больше, почитайте [подробно про JSX](/react/docs/jsx-in-depth.html). Или можете попробовать его в [Babel REPL](https://babeljs.io/repl/).
|
||||
|
||||
JSX похож на HTML, но но имеет существенные отличия. Почитайте про [подводные камни JSX](/react/docs/jsx-gotchas.html), чтобы понять их ключевые различия.
|
||||
|
||||
[Babel предлагает несколько способов начать работу с JSX](http://babeljs.io/docs/setup/), от консольных утилит до интеграций с Ruby on Rails. Выберите тот инструмент, который лучше всего вам подходит.
|
||||
|
||||
## React без использования JSX
|
||||
|
||||
JSX полностью опционален; вам совсем необязательно использовать его вместе с React. Вы можете создавать React-элементы на чистом JavaScript используя функцию `React.createElement`, которая принимает имя тега или компонента, объект со свойствами, и набор необязательных дочерних элементов.
|
||||
|
||||
```javascript
|
||||
var child1 = React.createElement('li', null, 'First Text Content');
|
||||
var child2 = React.createElement('li', null, 'Second Text Content');
|
||||
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
|
||||
ReactDOM.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
Для удобства, вы можете создать сокращенные фабричные функции, чтобы создавать React-элементы из ваших собственных компонентов.
|
||||
|
||||
```javascript
|
||||
var Factory = React.createFactory(ComponentClass);
|
||||
...
|
||||
var root = Factory({ custom: 'prop' });
|
||||
ReactDOM.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
А для базовых HTML тегов в React уже есть встроенные фабрики:
|
||||
|
||||
```javascript
|
||||
var root = React.DOM.ul({ className: 'my-list' },
|
||||
React.DOM.li(null, 'Text Content')
|
||||
);
|
||||
```
|
||||
@@ -1,124 +0,0 @@
|
||||
---
|
||||
id: displaying-data-zh-CN
|
||||
title: 显示数据
|
||||
permalink: docs/displaying-data-zh-CN.html
|
||||
prev: why-react-zh-CN.html
|
||||
next: jsx-in-depth-zh-CN.html
|
||||
---
|
||||
|
||||
用户界面能做的最基础的事就是显示一些数据。React 让显示数据变得简单，当数据变化的时候，用户界面会自动同步更新。
|
||||
|
||||
## 开始
|
||||
|
||||
让我们看一个非常简单的例子。新建一个名为 `hello-react.html` 的文件，代码内容如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Hello React</title>
|
||||
<script src="https://unpkg.com/react@{{site.react_version}}/dist/react.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@{{site.react_version}}/dist/react-dom.js"></script>
|
||||
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="example"></div>
|
||||
<script type="text/babel">
|
||||
|
||||
// ** 在这里替换成你的代码 **
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
在接下去的文档中，我们只关注 JavaScript 代码，假设我们把代码插入到上面那个模板中。用下面的代码替换掉上面用来占位的注释。
|
||||
|
||||
```javascript
|
||||
var HelloWorld = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<p>
|
||||
Hello, <input type="text" placeholder="Your name here" />!
|
||||
It is {this.props.date.toTimeString()}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
setInterval(function() {
|
||||
ReactDOM.render(
|
||||
<HelloWorld date={new Date()} />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
}, 500);
|
||||
```
|
||||
|
||||
## 被动更新 (Reactive Updates)
|
||||
|
||||
在浏览器中打开 `hello-react.html` ，在输入框输入你的名字。你会发现 React 在用户界面中只改变了时间， 任何你在输入框输入的内容一直保留着，即使你没有写任何代码来完成这个功能。React 为你解决了这个问题，做了正确的事。
|
||||
|
||||
我们想到的方法是除非不得不操作 DOM ，React 是不会去操作 DOM 的。**它用一种更快的内置仿造的 DOM 来操作差异，为你计算出出效率最高的 DOM 改变**。
|
||||
|
||||
对这个组件的输入称为 `props` - "properties"的缩写。得益于 JSX 语法，它们通过参数传递。你必须知道在组件里，这些属性是不可改变的，也就是说 **`this.props` 是只读的**。
|
||||
|
||||
## 组件就像是函数
|
||||
|
||||
React 组件非常简单。你可以认为它们就是简单的函数，接受 `props` 和 `state` (后面会讨论) 作为参数，然后渲染出 HTML。正是应为它们是这么的简单，这使得它们非常容易理解。
|
||||
|
||||
> 注意:
|
||||
>
|
||||
> **只有一个限制**: React 组件只能渲染单个根节点。如果你想要返回多个节点，它们*必须*被包含在同一个节点里。
|
||||
|
||||
## JSX 语法
|
||||
|
||||
我们坚信组件是正确方法去做关注分离，而不是通过“模板”和“展示逻辑”。我们认为标签和生成它的代码是紧密相连的。此外，展示逻辑通常是很复杂的，通过模板语言实现这些逻辑会产生大量代码。
|
||||
|
||||
我们得出解决这个问题最好的方案是通过 JavaScript 直接生成模板，这样你就可以用一个真正语言的所有表达能力去构建用户界面。
|
||||
|
||||
为了使这变得更简单，我们做了一个非常简单、**可选**类似 HTML 语法 ，通过函数调用即可生成模板的编译器，称为 JSX。
|
||||
|
||||
**JSX 让你可以用 HTML 语法去写 JavaScript 函数调用** 为了在 React 生成一个链接，通过纯 JavaScript 你可以这么写：
|
||||
|
||||
`React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello React!')`。
|
||||
|
||||
通过 JSX 这就变成了
|
||||
|
||||
`<a href="https://facebook.github.io/react/">Hello React!</a>`。
|
||||
|
||||
我们发现这会使搭建 React 应用更加简单，设计师也偏向用这用语法，但是每个人可以有它们自己的工作流，所以**JSX 不是必须用的。**
|
||||
|
||||
JSX 非常小；上面“hello, world”的例子使用了 JSX 所有的特性。想要了解更多，请看 [深入理解 JSX](/react/docs/jsx-in-depth-zh-CN.html)。或者直接使用[在线 JSX 编译器](/react/jsx-compiler.html)观察变化过程。
|
||||
|
||||
JSX 类似于 HTML，但不是完全一样。参考 [JSX 陷阱](/react/docs/jsx-gotchas-zh-CN.html) 学习关键区别。
|
||||
|
||||
[Babel 公开了一些使用 JSX 的方式],从命令行工具到 Ruby on Rails 集成。选择一个对你来说最合适的工具。
|
||||
|
||||
## 没有 JSX 的 React
|
||||
|
||||
JSX完全是可选的；你无需在 React 中必须使用 JSX。你可以通过 `React.createElement` 来创建一个树。第一个参数是标签，第二个参数是一个属性对象，第三个是子节点。
|
||||
|
||||
```javascript
|
||||
var child1 = React.createElement('li', null, 'First Text Content');
|
||||
var child2 = React.createElement('li', null, 'Second Text Content');
|
||||
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
|
||||
ReactDOM.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
方便起见，你可以创建基于自定义组件的速记工厂方法。
|
||||
|
||||
```javascript
|
||||
var Factory = React.createFactory(ComponentClass);
|
||||
...
|
||||
var root = Factory({ custom: 'prop' });
|
||||
ReactDOM.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
React 已经为 HTML 标签提供内置工厂方法。
|
||||
|
||||
```javascript
|
||||
var root = React.DOM.ul({ className: 'my-list' },
|
||||
React.DOM.li(null, 'Text Content')
|
||||
);
|
||||
```
|
||||
@@ -1,125 +0,0 @@
|
||||
---
|
||||
id: displaying-data-zh-TW
|
||||
title: Displaying Data
|
||||
permalink: docs/displaying-data-zh-TW.html
|
||||
prev: why-react-zh-TW.html
|
||||
next: jsx-in-depth-zh-TW.html
|
||||
---
|
||||
|
||||
在使用者介面所能做最基本的事情就是呈現資料. React讓呈現資料變得更加容易並且當資料有所變動時也能自動地讓使用者介面保持呈現最新的資料.
|
||||
|
||||
## 入門(Getting Started)
|
||||
|
||||
我們從一個相當簡單的範例開始. 建立一個名為 `hello-react.html` 的檔案裡面包含下列程式碼:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Hello React</title>
|
||||
<script src="https://unpkg.com/react@{{site.react_version}}/dist/react.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@{{site.react_version}}/dist/react-dom.js"></script>
|
||||
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="example"></div>
|
||||
<script type="text/babel">
|
||||
|
||||
// ** 將你的程式碼放在這裡! **
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
這份文件其他部份,我們將只會專注在JavaScript程式碼解說上,並且假設程式碼會被放置在如上述模板的註解區塊內. 用下列的JSX程式碼取代上述註解區塊:
|
||||
|
||||
```javascript
|
||||
var HelloWorld = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<p>
|
||||
Hello, <input type="text" placeholder="Your name here" />!
|
||||
It is {this.props.date.toTimeString()}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
setInterval(function() {
|
||||
ReactDOM.render(
|
||||
<HelloWorld date={new Date()} />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
}, 500);
|
||||
```
|
||||
|
||||
## 反應性更新(Reactive Updates)
|
||||
|
||||
在一個瀏覽器上開啟檔案 `hello-react.html` 並且在文字區塊填入你的名字. 請注意React僅僅改變UI上的時間字串 — 你在文字區塊輸入的任何文字依舊存在, 即使你並沒有寫任何程式碼來管理這個行為.React可以為你分辨出這樣的行為並且做出正確的回應.
|
||||
|
||||
之所以能夠分辨出這樣的行為是因為React除非在真正有必要的情況下，否則不會對DOM做任何操作. **它使用一個快速的, 內部虛擬的DOM(internal mock DOM)來為你施行比較和計算最有效率的DOM變動(DOM mutation)**
|
||||
|
||||
輸入到元件(component)的內容我們稱為`props` — 是屬性("properties")的簡稱. 他們在JSX語法中作為傳遞屬性之用. 你應該把這些屬性當做元件中不可被改變的, 也就是說, **永遠不要對 `this.props` 做寫入的行為**.
|
||||
|
||||
## 元件就是函數(Components are Just Like Functions)
|
||||
|
||||
React元件(components)是非常簡單的. 你能把它們想成是簡單的函數帶入`props`和`state`(後面會討論這部份)並且呈送給HTML(render HTML). 在心中保持住這個想法, 就能容易理解元件(components).
|
||||
React components are very simple. You can think of them as simple functions that take in `props` and `state` (discussed later) and render HTML. With this in mind, components are easy to reason about.
|
||||
|
||||
> 注意(Note):
|
||||
>
|
||||
> **一個局限性**: React元件(components)只能呈送(render)給一個單一根節點(root node). 如果你想要回傳多個節點(multiple nodes)他們*必須*被包裹在單一根節點內.
|
||||
|
||||
## JSX語法
|
||||
|
||||
我們深信元件(components)才是分離關注點(separate concerns)的正確方法, 而並非傳統的模板("templates")和顯示邏輯("display logic")觀念. 我們認為標記(markup)和產生它的程式碼應當緊密的綁在一起. 另外, 顯示邏輯(display logic)常常是非常複雜的, 若使用模板語言(template languages)來詮釋它就顯得笨重或累贅.
|
||||
|
||||
我們找到解決這個問題的最佳解答就是直接在JavaScript程式內產生HTML和元件樹(component trees)如此一來你就能使用真正的程式語言的表達能力(expressive power)來建立使用者介面(UIs).
|
||||
|
||||
為了能更輕鬆實現, 我們增加了一個非常簡單, **可選擇性使用的** 類似HTML的語法(HTML-like syntax) 來創建這些React樹節點(React tree nodes).
|
||||
|
||||
**JSX能讓你使用HTML語法來創建JavaScript物件.** 在React裡使用純JavaScript來產生一個鏈接(link)你可以這樣寫:
|
||||
|
||||
`React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello!')`
|
||||
|
||||
使用JSX語法則變成:
|
||||
|
||||
`<a href="https://facebook.github.io/react/">Hello!</a>`
|
||||
|
||||
我們發現這麼做能讓建立React apps更加容易並且設計師往往喜歡語法, 但是每個人都有他們自己的工作流程, 所以**在使用React時JSX並非必要.**
|
||||
|
||||
JSX非常簡單易懂. 若想要學習更多關於JSX, 請參閱 [JSX in depth](/react/docs/jsx-in-depth.html). 或是可以使用線上及時轉換工具 [the Babel REPL](https://babeljs.io/repl/).
|
||||
|
||||
JSX類似於HTML, 但不盡然完全相同. 參閱 [JSX gotchas](/react/docs/jsx-gotchas.html) 來比較一些主要的差異點.
|
||||
|
||||
[Babel exposes a number of ways to get started using JSX](http://babeljs.io/docs/setup/), 涵蓋從命令列工具到Ruby on Rails整合. 可以從中選擇最適合你的工具.
|
||||
|
||||
## React不使用JSX的範例(React without JSX)
|
||||
|
||||
JSX完全是可選擇性使用的; 你可以不拿JSX跟React一起使用. 你能在純粹的JavaScript環境中使用`React.createElement`來創建React元素(React elements), 它搭配一個標籤名(tag name)或是元件(component), 一個屬性物件(properties object), 和數個選擇性子參數(child arguments).
|
||||
|
||||
```javascript
|
||||
var child1 = React.createElement('li', null, 'First Text Content');
|
||||
var child2 = React.createElement('li', null, 'Second Text Content');
|
||||
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
|
||||
ReactDOM.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
為了方便起見, 你能創建速記factory函式(short-hand factory functions)然後從自訂元件(custom components)建立元素(elements).
|
||||
|
||||
```javascript
|
||||
var Factory = React.createFactory(ComponentClass);
|
||||
...
|
||||
var root = Factory({ custom: 'prop' });
|
||||
ReactDOM.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
針對一般的HTML標籤React已經有內建的factories函式:
|
||||
|
||||
```javascript
|
||||
var root = React.DOM.ul({ className: 'my-list' },
|
||||
React.DOM.li(null, 'Text Content')
|
||||
);
|
||||
```
|
||||
@@ -1,228 +0,0 @@
|
||||
---
|
||||
id: jsx-in-depth-it-IT
|
||||
title: JSX in Profondità
|
||||
permalink: docs/jsx-in-depth-it-IT.html
|
||||
prev: displaying-data-it-IT.html
|
||||
next: jsx-spread-it-IT.html
|
||||
---
|
||||
|
||||
[JSX](https://facebook.github.io/jsx/) è un'estensione della sintassi JavaScript che somiglia all'XML. Puoi usare una semplice trasformazione sintattica di JSX con React.
|
||||
|
||||
## Perché JSX?
|
||||
|
||||
Non devi per forza utilizzare JSX con React. Puoi anche usare semplice JS. Tuttavia, raccomandiamo di utilizzare JSX perché usa una sintassi concisa e familiare per definire strutture ad albero dotate di attributi.
|
||||
|
||||
È più familiare a sviluppatori occasionali come i designer.
|
||||
|
||||
L'XML ha i benefici di tag di apertura e chiusura bilanciati. Ciò rende la lettura di grandi strutture ad albero più semplice di chiamate a funzione o oggetti letterali.
|
||||
|
||||
Non altera la semantica di JavaScript.
|
||||
|
||||
## Tag HTML o Componenti React
|
||||
|
||||
React può sia rendere tag HTML (stringhe) che componenti React (classi).
|
||||
|
||||
Per rendere untag HTML, usa nomi di tag minuscoli in JSX:
|
||||
|
||||
```javascript
|
||||
var myDivElement = <div className="foo" />;
|
||||
ReactDOM.render(myDivElement, document.getElementById('example'));
|
||||
```
|
||||
|
||||
Per rendere un componente React, definisci una variabile locale che comincia con una lettera maiuscola:
|
||||
|
||||
```javascript
|
||||
var MyComponent = React.createClass({/*...*/});
|
||||
var myElement = <MyComponent someProperty={true} />;
|
||||
ReactDOM.render(myElement, document.getElementById('example'));
|
||||
```
|
||||
|
||||
Il JSX di React utilizza la convenzione maiuscolo o minuscolo per distinguere tra classi di componenti locali e tag HTML.
|
||||
|
||||
> Nota:
|
||||
>
|
||||
> Poiché JSX è JavaScript, gli identificatori come `class` e `for` sono sconsigliati
|
||||
> come nomi di attributi XML. Invece, i componenti DOM React si aspettano nomi di proprietà
|
||||
> come `className` e `htmlFor` rispettivamente.
|
||||
|
||||
## La Trasformazione
|
||||
|
||||
Il JSX di React viene trasformato da una sintassi XML a JavaScript nativo. Gli elementi XML, gli attributi e i figli sono trasformati in argomenti passati a `React.createElement`.
|
||||
|
||||
```javascript
|
||||
var Nav;
|
||||
// Input (JSX):
|
||||
var app = <Nav color="blue" />;
|
||||
// Output (JS):
|
||||
var app = React.createElement(Nav, {color:"blue"});
|
||||
```
|
||||
|
||||
Osserva che per utilizzare `<Nav />`, la variabile `Nav` deve essere visibile.
|
||||
|
||||
JSX permette anche di specificare i figli usando una sintassi XML:
|
||||
|
||||
```javascript
|
||||
var Nav, Profile;
|
||||
// Input (JSX):
|
||||
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
|
||||
// Output (JS):
|
||||
var app = React.createElement(
|
||||
Nav,
|
||||
{color:"blue"},
|
||||
React.createElement(Profile, null, "click")
|
||||
);
|
||||
```
|
||||
|
||||
JSX inferirà il [displayName](/react/docs/component-specs-it-IT.html#displayname) della classe dall'assegnazione delle variabile, quando il valore di displayName è indefinito:
|
||||
|
||||
```javascript
|
||||
// Input (JSX):
|
||||
var Nav = React.createClass({ });
|
||||
// Output (JS):
|
||||
var Nav = React.createClass({displayName: "Nav", });
|
||||
```
|
||||
|
||||
Usa la [REPL di Babel](https://babeljs.io/repl/) per provare il JSX e vedere come viene trasformato
|
||||
in JavaScript nativo, e il
|
||||
[convertitore da HTML a JSX](http://magic.reactjs.net/htmltojsx.htm) per convertire il tuo HTML esistente a
|
||||
JSX.
|
||||
|
||||
Se desideri utilizzare JSX, la guida [Primi Passi](/react/docs/getting-started-it-IT.html) ti mostra come impostare la compilazione.
|
||||
|
||||
> Nota:
|
||||
>
|
||||
> L'espressione JSX viene sempre valutata come un ReactElement. Le implementazioni
|
||||
> attuali potrebbero differire. Un modo ottimizzato potrebbe porre il
|
||||
> ReactElement in linea come un oggetto letterale per evitare il codice di validazione in
|
||||
> `React.createElement`.
|
||||
|
||||
## Namespace dei Componenti
|
||||
|
||||
Se stai costruendo un componente che ha parecchi figli, come ad esempio un modulo, potresti facilmente trovarti con una quantità di dichiarazioni di variabili:
|
||||
|
||||
```javascript
|
||||
// Imbarazzante blocco di dichiarazioni di variabili
|
||||
var Form = MyFormComponent;
|
||||
var FormRow = Form.Row;
|
||||
var FormLabel = Form.Label;
|
||||
var FormInput = Form.Input;
|
||||
|
||||
var App = (
|
||||
<Form>
|
||||
<FormRow>
|
||||
<FormLabel />
|
||||
<FormInput />
|
||||
</FormRow>
|
||||
</Form>
|
||||
);
|
||||
```
|
||||
|
||||
Per rendere tutto ciò più semplice e leggibile, *i componenti con un namespace* ti permettono di usare un componente che dispone di altri componenti come proprietà:
|
||||
|
||||
```javascript
|
||||
var Form = MyFormComponent;
|
||||
|
||||
var App = (
|
||||
<Form>
|
||||
<Form.Row>
|
||||
<Form.Label />
|
||||
<Form.Input />
|
||||
</Form.Row>
|
||||
</Form>
|
||||
);
|
||||
```
|
||||
|
||||
Per fare ciò, devi semplicemente creare i tuoi *"sub-componenti"* come proprietà del componente principale:
|
||||
|
||||
```javascript
|
||||
var MyFormComponent = React.createClass({ ... });
|
||||
|
||||
MyFormComponent.Row = React.createClass({ ... });
|
||||
MyFormComponent.Label = React.createClass({ ... });
|
||||
MyFormComponent.Input = React.createClass({ ... });
|
||||
```
|
||||
|
||||
JSX gestirà il tutto correttamente al momento di compilare il tuo codice.
|
||||
|
||||
```javascript
|
||||
var App = (
|
||||
React.createElement(Form, null,
|
||||
React.createElement(Form.Row, null,
|
||||
React.createElement(Form.Label, null),
|
||||
React.createElement(Form.Input, null)
|
||||
)
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
> Nota:
|
||||
>
|
||||
> Questa funzionalità è disponibile nella [v0.11](/react/blog/2014/07/17/react-v0.11.html#jsx) e successive.
|
||||
|
||||
## Espressioni JavaScript
|
||||
|
||||
### Expressioni come Attributi
|
||||
|
||||
Per usare un'espressione JavaScript come valore di un attributo, racchiudi l'espressione in un paio
|
||||
di parentesi graffe (`{}`) anziché doppi apici (`""`).
|
||||
|
||||
```javascript
|
||||
// Input (JSX):
|
||||
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
|
||||
// Output (JS):
|
||||
var person = React.createElement(
|
||||
Person,
|
||||
{name: window.isLoggedIn ? window.name : ''}
|
||||
);
|
||||
```
|
||||
|
||||
### Attributi Booleani
|
||||
|
||||
Omettere il valore di un attributo fa in modo che JSX lo tratti come `true`. Per passare `false` occorre utilizzare un'espressione come attributo. Ciò capita spesso quando si usano elementi di moduli HTML, con attributi come `disabled`, `required`, `checked` e `readOnly`.
|
||||
|
||||
```javascript
|
||||
// Queste due forme sono equivalenti in JSX per disabilitare un bottone
|
||||
<input type="button" disabled />;
|
||||
<input type="button" disabled={true} />;
|
||||
|
||||
// E queste due forme sono equivalenti in JSX per non disabilitare un bottone
|
||||
<input type="button" />;
|
||||
<input type="button" disabled={false} />;
|
||||
```
|
||||
|
||||
### Expressioni per Figli
|
||||
|
||||
Similmente, espressioni JavaScript possono essere utilizzate per rappresentare figli:
|
||||
|
||||
```javascript
|
||||
// Input (JSX):
|
||||
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
|
||||
// Output (JS):
|
||||
var content = React.createElement(
|
||||
Container,
|
||||
null,
|
||||
window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
|
||||
);
|
||||
```
|
||||
|
||||
### Commenti
|
||||
|
||||
È facile aggiungere commenti al tuo codice JSX; sono semplici espressioni JS. Devi soltanto prestare attenzione a porre `{}` attorno ai commenti quando ti trovi dentro la sezione figli di un tag.
|
||||
|
||||
```javascript
|
||||
var content = (
|
||||
<Nav>
|
||||
{/* commento figlio, racchiuso in {} */}
|
||||
<Person
|
||||
/* commento
|
||||
su più
|
||||
righe */
|
||||
name={window.isLoggedIn ? window.name : ''} // fine del commento su una riga
|
||||
/>
|
||||
</Nav>
|
||||
);
|
||||
```
|
||||
|
||||
> NOTA:
|
||||
>
|
||||
> JSX è simile all'HTML, ma non esattamente identico. Consulta la guida [JSX gotchas](/react/docs/jsx-gotchas-it-IT.html) per le differenze fondamentali.
|
||||
@@ -1,219 +0,0 @@
|
||||
---
|
||||
id: jsx-in-depth
|
||||
title: JSXの深層
|
||||
permalink: docs/jsx-in-depth-ja-JP.html
|
||||
prev: displaying-data-ja-JP.html
|
||||
next: jsx-spread-ja_JP.html
|
||||
---
|
||||
|
||||
[JSX](https://facebook.github.io/jsx/)はXMLに似たJavaScriptのシンタックスの拡張です。Reactでは、単純なJSXのシンタックスの変換を使うことができます。
|
||||
|
||||
## なぜJSXを使うのでしょうか？
|
||||
|
||||
ReactでJSXの使用を強制されるわけではありません。生のJSを使うこともできます。しかし、JSXは簡潔で、木構造とReactの特性を定義しやすいシンタックスであるため、JSXを使うことをお勧めします。
|
||||
|
||||
デザイナーのようなカジュアルな開発者にとってはさらに馴染みやすいでしょう。
|
||||
|
||||
XMLにはバランスの取れた開始タグと終了タグという利益があります。このことで、関数がオブジェクトリテラルを呼んでいるのを読むよりも簡単に大きな木構造を作ることができます。
|
||||
|
||||
これはJavaScriptのセマンティックスを代替するものではありません。
|
||||
|
||||
## HTMLタグ対Reactコンポーネント
|
||||
|
||||
ReactはHTMLタグ（文字列）とReactコンポーネント（クラス）の両方をレンダリングすることができます。
|
||||
|
||||
以下のようにJSXで小文字のタグ名を使用するだけで、HTMLタグをレンダリングできます。
|
||||
|
||||
```javascript
|
||||
var myDivElement = <div className="foo" />;
|
||||
ReactDOM.render(myDivElement, document.getElementById('example'));
|
||||
```
|
||||
|
||||
以下のように大文字から始まるローカル変数を作成するだけで、Reactのコンポーネントをレンダリングできます。
|
||||
|
||||
```javascript
|
||||
var MyComponent = React.createClass({/*...*/});
|
||||
var myElement = <MyComponent someProperty={true} />;
|
||||
ReactDOM.render(myElement, document.getElementById('example'));
|
||||
```
|
||||
|
||||
ReactのJSXは大文字と小文字を使うことで、ローカルのコンポーネントクラスとHTMLタグを識別する習慣があります。
|
||||
|
||||
> 注意:
|
||||
>
|
||||
> JSXはJavaScriptなので、 `class` や `for` といった識別子はXMLの属性名としては使用しません。代わりに、 ReactのDOMコンポーネントはDOMのプロパティ名がそれぞれ `className` や `htmlFor` といったものであることを期待します。
|
||||
|
||||
## The Transform
|
||||
|
||||
ReactのJSXはXMLに似たシンタックスをネイティブなJavaScriptに変換します。XML要素や属性や子要素は `React.createElement` で渡される引数に変換されます。
|
||||
|
||||
```javascript
|
||||
var Nav;
|
||||
// 入力 (JSX):
|
||||
var app = <Nav color="blue" />;
|
||||
// 出力 (JS):
|
||||
var app = React.createElement(Nav, {color:"blue"});
|
||||
```
|
||||
|
||||
`<Nav />` を使うためには、 `Nav` 変数がスコープの中にないといけないことに注意してください。
|
||||
|
||||
以下のように、JSXはXMLシンタックスを使うことで、細かな子要素の使用も許可します。
|
||||
|
||||
```javascript
|
||||
var Nav, Profile;
|
||||
// 入力 (JSX):
|
||||
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
|
||||
// 出力 (JS):
|
||||
var app = React.createElement(
|
||||
Nav,
|
||||
{color:"blue"},
|
||||
React.createElement(Profile, null, "click")
|
||||
);
|
||||
```
|
||||
|
||||
以下のように、displayNameがundefinedの時には、JSXはクラスの[displayName](/react/docs/component-specs.html#displayname)を変数の割り当てから予測します。
|
||||
|
||||
```javascript
|
||||
// 入力 (JSX):
|
||||
var Nav = React.createClass({ });
|
||||
// 出力 (JS):
|
||||
var Nav = React.createClass({displayName: "Nav", });
|
||||
```
|
||||
|
||||
JSXを試し、どのようにネイティブなJavaScriptに変換されるか見るには、[JSX Compiler](/react/jsx-compiler.html)を、すでに存在するHTMLをJSXに変換するには[HTMLからJSXへのコンバーター](http://magic.reactjs.net/htmltojsx.htm)を使ってください。
|
||||
|
||||
JSXを使いたい場合は、[始めてみましょう](/react/docs/getting-started-ja-JP.html)というガイドがどのようにコンパイルを設定するか示してくれます。
|
||||
|
||||
> 注意:
|
||||
>
|
||||
> JSXという表現は常にReactElementを評価します。実際に実行する際の詳細はおそらく異なっているでしょう。最適化されたモードでは `React.createElement` のコードのバリデーションを避けるためにReactElementをオブジェクトリテラルとして配置するでしょう。
|
||||
|
||||
|
||||
## ネームスペース化されたコンポーネント
|
||||
|
||||
formのように、たくさんの子要素を持つコンポーネントを構築する際には、以下のように多くの変数を宣言しなければいけないでしょう。
|
||||
|
||||
```javascript
|
||||
// 変数宣言のあまりよくない部分
|
||||
var Form = MyFormComponent;
|
||||
var FormRow = Form.Row;
|
||||
var FormLabel = Form.Label;
|
||||
var FormInput = Form.Input;
|
||||
|
||||
var App = (
|
||||
<Form>
|
||||
<FormRow>
|
||||
<FormLabel />
|
||||
<FormInput />
|
||||
</FormRow>
|
||||
</Form>
|
||||
);
|
||||
```
|
||||
|
||||
これを単純で簡単にするために、 *ネームスペース化されたコンポーネント* では、以下のように他のコンポーネントを付属物として持つ1つのコンポーネントを使うことができます。
|
||||
|
||||
```javascript
|
||||
var Form = MyFormComponent;
|
||||
|
||||
var App = (
|
||||
<Form>
|
||||
<Form.Row>
|
||||
<Form.Label />
|
||||
<Form.Input />
|
||||
</Form.Row>
|
||||
</Form>
|
||||
);
|
||||
```
|
||||
|
||||
これを行うためには、以下のようにメインコンポーネントの付属物として、「サブコンポーネント」を作るだけで大丈夫です。
|
||||
|
||||
```javascript
|
||||
var MyFormComponent = React.createClass({ ... });
|
||||
|
||||
MyFormComponent.Row = React.createClass({ ... });
|
||||
MyFormComponent.Label = React.createClass({ ... });
|
||||
MyFormComponent.Input = React.createClass({ ... });
|
||||
```
|
||||
|
||||
JSXはコードをコンパイルする際にこのプロパティをハンドルします。
|
||||
|
||||
```javascript
|
||||
var App = (
|
||||
React.createElement(Form, null,
|
||||
React.createElement(Form.Row, null,
|
||||
React.createElement(Form.Label, null),
|
||||
React.createElement(Form.Input, null)
|
||||
)
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
> 注意:
|
||||
> この特徴は [v0.11](/react/blog/2014/07/17/react-v0.11.html#jsx) 以上で使用できます。
|
||||
|
||||
## JavaScriptの表現
|
||||
|
||||
### アトリビュートの表現
|
||||
|
||||
JavaScriptで書いたものをアトリビュートの値として使うためには、その表現を引用(`""`)ではなく波括弧(`{}`)で囲ってください。
|
||||
|
||||
```javascript
|
||||
// 入力 (JSX):
|
||||
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
|
||||
// 出力 (JS):
|
||||
var person = React.createElement(
|
||||
Person,
|
||||
{name: window.isLoggedIn ? window.name : ''}
|
||||
);
|
||||
```
|
||||
|
||||
### Booleanのアトリビュート
|
||||
|
||||
アトリビュートの値を記述しないと、JSXはそれを `true` として扱ってしまいます。`false` を渡すためには、アトリビュートが使われる必要があります。これらはHTMLのform要素の `disabled` 、 `required` 、 `checked` 、 `readOnly` といったアトリビュートを使う際によく見かけられます。
|
||||
|
||||
|
||||
```javascript
|
||||
// 以下の2つはボタンを使用不能にするという意味でJSXでは同義です。
|
||||
<input type="button" disabled />;
|
||||
<input type="button" disabled={true} />;
|
||||
|
||||
// 以下の2つはボタンを使用不能にしないという意味でJSXでは同義です。
|
||||
<input type="button" />;
|
||||
<input type="button" disabled={false} />;
|
||||
```
|
||||
|
||||
### 子要素の表現
|
||||
|
||||
同様に、JavaScriptは子要素を表現するのに使われることもあります。
|
||||
|
||||
```javascript
|
||||
// 入力 (JSX):
|
||||
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
|
||||
// 出力 (JS):
|
||||
var content = React.createElement(
|
||||
Container,
|
||||
null,
|
||||
window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
|
||||
);
|
||||
```
|
||||
|
||||
### コメント
|
||||
|
||||
JSXにコメントを加えるのは簡単です。ただのJSの書き方です。タグの内側にコメントを書く時には、 `{}` で囲うことに注意してください。
|
||||
|
||||
```javascript
|
||||
var content = (
|
||||
<Nav>
|
||||
{/* 子要素にコメントを書く時には、 {} で囲う */}
|
||||
<Person
|
||||
/* 複数
|
||||
行
|
||||
コメント */
|
||||
name={window.isLoggedIn ? window.name : ''} // 行末コメント
|
||||
/>
|
||||
</Nav>
|
||||
);
|
||||
```
|
||||
|
||||
> 注意:
|
||||
> JSXはHTMLに似ていますが、全く同じではありません。いくつかのキーの違いについては[JSXの理解](/react/docs/jsx-gotchas.html) をご覧ください。
|
||||
@@ -1,223 +0,0 @@
|
||||
---
|
||||
id: jsx-in-depth-ko-KR
|
||||
title: JSX 깊이보기
|
||||
permalink: docs/jsx-in-depth-ko-KR.html
|
||||
prev: displaying-data-ko-KR.html
|
||||
next: jsx-spread-ko-KR.html
|
||||
---
|
||||
|
||||
[JSX](https://facebook.github.io/jsx/)는 XML과 비슷한 JavaScript문법 확장입니다. React에서 변환되는 간단한 JSX 구문을 사용하실 수 있습니다.
|
||||
|
||||
## 왜 JSX인가?
|
||||
|
||||
React를 위해 꼭 JSX를 사용할 필요는 없고, 그냥 일반 JS를 사용할 수도 있습니만 JSX를 사용하기를 추천합니다. 왜냐하면, 어트리뷰트를 가진 트리 구조로 정의할 수 있는 간결하고 익숙한 문법이기 때문입니다.
|
||||
|
||||
이것은 디자이너 같은 케쥬얼 개발자에게 더 익숙합니다.
|
||||
|
||||
XML에는 여닫는 태그의 장점이 있습니다. 태그는 큰 트리일 때 함수 호출이나 객체 리터럴보다 읽기 쉬워 집니다.
|
||||
|
||||
JSX는 JavaScript의 시맨틱을 변경하지 않습니다.
|
||||
|
||||
## HTML 태그 vs. React 컴포넌트
|
||||
|
||||
React는 렌더 HTML 태그(문자열)이나 React 컴포넌트(클래스)일 수 있습니다.
|
||||
|
||||
HTML 태그를 렌더하려면, 그냥 JSX에 소문자 태그를 사용하세요.
|
||||
|
||||
```javascript
|
||||
var myDivElement = <div className="foo" />;
|
||||
ReactDOM.render(myDivElement, document.getElementById('example'));
|
||||
```
|
||||
|
||||
React 컴포넌트를 렌더하려면, 대문자로 시작하는 로컬 변수를 만드세요.
|
||||
|
||||
```javascript
|
||||
var MyComponent = React.createClass({/*...*/});
|
||||
var myElement = <MyComponent someProperty={true} />;
|
||||
ReactDOM.render(myElement, document.getElementById('example'));
|
||||
```
|
||||
|
||||
React JSX는 대소문자를 로컬 컴포넌트 클래스와 HTML 태그를 구별하는 컨벤션으로 사용합니다.
|
||||
|
||||
> 주의:
|
||||
>
|
||||
> JSX가 JavaScript기 때문에, `class`, `for`같은 식별자는 XML 어트리뷰트 이름으로
|
||||
> 권장하지 않습니다. 대신, React DOM 컴포넌트는 각각 `className`, `htmlFor`같은
|
||||
> DOM 프로퍼티 이름을 기대합니다.
|
||||
|
||||
## 변환
|
||||
|
||||
React JSX는 XML같은 문법에서 네이티브 JavaScript로 변환됩니다. XML 엘리먼트, 어트리뷰트, 자식은 `React.createElement`에 넘겨지는 인자로 변환됩니다.
|
||||
|
||||
```javascript
|
||||
var Nav;
|
||||
// 입력 (JSX):
|
||||
var app = <Nav color="blue" />;
|
||||
// 출력 (JS):
|
||||
var app = React.createElement(Nav, {color:"blue"});
|
||||
```
|
||||
|
||||
`<Nav />`를 사용하려면, `Nav`변수는 스코프에 있어야 합니다.
|
||||
|
||||
JSX에서는 XML 구문으로 자식을 지정할 수도 있습니다.
|
||||
|
||||
```javascript
|
||||
var Nav, Profile;
|
||||
// 입력 (JSX):
|
||||
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
|
||||
// 출력 (JS):
|
||||
var app = React.createElement(
|
||||
Nav,
|
||||
{color:"blue"},
|
||||
React.createElement(Profile, null, "click")
|
||||
);
|
||||
```
|
||||
|
||||
클래스에 [displayName](/react/docs/component-specs-ko-KR.html#displayname)이 정의되어 있지 않으면 JSX는 변수명을 displayName으로 간주할 것입니다:
|
||||
|
||||
```javascript
|
||||
// 입력 (JSX):
|
||||
var Nav = React.createClass({ });
|
||||
// 출력 (JS):
|
||||
var Nav = React.createClass({displayName: "Nav", });
|
||||
```
|
||||
|
||||
[바벨 REPL](https://babeljs.io/repl/)를 보면 JSX에서 어떻게 네이티브 JavaScript로 변환(desugars)하는지 볼 수 있고, [HTML-JSX 변환기](http://magic.reactjs.net/htmltojsx.htm)는 이미 있는 HTML을 JSX로 변환해 줍니다.
|
||||
|
||||
JSX를 사용 하시려면, [시작하기](/react/docs/getting-started-ko-KR.html) 가이드에서 어떻게 컴파일을 하기 위해 설정하는지 보실 수 있습니다.
|
||||
|
||||
> 주의:
|
||||
>
|
||||
> JSX 표현식은 언제나 ReactElement로 변환됩니다. 실제 구현의 세부사항은 많이
|
||||
> 다를 수 있습니다. 최적화 모드는 ReactElement를 `React.createElement`에서 검증
|
||||
> 코드를 우회하는 객체 리터럴로 ReactElement를 인라인으로 만들 수 있습니다.
|
||||
|
||||
## 네임스페이스를 사용한 컴포넌트
|
||||
|
||||
폼같은 자식을 많이 가지는 컴포넌트를 만든다면, 많은 변수 선언을 하게 될 것입니다.
|
||||
|
||||
```javascript
|
||||
// 변수 선언의 어색한 블록
|
||||
var Form = MyFormComponent;
|
||||
var FormRow = Form.Row;
|
||||
var FormLabel = Form.Label;
|
||||
var FormInput = Form.Input;
|
||||
|
||||
var App = (
|
||||
<Form>
|
||||
<FormRow>
|
||||
<FormLabel />
|
||||
<FormInput />
|
||||
</FormRow>
|
||||
</Form>
|
||||
);
|
||||
```
|
||||
|
||||
더 간단하고 쉽게 *네임스페이스를 사용한 컴포넌트*를 사용해서, 다른 컴포넌트를 어트리뷰트로 가지는 하나의 컴포넌트만 쓸 수 있습니다.
|
||||
|
||||
```javascript
|
||||
var Form = MyFormComponent;
|
||||
|
||||
var App = (
|
||||
<Form>
|
||||
<Form.Row>
|
||||
<Form.Label />
|
||||
<Form.Input />
|
||||
</Form.Row>
|
||||
</Form>
|
||||
);
|
||||
```
|
||||
|
||||
이렇게 하려면, *"sub-components"*를 메인 컴포넌트의 어트리뷰트로 만들 필요가 있습니다.
|
||||
|
||||
```javascript
|
||||
var MyFormComponent = React.createClass({ ... });
|
||||
|
||||
MyFormComponent.Row = React.createClass({ ... });
|
||||
MyFormComponent.Label = React.createClass({ ... });
|
||||
MyFormComponent.Input = React.createClass({ ... });
|
||||
```
|
||||
|
||||
코드를 컴파일할 때 JSX는 이것을 제대로 처리해 줍니다.
|
||||
|
||||
```javascript
|
||||
var App = (
|
||||
React.createElement(Form, null,
|
||||
React.createElement(Form.Row, null,
|
||||
React.createElement(Form.Label, null),
|
||||
React.createElement(Form.Input, null)
|
||||
)
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
> 주의:
|
||||
>
|
||||
> 이 기능은 [v0.11](/react/blog/2014/07/17/react-v0.11.html#jsx) 이상에만 있습니다.
|
||||
|
||||
## JavaScript 표현식
|
||||
|
||||
### 어트리뷰트 표현식
|
||||
|
||||
JavaScript 표현식을 어트리뷰트 값으로 사용하려면, 표현식을 쌍따옴표(`""`)대신 중괄호(`{}`)로 감싸야 합니다.
|
||||
|
||||
```javascript
|
||||
// 입력 (JSX):
|
||||
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
|
||||
// 출력 (JS):
|
||||
var person = React.createElement(
|
||||
Person,
|
||||
{name: window.isLoggedIn ? window.name : ''}
|
||||
);
|
||||
```
|
||||
|
||||
### 불린 어트리뷰트
|
||||
|
||||
어트리뷰트의 값을 생략하면 JSX는 값을 `true`로 취급합니다. 어트리뷰트 표현식에 `false`를 넘기려면 사용해야만 합니다. HTML 폼 엘리먼트에 `disabled`, `required`, `checked`, `readOnly`같은 어트리뷰트를 사용할 일이 자주 있습니다.
|
||||
|
||||
```javascript
|
||||
// JSX에서 이 두 줄은 똑같이 버튼을 비활성화합니다.
|
||||
<input type="button" disabled />;
|
||||
<input type="button" disabled={true} />;
|
||||
|
||||
// 그리고 JSX에서 이 두 줄은 똑같이 버튼을 비활성화하지 않습니다.
|
||||
<input type="button" />;
|
||||
<input type="button" disabled={false} />;
|
||||
```
|
||||
|
||||
### 자식 표현식
|
||||
|
||||
비슷하게, JavaScript 표현식을 자식을 표현하는 데 사용할 수 있습니다.
|
||||
|
||||
```javascript
|
||||
// 입력 (JSX):
|
||||
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
|
||||
// 출력 (JS):
|
||||
var content = React.createElement(
|
||||
Container,
|
||||
null,
|
||||
window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
|
||||
);
|
||||
```
|
||||
|
||||
### 주석
|
||||
|
||||
JSX에 주석을 넣기는 쉽습니다. 그냥 JS 표현식과 같습니다. 그냥 태그의 자식 섹션에서만 조심하시면 됩니다. 이럴 땐 주석 주변에 `{}`를 감싸야 합니다.
|
||||
|
||||
```javascript
|
||||
var content = (
|
||||
<Nav>
|
||||
{/* 자식 주석, {}로 감싼다 */}
|
||||
<Person
|
||||
/* 여러
|
||||
줄
|
||||
주석 */
|
||||
name={window.isLoggedIn ? window.name : ''} // 줄 끝부분 주석
|
||||
/>
|
||||
</Nav>
|
||||
);
|
||||
```
|
||||
|
||||
> 주의:
|
||||
>
|
||||
> JSX 는 HTML과 비슷하지만 완전히 같지는 않습니다. 중요한 차이점을 보시려면 [JSX gotchas](/react/docs/jsx-gotchas-ko-KR.html)를 보세요.
|
||||
@@ -1,224 +0,0 @@
|
||||
---
|
||||
id: jsx-in-depth
|
||||
title: JSX in Depth
|
||||
permalink: docs/jsx-in-depth.html
|
||||
prev: displaying-data.html
|
||||
next: jsx-spread.html
|
||||
---
|
||||
|
||||
[JSX](https://facebook.github.io/jsx/) is a JavaScript syntax extension that looks similar to XML. You can use a simple JSX syntactic transform with React.
|
||||
|
||||
## Why JSX?
|
||||
|
||||
You don't have to use JSX with React. You can just use plain JS. However, we recommend using JSX because it is a concise and familiar syntax for defining tree structures with attributes.
|
||||
|
||||
It's more familiar for casual developers such as designers.
|
||||
|
||||
XML has the benefit of balanced opening and closing tags. This helps make large trees easier to read than function calls or object literals.
|
||||
|
||||
It doesn't alter the semantics of JavaScript.
|
||||
|
||||
## HTML Tags vs. React Components
|
||||
|
||||
React can either render HTML tags (strings) or React components (classes).
|
||||
|
||||
To render an HTML tag, just use lower-case tag names in JSX:
|
||||
|
||||
```javascript
|
||||
var myDivElement = <div className="foo" />;
|
||||
ReactDOM.render(myDivElement, document.getElementById('example'));
|
||||
```
|
||||
|
||||
To render a React Component, just create a local variable that starts with an upper-case letter:
|
||||
|
||||
```javascript
|
||||
var MyComponent = React.createClass({/*...*/});
|
||||
var myElement = <MyComponent someProperty={true} />;
|
||||
ReactDOM.render(myElement, document.getElementById('example'));
|
||||
```
|
||||
|
||||
React's JSX uses the upper vs. lower case convention to distinguish between local component classes and HTML tags.
|
||||
|
||||
> Note:
|
||||
>
|
||||
> Since JSX is JavaScript, identifiers such as `class` and `for` are discouraged
|
||||
> as XML attribute names. Instead, React DOM components expect DOM property
|
||||
> names like `className` and `htmlFor`, respectively.
|
||||
|
||||
## The Transform
|
||||
|
||||
React JSX transforms from an XML-like syntax into native JavaScript. XML elements, attributes and children are transformed into arguments that are passed to `React.createElement`.
|
||||
|
||||
```javascript
|
||||
var Nav;
|
||||
// Input (JSX):
|
||||
var app = <Nav color="blue" />;
|
||||
// Output (JS):
|
||||
var app = React.createElement(Nav, {color:"blue"});
|
||||
```
|
||||
|
||||
Notice that in order to use `<Nav />`, the `Nav` variable must be in scope.
|
||||
|
||||
JSX also allows specifying children using XML syntax:
|
||||
|
||||
```javascript
|
||||
var Nav, Profile;
|
||||
// Input (JSX):
|
||||
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
|
||||
// Output (JS):
|
||||
var app = React.createElement(
|
||||
Nav,
|
||||
{color:"blue"},
|
||||
React.createElement(Profile, null, "click")
|
||||
);
|
||||
```
|
||||
|
||||
JSX will infer the class's [displayName](/react/docs/component-specs.html#displayname) from the variable assignment when the displayName is undefined:
|
||||
|
||||
```javascript
|
||||
// Input (JSX):
|
||||
var Nav = React.createClass({ });
|
||||
// Output (JS):
|
||||
var Nav = React.createClass({displayName: "Nav", });
|
||||
```
|
||||
|
||||
Use the [Babel REPL](https://babeljs.io/repl/) to try out JSX and see how it desugars into native JavaScript, and the [HTML to JSX converter](http://magic.reactjs.net/htmltojsx.htm) to convert your existing HTML to JSX.
|
||||
|
||||
If you want to use JSX, the [Getting Started](/react/docs/getting-started.html) guide shows how to set up compilation.
|
||||
|
||||
> Note:
|
||||
>
|
||||
> The JSX expression always evaluates to a ReactElement. The actual
|
||||
> implementation details may vary. An optimized mode could inline the
|
||||
> ReactElement as an object literal to bypass the validation code in
|
||||
> `React.createElement`.
|
||||
|
||||
## Namespaced Components
|
||||
|
||||
If you are building a component that has many children, like a form, you might end up with something with a lot of variable declarations:
|
||||
|
||||
```javascript
|
||||
// Awkward block of variable declarations
|
||||
var Form = MyFormComponent;
|
||||
var FormRow = Form.Row;
|
||||
var FormLabel = Form.Label;
|
||||
var FormInput = Form.Input;
|
||||
|
||||
var App = (
|
||||
<Form>
|
||||
<FormRow>
|
||||
<FormLabel />
|
||||
<FormInput />
|
||||
</FormRow>
|
||||
</Form>
|
||||
);
|
||||
```
|
||||
|
||||
To make it simpler and easier, *namespaced components* let you use one component that has other components as attributes:
|
||||
|
||||
```javascript
|
||||
var Form = MyFormComponent;
|
||||
|
||||
var App = (
|
||||
<Form>
|
||||
<Form.Row>
|
||||
<Form.Label />
|
||||
<Form.Input />
|
||||
</Form.Row>
|
||||
</Form>
|
||||
);
|
||||
```
|
||||
|
||||
To do this, you just need to create your *"sub-components"* as attributes of the main component:
|
||||
|
||||
```javascript
|
||||
var MyFormComponent = React.createClass({ ... });
|
||||
|
||||
MyFormComponent.Row = React.createClass({ ... });
|
||||
MyFormComponent.Label = React.createClass({ ... });
|
||||
MyFormComponent.Input = React.createClass({ ... });
|
||||
```
|
||||
|
||||
JSX will handle this properly when compiling your code.
|
||||
|
||||
```javascript
|
||||
var App = (
|
||||
React.createElement(Form, null,
|
||||
React.createElement(Form.Row, null,
|
||||
React.createElement(Form.Label, null),
|
||||
React.createElement(Form.Input, null)
|
||||
)
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
> Note:
|
||||
>
|
||||
> This feature is available in [v0.11](/react/blog/2014/07/17/react-v0.11.html#jsx) and above.
|
||||
|
||||
## JavaScript Expressions
|
||||
|
||||
### Attribute Expressions
|
||||
|
||||
To use a JavaScript expression as an attribute value, wrap the expression in a pair of curly braces (`{}`) instead of quotes (`""`).
|
||||
|
||||
```javascript
|
||||
// Input (JSX):
|
||||
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
|
||||
// Output (JS):
|
||||
var person = React.createElement(
|
||||
Person,
|
||||
{name: window.isLoggedIn ? window.name : ''}
|
||||
);
|
||||
```
|
||||
|
||||
### Boolean Attributes
|
||||
|
||||
Omitting the value of an attribute causes JSX to treat it as `true`. To pass `false` an attribute expression must be used. This often comes up when using HTML form elements, with attributes like `disabled`, `required`, `checked` and `readOnly`.
|
||||
|
||||
```javascript
|
||||
// These two are equivalent in JSX for disabling a button
|
||||
<input type="button" disabled />;
|
||||
<input type="button" disabled={true} />;
|
||||
|
||||
// And these two are equivalent in JSX for not disabling a button
|
||||
<input type="button" />;
|
||||
<input type="button" disabled={false} />;
|
||||
```
|
||||
|
||||
### Child Expressions
|
||||
|
||||
Likewise, JavaScript expressions may be used to express children:
|
||||
|
||||
```javascript
|
||||
// Input (JSX):
|
||||
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
|
||||
// Output (JS):
|
||||
var content = React.createElement(
|
||||
Container,
|
||||
null,
|
||||
window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
|
||||
);
|
||||
```
|
||||
|
||||
### Comments
|
||||
|
||||
It's easy to add comments within your JSX; they're just JS expressions. You just need to be careful to put `{}` around the comments when you are within the children section of a tag.
|
||||
|
||||
```javascript
|
||||
var content = (
|
||||
<Nav>
|
||||
{/* child comment, put {} around */}
|
||||
<Person
|
||||
/* multi
|
||||
line
|
||||
comment */
|
||||
name={window.isLoggedIn ? window.name : ''} // end of line comment
|
||||
/>
|
||||
</Nav>
|
||||
);
|
||||
```
|
||||
|
||||
> NOTE:
|
||||
>
|
||||
> JSX is similar to HTML, but not exactly the same. See [JSX gotchas](/react/docs/jsx-gotchas.html) for some key differences.
|
||||
@@ -1,224 +0,0 @@
|
||||
---
|
||||
id: jsx-in-depth-zh-CN
|
||||
title: 深入 JSX
|
||||
permalink: docs/jsx-in-depth-zh-CN.html
|
||||
prev: displaying-data-zh-CN.html
|
||||
next: jsx-spread-zh-CN.html
|
||||
---
|
||||
|
||||
[JSX](https://facebook.github.io/jsx/) 是一个看起来很像 XML 的 JavaScript 语法扩展。React 可以用来做简单的 JSX 句法转换。
|
||||
|
||||
## 为什么要用 JSX？
|
||||
|
||||
你不需要为了 React 使用 JSX，可以直接使用原生 JS。但是，我们建议使用 JSX 是因为它能精确，也是常用的定义包含属性的树状结构的语法。
|
||||
|
||||
它对于非专职开发者比如设计师也比较熟悉。
|
||||
|
||||
XML 有固定的标签开启和闭合的优点。这能让复杂的树更易于阅读，优于方法调用和对象字面量的形式。
|
||||
|
||||
它没有修改 JavaScript 语义。
|
||||
|
||||
|
||||
## HTML 标签对比 React 组件
|
||||
|
||||
React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
|
||||
|
||||
要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名。
|
||||
|
||||
```javascript
|
||||
var myDivElement = <div className="foo" />;
|
||||
ReactDOM.render(myDivElement, document.getElementById('example'));
|
||||
```
|
||||
|
||||
要渲染 React 组件，只需创建一个大写字母开头的本地变量。
|
||||
|
||||
```javascript
|
||||
var MyComponent = React.createClass({/*...*/});
|
||||
var myElement = <MyComponent someProperty={true} />;
|
||||
ReactDOM.render(myElement, document.getElementById('example'));
|
||||
```
|
||||
|
||||
React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。
|
||||
|
||||
> 注意:
|
||||
>
|
||||
> 由于 JSX 就是 JavaScript，一些标识符像 `class` 和 `for` 不建议作为 XML
|
||||
> 属性名。作为替代，React DOM 使用 `className` 和 `htmlFor` 来做对应的属性。
|
||||
|
||||
## 转换（Transform）
|
||||
|
||||
JSX 把类 XML 的语法转成原生 JavaScript，XML 元素、属性和子节点被转换成 `React.createElement` 的参数。
|
||||
|
||||
```javascript
|
||||
var Nav;
|
||||
// 输入 (JSX):
|
||||
var app = <Nav color="blue" />;
|
||||
// 输出 (JS):
|
||||
var app = React.createElement(Nav, {color:"blue"});
|
||||
```
|
||||
|
||||
注意，要想使用 `<Nav />`，`Nav` 变量一定要在作用区间内。
|
||||
|
||||
JSX 也支持使用 XML 语法定义子结点：
|
||||
|
||||
```javascript
|
||||
var Nav, Profile;
|
||||
// 输入 (JSX):
|
||||
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
|
||||
// 输出 (JS):
|
||||
var app = React.createElement(
|
||||
Nav,
|
||||
{color:"blue"},
|
||||
React.createElement(Profile, null, "click")
|
||||
);
|
||||
```
|
||||
|
||||
当显示名称没有定义时，JSX 会根据变量赋值来推断类的 [显示名称](/react/docs/component-specs.html#displayname) :
|
||||
|
||||
```javascript
|
||||
// 输入 (JSX):
|
||||
var Nav = React.createClass({ });
|
||||
// 输出 (JS):
|
||||
var Nav = React.createClass({displayName: "Nav", });
|
||||
```
|
||||
|
||||
使用 [JSX 编译器](/react/jsx-compiler.html) 来试用 JSX 并理解它是如何转换到原生 JavaScript，还有 [HTML 到 JSX 转换器](http://magic.reactjs.net/htmltojsx.htm) 来把现有 HTML 转成 JSX。
|
||||
|
||||
如果你要使用 JSX，这篇 [新手入门](/react/docs/getting-started.html) 教程来教你如何搭建环境。
|
||||
|
||||
> 注意:
|
||||
>
|
||||
>
|
||||
> JSX 表达式总是会当作 ReactElement 执行。具体的实际细节可能不同。一种优化
|
||||
> 的模式是把 ReactElement 当作一个行内的对象字面量形式来绕过
|
||||
> `React.createElement` 里的校验代码。
|
||||
|
||||
## 命名组件（Namespaced Components）
|
||||
|
||||
如果你正在构建一个有很多子组件的组件，比如表单，你也许会最终得到许多的变量声明。
|
||||
|
||||
```javascript
|
||||
// 尴尬的变量声明块
|
||||
var Form = MyFormComponent;
|
||||
var FormRow = Form.Row;
|
||||
var FormLabel = Form.Label;
|
||||
var FormInput = Form.Input;
|
||||
|
||||
var App = (
|
||||
<Form>
|
||||
<FormRow>
|
||||
<FormLabel />
|
||||
<FormInput />
|
||||
</FormRow>
|
||||
</Form>
|
||||
);
|
||||
```
|
||||
|
||||
为了使其更简单和容易，*命名组件*令你使用包含其他组件作为属性的单一的组件。
|
||||
|
||||
```javascript
|
||||
var Form = MyFormComponent;
|
||||
|
||||
var App = (
|
||||
<Form>
|
||||
<Form.Row>
|
||||
<Form.Label />
|
||||
<Form.Input />
|
||||
</Form.Row>
|
||||
</Form>
|
||||
);
|
||||
```
|
||||
|
||||
要做到这一点，你只需要把你的*"子组件"*创建为主组件的属性。
|
||||
|
||||
```javascript
|
||||
var MyFormComponent = React.createClass({ ... });
|
||||
|
||||
MyFormComponent.Row = React.createClass({ ... });
|
||||
MyFormComponent.Label = React.createClass({ ... });
|
||||
MyFormComponent.Input = React.createClass({ ... });
|
||||
```
|
||||
|
||||
当编译你的代码时，JSX会恰当的进行处理。
|
||||
|
||||
```javascript
|
||||
var App = (
|
||||
React.createElement(Form, null,
|
||||
React.createElement(Form.Row, null,
|
||||
React.createElement(Form.Label, null),
|
||||
React.createElement(Form.Input, null)
|
||||
)
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
> 注意:
|
||||
>
|
||||
> 此特性在 [v0.11](/react/blog/2014/07/17/react-v0.11.html#jsx) 及以上可用.
|
||||
|
||||
## JavaScript 表达式
|
||||
|
||||
### 属性表达式
|
||||
|
||||
要使用 JavaScript 表达式作为属性值，只需把这个表达式用一对大括号 (`{}`) 包起来，不要用引号 (`""`)。
|
||||
|
||||
```javascript
|
||||
// 输入 (JSX):
|
||||
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
|
||||
// 输出 (JS):
|
||||
var person = React.createElement(
|
||||
Person,
|
||||
{name: window.isLoggedIn ? window.name : ''}
|
||||
);
|
||||
```
|
||||
|
||||
### Boolean 属性
|
||||
|
||||
省略一个属性的值会导致JSX把它当做 `true`。要传值 `false`必须使用属性表达式。这常出现于使用HTML表单元素，含有属性如`disabled`, `required`, `checked` 和 `readOnly`。
|
||||
|
||||
```javascript
|
||||
// 在JSX中，对于禁用按钮这二者是相同的。
|
||||
<input type="button" disabled />;
|
||||
<input type="button" disabled={true} />;
|
||||
|
||||
// 在JSX中，对于不禁用按钮这二者是相同的。
|
||||
<input type="button" />;
|
||||
<input type="button" disabled={false} />;
|
||||
```
|
||||
|
||||
### 子节点表达式
|
||||
|
||||
同样地，JavaScript 表达式可用于描述子结点：
|
||||
|
||||
```javascript
|
||||
// 输入 (JSX):
|
||||
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
|
||||
// 输出 (JS):
|
||||
var content = React.createElement(
|
||||
Container,
|
||||
null,
|
||||
window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
|
||||
);
|
||||
```
|
||||
|
||||
### 注释
|
||||
|
||||
JSX 里添加注释很容易；它们只是 JS 表达式而已。你仅仅需要小心的是当你在一个标签的子节点块时，要用 `{}` 包围要注释的部分。
|
||||
|
||||
```javascript
|
||||
var content = (
|
||||
<Nav>
|
||||
{/* child comment, 用 {} 包围 */}
|
||||
<Person
|
||||
/* 多
|
||||
行
|
||||
注释 */
|
||||
name={window.isLoggedIn ? window.name : ''} // 行尾注释
|
||||
/>
|
||||
</Nav>
|
||||
);
|
||||
```
|
||||
|
||||
> 注意:
|
||||
>
|
||||
> JSX 类似于 HTML，但不完全一样。参考 [JSX 陷阱](/react/docs/jsx-gotchas-zh-CN.html) 了解主要不同。
|
||||
@@ -1,52 +0,0 @@
|
||||
---
|
||||
id: jsx-spread-it-IT
|
||||
title: Attributi Spread JSX
|
||||
permalink: docs/jsx-spread-it-IT.html
|
||||
prev: jsx-in-depth-it-IT.html
|
||||
next: jsx-gotchas-it-IT.html
|
||||
---
|
||||
|
||||
Se sai in anticipo che tutte le proprietà che desideri assegnare ad un componente, usare JSX è facile:
|
||||
|
||||
```javascript
|
||||
var component = <Component foo={x} bar={y} />;
|
||||
```
|
||||
|
||||
## Le Props Mutevoli sono il Male
|
||||
|
||||
Se non sai quali proprietà desideri impostare, potresti essere tentato di aggiungerle all'oggetto in seguito:
|
||||
|
||||
```javascript
|
||||
var component = <Component />;
|
||||
component.props.foo = x; // male
|
||||
component.props.bar = y; // altrettanto male
|
||||
```
|
||||
|
||||
Questo è un anti-pattern perché significa che non possiamo aiutarti a verificare i propTypes per tempo. Ciò significa che i tuoi errori di propTypes finiscono per avere uno stack trace indecifrabile.
|
||||
|
||||
Le props dovrebbero essere considerate immutabili. Mutare l'oggetto props altrove potrebbe causare conseguenze inattese, quindi a questo punto dovrebbe essere idealmente considerato un oggetto congelato.
|
||||
|
||||
## Attributi Spread
|
||||
|
||||
Adesso puoi utilizzare una nuova caratteristica di JSX chiamata attributi spread:
|
||||
|
||||
```javascript
|
||||
var props = {};
|
||||
props.foo = x;
|
||||
props.bar = y;
|
||||
var component = <Component {...props} />;
|
||||
```
|
||||
|
||||
Le proprietà dell'oggetto che passi al componente sono copiate nelle sue props.
|
||||
|
||||
Puoi usarlo più volte o combinarlo con altri attributi. L'ordine in cui sono specificati è rilevante. Attributi successivi ridefiniscono quelli precedentemente impostati.
|
||||
|
||||
```javascript
|
||||
var props = { foo: 'default' };
|
||||
var component = <Component {...props} foo={'override'} />;
|
||||
console.log(component.props.foo); // 'override'
|
||||
```
|
||||
|
||||
## Cos'è la strana notazione `...`?
|
||||
|
||||
L'operatore `...` (o operatore spread) è già supportato per gli [array in ES6](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator). Esiste anche una proposta per ES7 per le proprietà [Spread e Rest di Object](https://github.com/sebmarkbage/ecmascript-rest-spread). Stiamo prendendo spunto da questi standard supportati o in corso di sviluppo per fornire una sintassi più pulita a JSX.
|
||||
@@ -1,52 +0,0 @@
|
||||
---
|
||||
id: jsx-spread
|
||||
title: JSXの拡張属性
|
||||
permalink: docs/jsx-spread-ja-JP.html
|
||||
prev: jsx-in-depth-ja-JP.html
|
||||
next: jsx-gotchas-ja-JP.html
|
||||
---
|
||||
|
||||
以下のように、コンポーネントにどのようなプロパティを配置したいか前もって全て分かっている場合は、JSXを使うことは簡単です。
|
||||
|
||||
```javascript
|
||||
var component = <Component foo={x} bar={y} />;
|
||||
```
|
||||
|
||||
## Propsを変更してはいけない
|
||||
|
||||
セットしたいプロパティが分からない場合は、以下のように後からオブジェクトに追加したいと思うでしょう。
|
||||
|
||||
```javascript
|
||||
var component = <Component />;
|
||||
component.props.foo = x; // だめ
|
||||
component.props.bar = y; // 同様にだめ
|
||||
```
|
||||
|
||||
これはアンチパターンです。なぜなら、後々まで正しいpropTypesであるかどうかチェックすることを助けることができないことを意味するからです。これは、propTypesのエラーが隠されたスタックトレースに出力されて終わってしまうことを意味します。
|
||||
|
||||
propsは変更不可と考えられるべきです。propsのオブジェクトをどこかで変更することは予期せぬ結果を発生させる可能性があるので、理想的には、この時点ではpropsは固定のオブジェクトであるべきです。
|
||||
|
||||
## 拡張属性
|
||||
|
||||
以下のように、拡張属性というJSXの新しい特徴を使うことができます。
|
||||
|
||||
```javascript
|
||||
var props = {};
|
||||
props.foo = x;
|
||||
props.bar = y;
|
||||
var component = <Component {...props} />;
|
||||
```
|
||||
|
||||
あなたが渡したオブジェクトのプロパティはコンポーネントのpropsにコピーされます。
|
||||
|
||||
これを複数回使用したり、他の属性と組み合わせたりすることもできます。仕様書では、順序が重要となっています。後の属性は前の属性をオーバーライドします。
|
||||
|
||||
```javascript
|
||||
var props = { foo: 'default' };
|
||||
var component = <Component {...props} foo={'override'} />;
|
||||
console.log(component.props.foo); // 'override'
|
||||
```
|
||||
|
||||
## 奇妙な `...` という表現は何でしょうか？
|
||||
|
||||
`...` 操作（拡張操作）は既に[ES6のarrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator)でサポートされています。[Object Rest と Spread Properties](https://github.com/sebmarkbage/ecmascript-rest-spread)のES7のプロポーザルもあります。JSXのきれいなシンタックスを供給するために、それらのサポートや開発中の標準使用を利用しています。
|
||||
@@ -1,52 +0,0 @@
|
||||
---
|
||||
id: jsx-spread-ko-KR
|
||||
title: JSX 스프레드 어트리뷰트
|
||||
permalink: docs/jsx-spread-ko-KR.html
|
||||
prev: jsx-in-depth-ko-KR.html
|
||||
next: jsx-gotchas-ko-KR.html
|
||||
---
|
||||
|
||||
미리 컴포넌트에 넣을 모든 프로퍼티를 알게 된다면, JSX를 사용하기 쉬워집니다.
|
||||
|
||||
```javascript
|
||||
var component = <Component foo={x} bar={y} />;
|
||||
```
|
||||
|
||||
## Props의 변경은 나빠요
|
||||
|
||||
하지만 어떤 프로퍼티를 설정하고 싶은지 모른다면, 객체 레이어에 넣고 싶어질 수도 있습니다.
|
||||
|
||||
```javascript
|
||||
var component = <Component />;
|
||||
component.props.foo = x; // 나쁨
|
||||
component.props.bar = y; // 역시 나쁨
|
||||
```
|
||||
|
||||
이것은 안티 패턴입니다. 왜냐하면 한참 뒤까지 정확한 propTypes을 체크할 수 없다는 뜻이기 때문입니다. 이것은 propTypes 에러는 알기 힘든 스택 트레이스로 끝난다는 의미입니다.
|
||||
|
||||
props는 변하지 않는 것으로 간주해야 합니다. props 객체를 변경하는 것은 다른 곳에서 예기치 못한 결과가 생길 수 있기 때문에 이상적으로는 이 시점에서 frozen 객체가 되어야 합니다.
|
||||
|
||||
## 스프레드 어트리뷰트
|
||||
|
||||
이제 JSX의 새로운 기능인 스프레드 어트리뷰트를 사용하실 수 있습니다.
|
||||
|
||||
```javascript
|
||||
var props = {};
|
||||
props.foo = x;
|
||||
props.bar = y;
|
||||
var component = <Component {...props} />;
|
||||
```
|
||||
|
||||
전달한 객체의 프로퍼티가 컴포넌트의 props에 복사됩니다.
|
||||
|
||||
이렇게 여러 번 사용하거나 다른 어트리뷰트와 조합해서 사용할 수 있습니다. 명세의 순서는 중요합니다. 나중의 어트리뷰트가 이전 것보다 우선되기 때문입니다.
|
||||
|
||||
```javascript
|
||||
var props = { foo: 'default' };
|
||||
var component = <Component {...props} foo={'override'} />;
|
||||
console.log(component.props.foo); // 'override'
|
||||
```
|
||||
|
||||
## 이상한 `...` 표기법은 무엇인가요?
|
||||
|
||||
`...` 연산자(스프레드 연산자)는 이미 [ES6의 배열](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator)에서 지원합니다. [객체 rest와 스프레드 프로퍼티](https://github.com/sebmarkbage/ecmascript-rest-spread)에 대한 ES7의 제안도 있습니다. JSX의 구문을 더 깔끔하게 하기 위해 지원되고 개발중인 표준을 활용하고 있습니다.
|
||||
@@ -1,52 +0,0 @@
|
||||
---
|
||||
id: jsx-spread
|
||||
title: JSX Spread Attributes
|
||||
permalink: docs/jsx-spread.html
|
||||
prev: jsx-in-depth.html
|
||||
next: jsx-gotchas.html
|
||||
---
|
||||
|
||||
If you know all the properties that you want to place on a component ahead of time, it is easy to use JSX:
|
||||
|
||||
```javascript
|
||||
var component = <Component foo={x} bar={y} />;
|
||||
```
|
||||
|
||||
## Mutating Props is Bad
|
||||
|
||||
If you don't know which properties you want to set, you might be tempted to add them onto the object later:
|
||||
|
||||
```javascript
|
||||
var component = <Component />;
|
||||
component.props.foo = x; // bad
|
||||
component.props.bar = y; // also bad
|
||||
```
|
||||
|
||||
This is an anti-pattern because it means that we can't help you check the right propTypes until way later. This means that your propTypes errors end up with a cryptic stack trace.
|
||||
|
||||
The props should be considered immutable. Mutating the props object somewhere else could cause unexpected consequences so ideally it would be a frozen object at this point.
|
||||
|
||||
## Spread Attributes
|
||||
|
||||
Now you can use a new feature of JSX called spread attributes:
|
||||
|
||||
```javascript
|
||||
var props = {};
|
||||
props.foo = x;
|
||||
props.bar = y;
|
||||
var component = <Component {...props} />;
|
||||
```
|
||||
|
||||
The properties of the object that you pass in are copied onto the component's props.
|
||||
|
||||
You can use this multiple times or combine it with other attributes. The specification order is important. Later attributes override previous ones.
|
||||
|
||||
```javascript
|
||||
var props = { foo: 'default' };
|
||||
var component = <Component {...props} foo={'override'} />;
|
||||
console.log(component.props.foo); // 'override'
|
||||
```
|
||||
|
||||
## What's with the weird `...` notation?
|
||||
|
||||
The `...` operator (or spread operator) is already supported for [arrays in ES6](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator). There is also an ECMAScript proposal for [Object Rest and Spread Properties](https://github.com/sebmarkbage/ecmascript-rest-spread). We're taking advantage of these supported and developing standards in order to provide a cleaner syntax in JSX.
|
||||
@@ -1,52 +0,0 @@
|
||||
---
|
||||
id: jsx-spread-zh-CN
|
||||
title: JSX 展开属性
|
||||
permalink: docs/jsx-spread-zh-CN.html
|
||||
prev: jsx-in-depth-zh-CN.html
|
||||
next: jsx-gotchas-zh-CN.html
|
||||
---
|
||||
|
||||
如果你事先知道组件需要的全部 Props（属性），JSX 很容易地这样写：
|
||||
|
||||
```javascript
|
||||
var component = <Component foo={x} bar={y} />;
|
||||
```
|
||||
|
||||
## 修改 Props 是不好的，明白吗
|
||||
|
||||
如果你不知道要设置哪些 Props，那么现在最好不要设置它：
|
||||
|
||||
```javascript
|
||||
var component = <Component />;
|
||||
component.props.foo = x; // 不好
|
||||
component.props.bar = y; // 同样不好
|
||||
```
|
||||
|
||||
这样是反模式，因为 React 不能帮你检查属性类型（propTypes）。这样即使你的 属性类型有错误也不能得到清晰的错误提示。
|
||||
|
||||
Props 应该被认为是不可变的。在别处修改 props 对象可能会导致预料之外的结果，所以原则上这将是一个冻结的对象。
|
||||
|
||||
## 展开属性（Spread Attributes）
|
||||
|
||||
现在你可以使用 JSX 的新特性 - 展开属性：
|
||||
|
||||
```javascript
|
||||
var props = {};
|
||||
props.foo = x;
|
||||
props.bar = y;
|
||||
var component = <Component {...props} />;
|
||||
```
|
||||
|
||||
传入对象的属性会被复制到组件内。
|
||||
|
||||
它能被多次使用，也可以和其它属性一起用。注意顺序很重要，后面的会覆盖掉前面的。
|
||||
|
||||
```javascript
|
||||
var props = { foo: 'default' };
|
||||
var component = <Component {...props} foo={'override'} />;
|
||||
console.log(component.props.foo); // 'override'
|
||||
```
|
||||
|
||||
## 这个奇怪的 `...` 标记是什么？
|
||||
|
||||
这个 `...` 操作符（增强的操作符）已经被 [ES6 数组](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator) 支持。相关的还有 ECMAScript 规范草案中的 [Object 剩余和展开属性（Rest and Spread Properties）](https://github.com/sebmarkbage/ecmascript-rest-spread)。我们利用了这些还在制定中标准中已经被支持的特性来使 JSX 拥有更优雅的语法。
|
||||
@@ -1,68 +0,0 @@
|
||||
---
|
||||
id: jsx-gotchas-it-IT
|
||||
title: JSX Gotchas
|
||||
permalink: docs/jsx-gotchas-it-IT.html
|
||||
prev: jsx-spread-it-IT.html
|
||||
next: interactivity-and-dynamic-uis-it-IT.html
|
||||
---
|
||||
|
||||
JSX somiglia all'HTML ma ci sono delle differenze importanti da tenere in considerazione.
|
||||
|
||||
> Nota:
|
||||
>
|
||||
> Per le differenze del DOM, come l'attributo `style` in linea, consulta [here](/react/docs/dom-differences-it-IT.html).
|
||||
|
||||
## Entità HTML
|
||||
|
||||
Puoi inserire entità HTML nel testo letterale in JSX:
|
||||
|
||||
```javascript
|
||||
<div>Primo · Secondo</div>
|
||||
```
|
||||
|
||||
Se desideri visualizzare un'entità HTML all'interno di un contenuto dinamico, avrai problemi con il doppio escape, poiché React effettua in maniera predefinita l'escape di tutte le stringhe visualizzate per prevenire un'ampia gamma di attacchi XSS.
|
||||
|
||||
```javascript
|
||||
// Male: Mostra "Primo · Secondo"
|
||||
<div>{'Primo · Secondo'}</div>
|
||||
```
|
||||
|
||||
Esistono molte maniere di aggirare questo problema. La più facile è scrivere i caratteri Unicode direttamente in JavaScript. Dovrai assicurarti che il file sia salvato come UTF-8 e che le appropriate direttive UTF-8 siano impostate in modo che il browser li visualizzi correttamente.
|
||||
|
||||
```javascript
|
||||
<div>{'Primo · Secondo'}</div>
|
||||
```
|
||||
|
||||
Un'alternativa più sicura consiste nel trovare il [codice Unicode corrispondente all'entità](http://www.fileformat.info/info/unicode/char/b7/index.htm) e usarlo all'interno di una stringa JavaScript.
|
||||
|
||||
```javascript
|
||||
<div>{'Primo \u00b7 Secondo'}</div>
|
||||
<div>{'Primo ' + String.fromCharCode(183) + ' Secondo'}</div>
|
||||
```
|
||||
|
||||
Puoi usare array misti con stringhe ed elementi JSX.
|
||||
|
||||
```javascript
|
||||
<div>{['Primo ', <span>·</span>, ' Secondo']}</div>
|
||||
```
|
||||
|
||||
Come ultima risorsa, puoi sempre [inserire HTML nativo](/react/tips/dangerously-set-inner-html.html).
|
||||
|
||||
```javascript
|
||||
<div dangerouslySetInnerHTML={{'{{'}}__html: 'Primo · Secondo'}} />
|
||||
```
|
||||
|
||||
|
||||
## Attributi HTML Personalizzati
|
||||
|
||||
Se passi proprietà che non esistono nella specifica HTML ad elementi HTML nativi, React li ignorerà. Se vuoi usare un attributo personalizzato, devi prefiggerlo con `data-`.
|
||||
|
||||
```javascript
|
||||
<div data-custom-attribute="foo" />
|
||||
```
|
||||
|
||||
Gli attributi per [l'Accessibilità del Web](http://www.w3.org/WAI/intro/aria) che iniziano per `aria-` saranno gestiti correttamente.
|
||||
|
||||
```javascript
|
||||
<div aria-hidden={true} />
|
||||
```
|
||||
@@ -1,68 +0,0 @@
|
||||
---
|
||||
id: jsx-gotchas
|
||||
title: JSXの理解
|
||||
permalink: docs/jsx-gotchas-ja-JP.html
|
||||
prev: jsx-spread-ja-JP.html
|
||||
next: interactivity-and-dynamic-uis-ja-JP.html
|
||||
|
||||
---
|
||||
|
||||
JSXはHTMLに似ていますが、重要な違いがいくつかあります。
|
||||
|
||||
> 注意:
|
||||
> インラインの `style` 属性のようなDOMの違いについては、[こちら](/react/docs/dom-differences.html)を確認してください。
|
||||
|
||||
## HTMLのエンティティ
|
||||
|
||||
以下のように、JSXの文字のテキストの中にHTMLのエンティティを挿入することができます。
|
||||
|
||||
```javascript
|
||||
<div>First · Second</div>
|
||||
```
|
||||
|
||||
動的なコンテンツとしてHTMLのエンティティを表示する際に、ダブルエスケープを書いてしまうことがあるかと思いますが、Reactはデフォルトで広い範囲のXSS攻撃を防ぐために表示しようとしている全ての文字列をエスケープします。
|
||||
|
||||
```javascript
|
||||
// 悪い例: 以下は "First · Second" を表示します。
|
||||
<div>{'First · Second'}</div>
|
||||
```
|
||||
|
||||
この問題を防止するためにはいくつかの方法があります。最も簡単な方法は、unicodeの文字を直でJavaScriptに記述する方法です。その際には、ファイルがUTF-8で保存されていることと、ブラウザが正しく表示できるように、UTF-8で表示する命令が正しくセットされていることを確認してください。
|
||||
|
||||
```javascript
|
||||
<div>{'First · Second'}</div>
|
||||
```
|
||||
|
||||
さらに安全な代替の方法は、[エンティティに対応するunicodeの数値](http://www.fileformat.info/info/unicode/char/b7/index.htm)を見つけて、JavaScriptの文字列の中でそれを使うことです。
|
||||
|
||||
```javascript
|
||||
<div>{'First \u00b7 Second'}</div>
|
||||
<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>
|
||||
```
|
||||
|
||||
配列と文字列とJSXの要素を混ぜて使うこともできます。
|
||||
|
||||
```javascript
|
||||
<div>{['First ', <span>·</span>, ' Second']}</div>
|
||||
```
|
||||
|
||||
最後の手段として、常に[生のHTMLを挿入](/react/tips/dangerously-set-inner-html.html)することもできます。
|
||||
|
||||
```javascript
|
||||
<div dangerouslySetInnerHTML={{'{{'}}__html: 'First · Second'}} />
|
||||
```
|
||||
|
||||
|
||||
## カスタムされたHTMLの属性
|
||||
|
||||
HTMLの仕様書に存在しない要素をネイティブなHTML要素に渡した場合は、Reactはそれらをレンダリングしません。カスタムした属性を使う場合は、 `data-` を頭につけてください。
|
||||
|
||||
```javascript
|
||||
<div data-custom-attribute="foo" />
|
||||
```
|
||||
|
||||
`aria-` から始まる[Webアクセシビリティ](http://www.w3.org/WAI/intro/aria)属性はプロパティをレンダリングします。
|
||||
|
||||
```javascript
|
||||
<div aria-hidden={true} />
|
||||
```
|
||||
@@ -1,68 +0,0 @@
|
||||
---
|
||||
id: jsx-gotchas-ko-KR
|
||||
title: JSX Gotchas
|
||||
permalink: docs/jsx-gotchas-ko-KR.html
|
||||
prev: jsx-spread-ko-KR.html
|
||||
next: interactivity-and-dynamic-uis-ko-KR.html
|
||||
---
|
||||
|
||||
JSX는 HTML처럼 보이지만, 작업하다 보면 마주치게 될 몇 가지 중요한 차이점이 있습니다.
|
||||
|
||||
> 주의:
|
||||
>
|
||||
> 인라인 `style` 어트리뷰트 같은 DOM과의 차이점은 [여기](/react/tips/dangerously-set-inner-html-ko-KR.html)를 보세요.
|
||||
|
||||
## HTML 엔티티
|
||||
|
||||
JSX의 리터럴 텍스트에 HTML 엔티티를 넣을 수 있습니다.
|
||||
|
||||
```javascript
|
||||
<div>First · Second</div>
|
||||
```
|
||||
|
||||
동적 콘텐츠 안에 HTML 엔티티를 표시하려 할 때, React에서는 XSS 공격을 광범위하게 막기 위해서 기본적으로 모든 표시하는 문자열을 이스케이프 하기 때문에 더블 이스케이프 문제에 부딪히게 됩니다.
|
||||
|
||||
```javascript
|
||||
// 나쁨: "First · Second"를 표시
|
||||
<div>{'First · Second'}</div>
|
||||
```
|
||||
|
||||
이 이슈를 피해 갈 방법은 여럿 있지만, 가장 쉬운 방법은 유니코드 문자를 JavaScript에 직접 쓰는 것입니다. 브라우저가 올바르게 표시하도록 파일이 UTF-8으로 저장되어 있고 올바른 UTF-8 지시자를 사용하고 있는지 확인해야 합니다.
|
||||
|
||||
```javascript
|
||||
<div>{'First · Second'}</div>
|
||||
```
|
||||
|
||||
더 안전한 대안으로 [엔티티에 대응하는 유니코드 숫자](http://www.fileformat.info/info/unicode/char/b7/index.htm)를 찾아 JavaScript 문자열 안에서 사용하는 방법도 있습니다.
|
||||
|
||||
```javascript
|
||||
<div>{'First \u00b7 Second'}</div>
|
||||
<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>
|
||||
```
|
||||
|
||||
문자열과 JSX 엘리먼트를 혼합한 배열을 사용할 수도 있습니다.
|
||||
|
||||
```javascript
|
||||
<div>{['First ', <span>·</span>, ' Second']}</div>
|
||||
```
|
||||
|
||||
최후의 수단으로, 항상 [생 HTML을 삽입](/react/docs/dom-differences-ko-KR.html)할 수 있습니다.
|
||||
|
||||
```javascript
|
||||
<div dangerouslySetInnerHTML={{'{{'}}__html: 'First · Second'}} />
|
||||
```
|
||||
|
||||
|
||||
## 커스텀 HTML 어트리뷰트
|
||||
|
||||
프로퍼티를 HTML 사양에는 없는 네이티브 HTML 엘리먼트에 넘기면, React는 그 프로퍼티를 렌더하지 않습니다. 커스텀 어트리뷰트를 사용하고 싶다면, 접두사로 `data-`를 붙이셔야 합니다.
|
||||
|
||||
```javascript
|
||||
<div data-custom-attribute="foo" />
|
||||
```
|
||||
|
||||
`aria-`로 시작하는 [Web 접근성](http://www.w3.org/WAI/intro/aria) 어트리뷰트는 제대로 렌더될 것입니다.
|
||||
|
||||
```javascript
|
||||
<div aria-hidden={true} />
|
||||
```
|
||||
@@ -1,74 +0,0 @@
|
||||
---
|
||||
id: jsx-gotchas
|
||||
title: JSX Gotchas
|
||||
permalink: docs/jsx-gotchas.html
|
||||
prev: jsx-spread.html
|
||||
next: interactivity-and-dynamic-uis.html
|
||||
---
|
||||
|
||||
JSX looks like HTML but there are some important differences you may run into.
|
||||
|
||||
> Note:
|
||||
>
|
||||
> For DOM differences, such as the inline `style` attribute, check [here](/react/docs/dom-differences.html).
|
||||
|
||||
## HTML Entities
|
||||
|
||||
You can insert HTML entities within literal text in JSX:
|
||||
|
||||
```javascript
|
||||
<div>First · Second</div>
|
||||
```
|
||||
|
||||
If you want to display an HTML entity within dynamic content, you will run into double escaping issues as React escapes all the strings you are displaying in order to prevent a wide range of XSS attacks by default.
|
||||
|
||||
```javascript
|
||||
// Bad: It displays "First · Second"
|
||||
<div>{'First · Second'}</div>
|
||||
```
|
||||
|
||||
There are various ways to work-around this issue. The easiest one is to write Unicode characters directly in JavaScript. You need to make sure that the file is saved as UTF-8 and that the proper UTF-8 directives are set so the browser will display it correctly.
|
||||
|
||||
```javascript
|
||||
<div>{'First · Second'}</div>
|
||||
```
|
||||
|
||||
A safer alternative is to find the [unicode number corresponding to the entity](http://www.fileformat.info/info/unicode/char/b7/index.htm) and use it inside of a JavaScript string.
|
||||
|
||||
```javascript
|
||||
<div>{'First \u00b7 Second'}</div>
|
||||
<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>
|
||||
```
|
||||
|
||||
You can use mixed arrays with strings and JSX elements. Each JSX element in the array needs a unique key.
|
||||
|
||||
```javascript
|
||||
<div>{['First ', <span key="middot">·</span>, ' Second']}</div>
|
||||
```
|
||||
|
||||
As a last resort, you always have the ability to [insert raw HTML](/react/tips/dangerously-set-inner-html.html).
|
||||
|
||||
```javascript
|
||||
<div dangerouslySetInnerHTML={{'{{'}}__html: 'First · Second'}} />
|
||||
```
|
||||
|
||||
|
||||
## Custom HTML Attributes
|
||||
|
||||
If you pass properties to native HTML elements that do not exist in the HTML specification, React will not render them. If you want to use a custom attribute, you should prefix it with `data-`.
|
||||
|
||||
```javascript
|
||||
<div data-custom-attribute="foo" />
|
||||
```
|
||||
|
||||
However, arbitrary attributes are supported on custom elements (those with a hyphen in the tag name or an `is="..."` attribute).
|
||||
|
||||
```javascript
|
||||
<x-my-component custom-attribute="foo" />
|
||||
```
|
||||
|
||||
[Web Accessibility](http://www.w3.org/WAI/intro/aria) attributes starting with `aria-` will be rendered properly.
|
||||
|
||||
```javascript
|
||||
<div aria-hidden={true} />
|
||||
```
|
||||
@@ -1,74 +0,0 @@
|
||||
---
|
||||
id: jsx-gotchas-zh-CN
|
||||
title: JSX 陷阱
|
||||
permalink: docs/jsx-gotchas-zh-CN.html
|
||||
prev: jsx-spread-zh-CN.html
|
||||
next: interactivity-and-dynamic-uis-zh-CN.html
|
||||
---
|
||||
|
||||
JSX 与 HTML 非常相似，但是有些关键区别要注意。
|
||||
|
||||
> 注意:
|
||||
>
|
||||
> 关于 DOM 的区别，如行内样式属性 `style`，参考 [DOM 区别](/react/docs/dom-differences.html)
|
||||
|
||||
## HTML 实体
|
||||
|
||||
HTML 实体可以插入到 JSX 的文本中。
|
||||
|
||||
```javascript
|
||||
<div>First · Second</div>
|
||||
```
|
||||
|
||||
如果想在 JSX 表达式中显示 HTML 实体，可以会遇到二次转义的问题，因为 React 默认会转义所有字符串，为了防止各种 XSS 攻击。
|
||||
|
||||
```javascript
|
||||
// 错误: 会显示 “First · Second”
|
||||
<div>{'First · Second'}</div>
|
||||
```
|
||||
|
||||
有多种绕过的方法。最简单的是直接用 Unicode 字符。这时要确保文件是 UTF-8 编码且网页也指定为 UTF-8 编码。
|
||||
|
||||
```javascript
|
||||
<div>{'First · Second'}</div>
|
||||
```
|
||||
|
||||
安全的做法是先找到 [实体的 Unicode 编号](http://www.fileformat.info/info/unicode/char/b7/index.htm) ，然后在 JavaScript 字符串里使用。
|
||||
|
||||
```javascript
|
||||
<div>{'First \u00b7 Second'}</div>
|
||||
<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>
|
||||
```
|
||||
|
||||
可以在数组里混合使用字符串和 JSX 元素。
|
||||
|
||||
```javascript
|
||||
<div>{['First ', <span>·</span>, ' Second']}</div>
|
||||
```
|
||||
|
||||
万不得已，可以直接[插入原始HTML](/react/tips/dangerously-set-inner-html.html)。
|
||||
|
||||
```javascript
|
||||
<div dangerouslySetInnerHTML={{'{{'}}__html: 'First · Second'}} />
|
||||
```
|
||||
|
||||
|
||||
## 自定义 HTML 属性
|
||||
|
||||
如果往原生 HTML 元素里传入 HTML 规范里不存在的属性，React 不会显示它们。如果需要使用自定义属性，要加 `data-` 前缀。
|
||||
|
||||
```javascript
|
||||
<div data-custom-attribute="foo" />
|
||||
```
|
||||
|
||||
然而，在自定义元素中任意的属性都是被支持的 （那些在tag名里带有连接符或者 `is="..."` 属性的）
|
||||
|
||||
```javascript
|
||||
<x-my-component custom-attribute="foo" />
|
||||
```
|
||||
|
||||
以 `aria-` 开头的 [网络无障碍](http://www.w3.org/WAI/intro/aria) 属性可以正常使用。
|
||||
|
||||
```javascript
|
||||
<div aria-hidden={true} />
|
||||
```
|
||||
@@ -1,84 +0,0 @@
|
||||
---
|
||||
id: interactivity-and-dynamic-uis-it-IT
|
||||
title: Interattività e UI Dinamiche
|
||||
permalink: docs/interactivity-and-dynamic-uis-it-IT.html
|
||||
prev: jsx-gotchas-it-IT.html
|
||||
next: multiple-components-it-IT.html
|
||||
---
|
||||
|
||||
Hai già [imparato a mostrare dati](/react/docs/displaying-data-it-IT.html) con React. Adesso vediamo come rendere le nostre UI interattive.
|
||||
|
||||
|
||||
## Un Esempio Semplice
|
||||
|
||||
```javascript
|
||||
var LikeButton = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {liked: false};
|
||||
},
|
||||
handleClick: function(event) {
|
||||
this.setState({liked: !this.state.liked});
|
||||
},
|
||||
render: function() {
|
||||
var text = this.state.liked ? 'mi piace' : 'non mi piace';
|
||||
return (
|
||||
<p onClick={this.handleClick}>
|
||||
You {text} this. Click to toggle.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<LikeButton />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
## Gestione degli Eventi ed Eventi Sintetici
|
||||
|
||||
Con React devi semplicemente passare il tuo gestore di eventi come una proprietà camelCased in modo simile a come faresti nel normale HTML. React si assicura che tutti gli eventi si comportano in maniera identica in IE8 e successivi implementando un sistema di eventi sintetici. Ovvero, React sa come propagare e catturare eventi secondo la specifica, e garantisce che gli eventi passati ai tuoi gestori di eventi siano consistenti con la [specifica W3C](http://www.w3.org/TR/DOM-Level-3-Events/), qualunque browser tu stia utilizzando.
|
||||
|
||||
|
||||
## Dietro le Quinte: Binding Automatico e Delega degli Eventi
|
||||
|
||||
Dietro le quinte, React esegue alcune operazioni per mantenere il tuo codice ad alte prestazioni e facile da comprendere.
|
||||
|
||||
**Binding automatico:** Quando crei le callback in JavaScript, solitamente devi fare il binding esplicito del metodo alla sua istanza, in modo che il valore di `this` sia corretto. Con React, ogni metodo è automaticamente legato alla propria istanza del componente (eccetto quando si usa la sintassi delle classi ES6). React immagazzina il metodo legato in maniera tale da essere estremamente efficiente in termini di CPU e memoria. Ti permette anche di scrivere meno codice!
|
||||
|
||||
**Delega degli eventi:** React non associa realmente i gestori di eventi ai nodi stessi. Quando React si avvia, comincia ad ascoltare tutti gli eventi a livello globale usando un singolo event listener. Quando un componente viene montato o smontato, i gestori di eventi sono semplicemente aggiunti o rimossi da un mapping interno. Quando si verifica un evento, React sa come inoltrarlo utilizzando questo mapping. Quando non ci sono più gestori di eventi rimasti nel mapping, i gestori di eventi di React sono semplici operazioni fittizie. Per saperne di più sul perché questo approccio è veloce, leggi [l'eccellente articolo sul blog di David Walsh](http://davidwalsh.name/event-delegate).
|
||||
|
||||
|
||||
## I Componenti Sono Macchine a Stati Finiti
|
||||
|
||||
React considera le UI come semplici macchine a stati finiti. Pensando alla UI come in uno di tanti stati diversi e visualizzando questi stati, è facile mantenere la UI consistente.
|
||||
|
||||
In React, aggiorni semplicemente lo stato di un componente, e quindi visualizzi una nuova UI basata su questo nuovo stato. React si occupa di aggiornare il DOM al tuo posto nella maniera più efficiente.
|
||||
|
||||
|
||||
## Come Funziona lo Stato
|
||||
|
||||
Una maniera comune di informare React di un cambiamento nei dati è chiamare `setState(data, callback)`. Questo metodo effettua il merge di `data` in `this.state` e ridisegna il componente. Quando il componente ha terminato la fase di ri-rendering, la `callback` opzionale viene invocata. Nella maggior parte dei casi non avrai bisogno di fornire una `callback` dal momento che React si occuperà di mantenere la UI aggiornata per te.
|
||||
|
||||
|
||||
## Quali Componenti Devono Avere uno Stato?
|
||||
|
||||
La maggior parte dei tuoi componenti dovrebbero semplicemente ricevere dei dati da `props` e visualizzarli. Tuttavia, a volte hai bisogno di reagire all'input dell'utente, una richiesta al server o il trascorrere del tempo. In questi casi utilizzi lo stato.
|
||||
|
||||
**Prova a mantenere il maggior numero possibile dei tuoi componenti privi di stato.** Facendo ciò, isolerai lo stato nel suo luogo logicamente corretto e minimizzerai la ridondanza, rendendo più semplice ragionare sulla tua applicazione.
|
||||
|
||||
Un pattern comune è quello di creare diversi componenti privi di stato che mostrano semplicemente dati, e di avere un componente dotato di stato al di sopra di essi nella gerarchia, che passa il proprio stato ai suoi figli tramite le `props`. Il componente dotato di stato incapsula tutta la logica di interazione, mentre i componenti privi di stato si occupano della visualizzazione dei dati in maniera dichiarativa.
|
||||
|
||||
|
||||
## Cosa *Dovrebbe* Contenere lo Stato?
|
||||
|
||||
**Lo stato dovrebbe contenere dati che i gestori di eventi del componente possono modificare per scatenare un aggiornamento della UI.** In applicazioni reali, questi dati tendono ad essere molto limitati e serializzabili come JSON. Quando costruisci un componente dotato di stato, pensa alla minima rappresentazione possibile del suo stato, e conserva solo quelle proprietà in `this.state`. All'interno di `render()` calcola quindi ogni altra informazione necessaria basandoti sullo stato. Ti accorgerai che pensare e scrivere applicazioni in questo modo porta alla scrittura dell'applicazione più corretta, dal momento che aggiungere valori ridondanti o calcolati allo stato significherebbe doverli mantenere sincronizzati esplicitamente, anziché affidarti a React perché li calcoli al tuo posto.
|
||||
|
||||
## Cosa *Non Dovrebbe* Contenere lo Stato?
|
||||
|
||||
`this.state` dovrebbe contenere soltanto la quantità minima di dati indispensabile a rappresentare lo stato della tua UI. In quanto tale, non dovrebbe contenere:
|
||||
|
||||
* **Dati calcolati:** Non preoccuparti di precalcolare valori basati sullo stato — è più semplice assicurarti che la tua UI sia consistente se effettui tutti i calcoli all'interno di `render()`. Per esempio, se lo stato contiene un array di elementi di una lista, e vuoi mostrare il numero di elementi come stringa, mostra semplicemente `this.state.listItems.length + ' elementi nella lista'` nel tuo metodo `render()` anziché conservarlo nello stato.
|
||||
* **Componenti React:** Costruiscili in `render()` basandoti sulle proprietà e sullo stato del componente.
|
||||
* **Dati duplicati dalle proprietà:** Prova ad utilizzare le proprietà come fonte di verità ove possibile. Un uso valido dello stato per i valori delle proprietà è conservarne il valore precedente quando le proprietà cambiano nel tempo.
|
||||
@@ -1,84 +0,0 @@
|
||||
---
|
||||
id: interactivity-and-dynamic-uis
|
||||
title: 相互作用と動的なUI
|
||||
permalink: docs/interactivity-and-dynamic-uis-ja-JP.html
|
||||
prev: jsx-gotchas-ja-JP.html
|
||||
next: multiple-components-ja-JP.html
|
||||
---
|
||||
|
||||
Reactで[どうやってデータを表示するか](/react/docs/displaying-data-ja-JP.html)については既に学んでいます。これからは、どうやって相互に作用するUIを作成するかを見ていきましょう。
|
||||
|
||||
|
||||
## 単純な例
|
||||
|
||||
```javascript
|
||||
var LikeButton = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {liked: false};
|
||||
},
|
||||
handleClick: function(event) {
|
||||
this.setState({liked: !this.state.liked});
|
||||
},
|
||||
render: function() {
|
||||
var text = this.state.liked ? 'liked' : 'haven\'t liked';
|
||||
return (
|
||||
<p onClick={this.handleClick}>
|
||||
You {text} this. Click to toggle.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<LikeButton />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
## イベントハンドリングとイベントの組み合わせ
|
||||
|
||||
Reactでは、普通のHTMLで行っているように単純にキャメルケースのpropとしてイベントハンドラを渡します。ReactはIE8と同じように全てのイベントが動作することと、組み合わされたイベントシステムが実行されることを保証します。これは、Reactが、イベントがどのように発生して、仕様にそってそれをキャプチャする方法を知っていることと、イベントはイベントハンドラに渡されて、どのブラウザを使っていても、[W3Cの仕様](http://www.w3.org/TR/DOM-Level-3-Events/)と一致することを保証することを意味します。
|
||||
|
||||
## 中身を見る: オートバインディングとイベントの委譲
|
||||
|
||||
中身を見ていくと、Reactはコードの性能と、理解しやすさを保つためにいくつかのことを行っています。
|
||||
|
||||
**オートバインディング:** JavaScriptでコールバックを作成するときには、普通は `this` の値が正しくなるように、インスタンスにメソッドをはっきりとバインドする必要があります。
|
||||
Reactでは、全てのメソッドが自動でコンポーネントのインスタンスにバインドされます。ReactはCPUとメモリを効率的に使えるように、バインドするメソッドを持っています。これによって、タイピングの量を少なくすることもできます！
|
||||
|
||||
**イベントの委譲:** Reactは実際はノード自体にイベントハンドラをアタッチはしません。Reactを立ち上げる時、1つのイベントリスナを使って最上位で全てのイベントをリスニングし始めます。コンポーネントがマウントされたり、アンマウントされた時は、イベントハンドラは内部のマッピングを単純に加えたり減らしたりします。イベントが起こった時には、Reactはこのマッピングを使ってどのようにディスパッチするかを知っています。マッピングの中にイベントハンドラが無い場合は、Reactのイベントハンドラは何も行いません。なぜこれの速度が速いかについて詳しく知るためには、[David Walshの素晴らしいブログの投稿](http://davidwalsh.name/event-delegate)をご覧ください。
|
||||
|
||||
## コンポーネントは静的なマシーンに過ぎない
|
||||
|
||||
ReactはUIをただの静的なマシーンと考えます。UIがたくさんのstateの中にあり、それらのstateをレンダリングするものだと考えることで、UIの一貫性を保ちやすくなります。
|
||||
|
||||
Reactでは、コンポーネントのstateをアップデートするだけで、新しいstateに基づいた新しいUIをレンダリングします。Reactは最も効率的な方法でDOMをアップデートする面倒を見てくれます。
|
||||
|
||||
|
||||
## どのようにStateが働くか
|
||||
|
||||
Reactがデータの変更を通知する共通な方法は `setState(data, callback)` を呼ぶことです。このメソッドは `data` を `this.state` にマージし、コンポーネントを再度レンダリングします。コンポーネントが再度レンダリングし終わったら、オプションの `callback` が呼ばれます。ほとんどの場合、 `callback` を提供する必要はありません。ReactがUIを最新に保ってくれるからです。
|
||||
|
||||
|
||||
## どのコンポーネントがStateを持っているべきでしょうか？
|
||||
|
||||
コンポーネントは単純に `props` からデータを取得し、レンダリングすべきです。しかし、時々、ユーザのインプットやサーバのリクエストや、時間の経過に反応する必要が有ります。このような場合にstateを使うのです。
|
||||
|
||||
**コンポーネントの多くを、可能な限りステートレスに保つよう試みてください。** このようにすることで、stateを最もロジックに近い場所から離し、冗長性を減らすことができ、アプリケーションが理解しやすくなります。
|
||||
|
||||
共通なパターンはただデータをレンダリングするいくつかのステートレスなコンポーネントを構築することで、 `props` を通してその子要素にstateを渡す階級でステートフルなコンポーネントを持つことです。ステートフルなコンポーネントは、ステートレスなコンポーネントが叙述的な方法でデータをレンダリングする助けを行う一方で、全ての相互作用のロジックを持ちます。
|
||||
|
||||
## stateで何が行われる *べき* でしょうか？
|
||||
|
||||
**stateはUIのアップデートのトリガーとなるコンポーネントのイベントハンドラとしてのデータを保持するべきです。** 現実のアプリでは、このデータはとても小さく、JSONでシリアライズできるものになります。ステートフルなコンポーネントを構築する時は、このstateの表現をできるだけ小さくなるように、また、 `this.state` の中だけにそれらのプロパティを貯めこむように考えてください。 `render()` の中では、このstateに基づく、他の必要な情報をただ計算してください。このように考えたりアプリケーションを記述したりすることが最も正しいアプリケーションへの道であると発見するでしょう。stateに余剰な値や、計算後の値を加えることはReactがそれらを計算してくれるのに頼るのではなく、同期的にそれらを明白に保つ必要があることを意味します。
|
||||
|
||||
|
||||
## stateで何が行われる *べきではない* でしょうか？
|
||||
|
||||
`this.state` UIのstateを表す必要がある最小限の量のデータだけを保持するべきです。このような点で以下のようなものは保持するべきではありません。
|
||||
|
||||
* **計算されたデータ:**
|
||||
stateに基づく事前に計算された値について心配は要りません。 `render()` を用いて、全ての計算を行って、UIの一貫性を保証するよりも簡単です。例えば、stateにリスト化されたアイテムの配列を持っていて、文字列としてその数をレンダリングしたいとして、それらをstateに保持するよりも `render()` メソッドに `this.state.listItems.length + ' list items'` を単純にレンダリングすれば良いのです。
|
||||
* **Reactのコンポーネント:** 隠れたpropsとstateに基づいて `render()` でそれらをビルドしてください。
|
||||
* **propsからコピーしたデータ:** 可能であれば、propsを真のソースとして使ってみてください。propsは時とともに変化し得るので、正しくstateにpropsを保持する使い方は、以前の値を知っていることになり得ます。
|
||||
@@ -1,78 +0,0 @@
|
||||
---
|
||||
id: interactivity-and-dynamic-uis-ko-KR
|
||||
title: 상호 작용 및 동적 UI
|
||||
permalink: docs/interactivity-and-dynamic-uis-ko-KR.html
|
||||
prev: jsx-gotchas-ko-KR.html
|
||||
next: multiple-components-ko-KR.html
|
||||
---
|
||||
|
||||
이미 React에서 [어떻게 데이터를 표시](/react/docs/displaying-data-ko-KR.html)하는지를 배웠습니다. 이제 UI와의 상호작용을 어떻게 만드는지 살펴보죠.
|
||||
|
||||
## 간단한 예제
|
||||
|
||||
```javascript
|
||||
var LikeButton = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {liked: false};
|
||||
},
|
||||
handleClick: function(event) {
|
||||
this.setState({liked: !this.state.liked});
|
||||
},
|
||||
render: function() {
|
||||
var text = this.state.liked ? 'liked' : 'haven\'t liked';
|
||||
return (
|
||||
<p onClick={this.handleClick}>
|
||||
You {text} this. Click to toggle.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<LikeButton />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
## 이벤트 핸들링과 통합적인(Synthetic) 이벤트
|
||||
|
||||
React에서의 이벤트 핸들러는 HTML에서 그러던 것처럼 간단히 카멜케이스 프로퍼티(camelCased prop)로 넘기면 됩니다. React의 모든 이벤트는 통합적인 이벤트 시스템의 구현으로 IE8 이상에서는 같은 행동이 보장됩니다. 즉, React는 사양에 따라 어떻게 이벤트를 일으키고(bubble) 잡는지 알고 있고, 당신이 사용하는 브라우저와 관계없이 이벤트 핸들러에 전달되는 이벤트는 [W3C 사양](http://www.w3.org/TR/DOM-Level-3-Events/)과 같도록 보장됩니다.
|
||||
|
||||
## 기본 구현: 오토바인딩과 이벤트 델리게이션
|
||||
<a name="under-the-hood-autobinding-and-event-delegation"></a>
|
||||
|
||||
코드를 고성능으로 유지하고 이해하기 쉽게 하기 위해, React는 보이지 않는 곳에서 몇 가지 일을 수행합니다.
|
||||
|
||||
**오토바인딩:** JavaScript에서 콜백을 만들 때, 보통은 `this`의 값이 정확하도록 명시적으로 메소드를 인스턴스에 바인드해야 합니다. React에서는 모든 메소드가 자동으로 React의 컴포넌트 인스턴스에 바인드됩니다.(ES6 클래스 문법을 사용할 때는 재외하고) React가 바인드 메소드를 캐시하기 때문에 매우 CPU와 메모리에 효율적입니다. 타이핑해야 할 것도 줄어들죠!
|
||||
|
||||
**이벤트 델리게이션:** React는 실제로는 노드자신에게 이벤트 핸들러를 붙이지 않습니다. React가 시작되면 React는 탑 레벨의 단일 이벤트 리스너로 모든 이벤트를 리스닝하기 시작합니다. 컴포넌트가 마운트되거나 언마운트 될 때, 이벤트 핸들러는 그냥 내부 매핑에서 넣거나 뺄 뿐입니다. 이벤트가 발생하면, React는 이 매핑을 사용해서 어떻게 디스패치할 지를 알게 됩니다. 매핑에 이벤트 핸들러가 남아있지 않으면, React의 이벤트 핸들러는 그냥 아무것도 하지 않습니다. 왜 이 방식이 빠른지 더 알고 싶으시면, [David Walsh의 멋진 블로그 글](http://davidwalsh.name/event-delegate)을 읽어 보세요.
|
||||
|
||||
## 컴포넌트는 그냥 state 머신일 뿐
|
||||
|
||||
React는 UI를 간단한 state 머신이라 생각합니다. UI를 다양한 state와 그 state의 렌더링으로 생각함으로써 UI를 일관성 있게 관리하기 쉬워집니다.
|
||||
|
||||
React에서는, 간단히 컴포넌트의 state를 업데이트하고, 이 새로운 state의 UI를 렌더링합니다. React는 DOM의 변경을 가장 효율적인 방법으로 관리해줍니다.
|
||||
|
||||
## state의 동작 원리
|
||||
|
||||
React에게 데이터의 변경을 알리는 일반적인 방법은 `setState(data, callback)`을 호출하는 것입니다. 이 메소드는 `this.state`에 `data`를 머지하고 컴포넌트를 다시 렌더링 합니다. 컴포넌트의 재-렌더링이 끝나면, 생략가능한 `callback`이 호출됩니다. 대부분의 경우 React가 UI를 최신상태로 유지해주기 때문에 `callback`을 사용할 필요가 없습니다.
|
||||
|
||||
## 어떤 컴포넌트가 state를 가져야 할까요?
|
||||
|
||||
대부분의 컴포넌트는 `props`로부터 데이터를 받아 렌더할 뿐입니다만, 가끔 유저 인풋, 서버 요청, 시간의 경과에 반응해야 할 필요가 있습니다. 이럴 때 state를 사용합니다.
|
||||
|
||||
**가능한 한 컴포넌트가 상태를 가지지 않도록(stateless) 하세요.** 이렇게 함으로써 가장 논리적인 장소로 state를 격리하게 되고 쉽게 애플리케이션을 추론할 수 있도록 중복을 최소화할 수 있습니다.
|
||||
|
||||
일반적인 패턴은 데이터만 렌더하는 여러 상태를 가지지 않은 컴포넌트를 만들고, 그 위에 상태기반(stateful) 컴포넌트를 만들어 계층 안의 자식 컴포넌트에게 `props`를 통해 state를 전달하는 것입니다. state를 가지지 않은 컴포넌트가 선언적인 방법으로 데이터를 렌더링 하는 동안, 상태기반 컴포넌트는 모든 상호작용 로직을 캡슐화합니다.
|
||||
|
||||
## state를 어떻게 *써야* 할까요?
|
||||
|
||||
**state는 컴포넌트의 이벤트 핸들러에 의해 UI 업데이트를 트리거할때 변경될 가능성이 있어, 그때 사용할 데이터를 가져야 합니다.** 실제 앱에서는 이 데이터는 매우 작고 JSON 직렬화 가능한 경향이 있습니다. 상태기반 컴포넌트를 만들때, 가능한 작게 state를 서술하고 `this.state`에만 저장하도록 해보세요. 그냥 `render()` 안에서 이 state를 기반으로 다른 모든 정보를 계산합니다. 이 방식으로 애플리케이션을 작성하고 생각하면 가장 최적의 애플리케이션으로 발전해가는 경향이 있다는 것을 발견하게 될 것입니다. 꼭 필요하지 않은 값이나 계산된 값을 state에 추가하는 것은 render가 그것을 계산하는 대신에 명시적으로 그것들을 맞춰줘야 하는 것을 의미하기 때문이죠.
|
||||
|
||||
## state를 어떻게 *쓰지 말아야* 할까요?
|
||||
|
||||
`this.state`는 UI의 state를 표현할 최소한의 데이터만을 가져야 합니다. 그래서 이런 것들을 가지지 않게끔 해야 합니다.
|
||||
|
||||
* **계산된 데이터:** state에 따라 값을 미리 계산하는 것에 대해 염려하지 마세요. 계산은 모두 `render()`에서 하는 것이 UI의 일관성을 유지하기 쉽습니다. 예를 들어, state에서 list items 배열을 가지고 있고 문자열으로 카운트를 렌더링 할 경우, state에 저장하기보다는 그냥 `render()` 메소드안에서 `this.state.listItems.length + ' list items'`를 렌더하세요.
|
||||
* **React 컴포넌트:** 가지고 있는 props와 state로 `render()`안에서 만드세요.
|
||||
* **props에서 복사한 데이터:** 가능한 한 원래의 소스로 props를 사용하도록 해보세요. props를 state에 저장하는 단 하나의 올바른 사용법은 이전 값을 알고 싶을 때입니다. props는 부모 컴포넌트의 재 렌더링의 결과 변경될 수도 있기 때문이죠.
|
||||
@@ -1,81 +0,0 @@
|
||||
---
|
||||
id: interactivity-and-dynamic-uis
|
||||
title: Interactivity and Dynamic UIs
|
||||
permalink: docs/interactivity-and-dynamic-uis.html
|
||||
prev: jsx-gotchas.html
|
||||
next: multiple-components.html
|
||||
---
|
||||
|
||||
You've already [learned how to display data](/react/docs/displaying-data.html) with React. Now let's look at how to make our UIs interactive.
|
||||
|
||||
## A Simple Example
|
||||
|
||||
```javascript
|
||||
class LikeButton extends React.Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
liked: false
|
||||
};
|
||||
this.handleClick = this.handleClick.bind(this);
|
||||
}
|
||||
handleClick() {
|
||||
this.setState({liked: !this.state.liked});
|
||||
}
|
||||
render() {
|
||||
const text = this.state.liked ? 'liked' : 'haven\'t liked';
|
||||
return (
|
||||
<div onClick={this.handleClick}>
|
||||
You {text} this. Click to toggle.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<LikeButton />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
## Event Handling and Synthetic Events
|
||||
|
||||
With React you simply pass your event handler as a camelCased prop similar to how you'd do it in normal HTML. React ensures that all events behave similarly in all browsers by implementing a synthetic event system. That is, React knows how to bubble and capture events according to the spec, and the events passed to your event handler are guaranteed to be consistent with [the W3C spec](http://www.w3.org/TR/DOM-Level-3-Events/), regardless of which browser you're using.
|
||||
|
||||
## Under the Hood: Autobinding and Event Delegation
|
||||
|
||||
Under the hood, React does a few things to keep your code performant and easy to understand.
|
||||
|
||||
**Autobinding:** When creating callbacks in JavaScript, you usually need to explicitly bind a method to its instance such that the value of `this` is correct. With React, every method is automatically bound to its component instance ([except when using ES6 class syntax](/react/docs/reusable-components.html#no-autobinding)). React caches the bound method such that it's extremely CPU and memory efficient. It's also less typing!
|
||||
|
||||
**Event delegation:** React doesn't actually attach event handlers to the nodes themselves. When React starts up, it starts listening for all events at the top level using a single event listener. When a component is mounted or unmounted, the event handlers are simply added or removed from an internal mapping. When an event occurs, React knows how to dispatch it using this mapping. When there are no event handlers left in the mapping, React's event handlers are simple no-ops. To learn more about why this is fast, see [David Walsh's excellent blog post](http://davidwalsh.name/event-delegate).
|
||||
|
||||
## Components are Just State Machines
|
||||
|
||||
React thinks of UIs as simple state machines. By thinking of a UI as being in various states and rendering those states, it's easy to keep your UI consistent.
|
||||
|
||||
In React, you simply update a component's state, and then render a new UI based on this new state. React takes care of updating the DOM for you in the most efficient way.
|
||||
|
||||
## How State Works
|
||||
|
||||
A common way to inform React of a data change is by calling `setState(data, callback)`. This method merges `data` into `this.state` and re-renders the component. When the component finishes re-rendering, the optional `callback` is called. Most of the time you'll never need to provide a `callback` since React will take care of keeping your UI up-to-date for you.
|
||||
|
||||
## What Components Should Have State?
|
||||
|
||||
Most of your components should simply take some data from `props` and render it. However, sometimes you need to respond to user input, a server request or the passage of time. For this you use state.
|
||||
|
||||
**Try to keep as many of your components as possible stateless.** By doing this you'll isolate the state to its most logical place and minimize redundancy, making it easier to reason about your application.
|
||||
|
||||
A common pattern is to create several stateless components that just render data, and have a stateful component above them in the hierarchy that passes its state to its children via `props`. The stateful component encapsulates all of the interaction logic, while the stateless components take care of rendering data in a declarative way.
|
||||
|
||||
## What *Should* Go in State?
|
||||
|
||||
**State should contain data that a component's event handlers may change to trigger a UI update.** In real apps this data tends to be very small and JSON-serializable. When building a stateful component, think about the minimal possible representation of its state, and only store those properties in `this.state`. Inside of `render()` simply compute any other information you need based on this state. You'll find that thinking about and writing applications in this way tends to lead to the most correct application, since adding redundant or computed values to state means that you need to explicitly keep them in sync rather than rely on React computing them for you.
|
||||
|
||||
## What *Shouldn't* Go in State?
|
||||
|
||||
`this.state` should only contain the minimal amount of data needed to represent your UI's state. As such, it should not contain:
|
||||
|
||||
* **Computed data:** Don't worry about precomputing values based on state — it's easier to ensure that your UI is consistent if you do all computation within `render()`. For example, if you have an array of list items in state and you want to render the count as a string, simply render `this.state.listItems.length + ' list items'` in your `render()` method rather than storing it on state.
|
||||
* **React components:** Build them in `render()` based on underlying props and state.
|
||||
* **Duplicated data from props:** Try to use props as the source of truth where possible. One valid use to store props in state is to be able to know its previous values, because props may change as the result of a parent component re-rendering.
|
||||
@@ -1,78 +0,0 @@
|
||||
---
|
||||
id: interactivity-and-dynamic-uis-ru-RU
|
||||
title: Интерактивные и динамические интерфейсы
|
||||
permalink: docs/interactivity-and-dynamic-uis-ru-RU.html
|
||||
prev: jsx-gotchas.html
|
||||
next: multiple-components.html
|
||||
---
|
||||
|
||||
Вы уже знаете [как показывать данные](/react/docs/displaying-data.html) с React. Теперь давайте добавим в наши интферфейсы немного интерактивности.
|
||||
|
||||
## Простой пример
|
||||
|
||||
```javascript
|
||||
var LikeButton = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {liked: false};
|
||||
},
|
||||
handleClick: function(event) {
|
||||
this.setState({liked: !this.state.liked});
|
||||
},
|
||||
render: function() {
|
||||
var text = this.state.liked ? 'liked' : 'haven\'t liked';
|
||||
return (
|
||||
<p onClick={this.handleClick}>
|
||||
You {text} this. Click to toggle.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<LikeButton />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
## Обработка событий и синтетические события
|
||||
|
||||
С React вы просто передаете функцию-обработчик нужного события как аргумент, почти так же, как делали это в HTML. Благодаря механизму синтетических событий React гарантирует, что все события будут вести себя одинаково во всех браузерах. Другими словами, React знает, как работает всплытие и перехват событий по спецификации. События, которые он передает в ваши обработчики, будут соответствовать [спецификации W3C](http://www.w3.org/TR/DOM-Level-3-Events/), несмотря на то, каким браузером вы пользуетесь.
|
||||
|
||||
## Как это работает: автоматическое связывание и делегирование событий
|
||||
|
||||
Чтобы ваш код был не только понятным, но и быстрым, React делает следующее:
|
||||
|
||||
**Автоматическое связывание:** Когда в JavaScript создаются функции обратного вызова, вам надо привязать метод к тому объекту, на котором он будет вызываться, чтобы значение `this` было корректным. С React привязка метода к компоненту происходит автоматически ([кроме тех случаев, когда вы используете классы ES6](/react/docs/reusable-components.html#no-autobinding)). И делается это с минимальной нагрузкой на процессор и память.
|
||||
|
||||
**Делегирование событий:** На самом же деле, React добавляет обработчики событий не к узлам дерева. Сразу после запуска, React начинает прослушивать все события с самого верхнего уровня, используя единый слушатель. Когда добавляется новый компонент или удаляется старый, обработчики событий просто добавляются или удаляются из памяти React. И когда событие наступает, React уже заранее знает какому из обработчиков его передать. Когда в памяти больше не остается обработчиков, React перестает обрабатывать события. Если хотите узнать о том, почему эта механика так быстро работает, почитайте [отличный пост в блоге David Walsh](http://davidwalsh.name/event-delegate).
|
||||
|
||||
## Компоненты как конечные автоматы
|
||||
|
||||
React считает интерфейсы обыкновенными конечными автоматами. Работать с интерфейсом становится проще, если представлять его как конечный автомат, который меняет состояния и отрисовывает их.
|
||||
|
||||
В React вы просто обновляете состояние компонента, а потом выводите новый интерфейс уже с новыми данными. Все изменения в DOM-дереве React сделает сам, причем наиболее эффективным способом.
|
||||
|
||||
## Как работает состояние
|
||||
|
||||
Чтобы сообщить React о том, что данные изменились, вы вызываете метод `setState(data, callback)`. В этом методе происходит обновление состояния `this.state` новыми данными из `data`, и компонент отрисуется заново. После этого вызывается функция `callback`. Но вы редко будете ей пользоваться, ведь React сам обновляет интерфейс.
|
||||
|
||||
## В каких компонентах хранить состояние?
|
||||
|
||||
Большинство компонентов должны просто брать данные из `props` и отрисовывать их. Но иногда вам надо реагировать на действия пользователя, делать запросы на сервер или просто сделать что-то по таймеру. В таких случаях используйте состояние.
|
||||
|
||||
**Старайтесь делать компоненты без состояния.** Следуя этому правилу, вы будете выносить работу с состоянием с уровня представления в другие, более подходящие места. Тем самым, вы снизите сложность приложения, упрощая его понимание.
|
||||
|
||||
Основной принцип такой: создаются несколько компонентов без состояния, которые формируют дерево. Они будут заниматься только отрисовкой данных. А все данные для них будут у родительского компонента, который будет на вершине этого дерева компонентов. Он и будет передавать данные дочерним узлам через `props`. Этот компонент с общим состоянием содержит в себе всю логику взаимодействия, а дочерние компоненты будут только отрисовывать данные, которые будут у них в `props`.
|
||||
|
||||
## Какие данные *надо* помещать в состояние?
|
||||
|
||||
**Состояние должно содержать данные, которые нужны для обновления интерфейса.** В реальных приложениях такие данные, как правило, незначительны по объему, и могут быть сериализованы в JSON. Когда вы создаете компонент с состоянием, старайтесь поместить в него минимум данных. А уже внутри метода `render()` вычисляйте остальные данные, используя значения из состояния.
|
||||
Со временем вы увидите, что такой подход позволяет создавать более стройные и устойчивые к изменениям приложения. Добавление в состояние лишних данных требует от вас дополнительных затрат на их синхронизацию. Но этого можно избежать, если позволить React делать все эти вычисления за вас.
|
||||
|
||||
## Какие данные *не надо* помещать в состояние?
|
||||
|
||||
Состояние `this.state` должно содержать минимум данных, необходимых для отображения интерфейса. Поэтому не стоит хранить в нем:
|
||||
|
||||
* **Вычисляемые данные:** Не волнуйтесь о данных, которые можно вычислить из состояния. Согласованность данных проще обеспечить, если производить все вычисления в методе `render()`. Например, если в состоянии хранится список элементов, и вам надо вывести его размер в виде строки, напишите `this.state.listItems.length + ' элементов'` в методе `render()`. Это будет правильнее, чем хранить размер списка в состоянии.
|
||||
* **Компоненты React:** Создавайте их в методе `render()`, опираясь на данные из `props` и `state`.
|
||||
* **Значения, повторяющие `props`:** Старайтесь по мере возможности использовать `props` как единственный источник данных. Хранить значения `props` в состоянии допускается, только если вам надо где-то хранить их прошлые значения, ведь `props` могут измениться после отрисовки родительского компонента.
|
||||
@@ -1,77 +0,0 @@
|
||||
---
|
||||
id: interactivity-and-dynamic-uis-zh-CN
|
||||
title: 动态交互式用户界面
|
||||
permalink: docs/interactivity-and-dynamic-uis-zh-CN.html
|
||||
prev: jsx-gotchas-zh-CN.html
|
||||
next: multiple-components-zh-CN.html
|
||||
---
|
||||
|
||||
我们已经学习如何使用 React [显示数据](/react/docs/displaying-data-zh-CN.html)。现在让我们来学习如何创建交互式界面。
|
||||
|
||||
## 简单例子
|
||||
|
||||
```javascript
|
||||
var LikeButton = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {liked: false};
|
||||
},
|
||||
handleClick: function(event) {
|
||||
this.setState({liked: !this.state.liked});
|
||||
},
|
||||
render: function() {
|
||||
var text = this.state.liked ? 'liked' : 'haven\'t liked';
|
||||
return (
|
||||
<p onClick={this.handleClick}>
|
||||
You {text} this. Click to toggle.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<LikeButton />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
## 事件处理与合成事件（Synthetic Events）
|
||||
|
||||
React 里只需把事件处理器（event handler）以骆峰命名（camelCased）形式当作组件的 props 传入即可，就像使用普通 HTML 那样。React 内部创建一套合成事件系统来使所有事件在 IE8 和以上浏览器表现一致。也就是说，React 知道如何冒泡和捕获事件，而且你的事件处理器接收到的 events 参数与 [W3C 规范](http://www.w3.org/TR/DOM-Level-3-Events/) 一致，无论你使用哪种浏览器。
|
||||
|
||||
## 幕后原理：自动绑定（Autobinding）和事件代理（Event Delegation）
|
||||
|
||||
在幕后，React 做了一些操作来让代码高效运行且易于理解。
|
||||
|
||||
**自动绑定:** 在 JavaScript 里创建回调的时候，为了保证 `this` 的正确性，一般都需要显式地绑定方法到它的实例上。在 React 中，所有方法被自动绑定到了它的组件实例上（[除非使用ES6的class符号](/react/docs/reusable-components.html#no-autobinding)）。React 还缓存这些绑定方法，所以 CPU 和内存都是非常高效。而且还能减少打字！
|
||||
|
||||
**事件代理:** React 实际并没有把事件处理器绑定到节点本身。当 React 启动的时候，它在最外层使用唯一一个事件监听器处理所有事件。当组件被加载和卸载时，只是在内部映射里添加或删除事件处理器。当事件触发，React 根据映射来决定如何分发。当映射里没有事件处理函数时，会当作空操作处理。参考 [David Walsh 很棒的文章](http://davidwalsh.name/event-delegate) 了解这样做高效的原因。
|
||||
|
||||
## 组件其实是状态机（State Machines）
|
||||
|
||||
React 把用户界面当作简单状态机。把用户界面想像成拥有不同状态然后渲染这些状态，可以轻松让用户界面和数据保持一致。
|
||||
|
||||
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。React 来决定如何最高效地更新 DOM。
|
||||
|
||||
## State 工作原理
|
||||
|
||||
常用的通知 React 数据变化的方法是调用 `setState(data, callback)`。这个方法会合并（merge） `data` 到 `this.state`，并重新渲染组件。重新渲染完成后，调用可选的 `callback` 回调。大部分情况下不需要提供 `callback`，因为 React 会负责把界面更新到最新状态。
|
||||
|
||||
## 哪些组件应该有 State？
|
||||
|
||||
大部分组件的工作应该是从 `props` 里取数据并渲染出来。但是，有时需要对用户输入、服务器请求或者时间变化等作出响应，这时才需要使用 State。
|
||||
|
||||
**尝试把尽可能多的组件无状态化。** 这样做能隔离 state，把它放到最合理的地方，也能减少冗余，同时易于解释程序运作过程。
|
||||
|
||||
常用的模式是创建多个只负责渲染数据的无状态（stateless）组件，在它们的上层创建一个有状态（stateful）组件并把它的状态通过 `props` 传给子级。这个有状态的组件封装了所有用户的交互逻辑，而这些无状态组件则负责声明式地渲染数据。
|
||||
|
||||
## 哪些 *应该* 作为 State？
|
||||
|
||||
**State 应该包括那些可能被组件的事件处理器改变并触发用户界面更新的数据。** 真实的应用中这种数据一般都很小且能被 JSON 序列化。当创建一个状态化的组件时，思考一下表示它的状态最少需要哪些数据，并只把这些数据存入 `this.state`。在 `render()` 里再根据 state 来计算你需要的其它数据。你会发现以这种方式思考和开发程序最终往往是正确的，因为如果在 state 里添加冗余数据或计算所得数据，那么你就需要经常手动保持数据同步，而不能让 React 来帮你处理。
|
||||
|
||||
## 哪些 *不应该* 作为 State？
|
||||
|
||||
`this.state` 应该仅包括能表示用户界面状态所需的最少数据。因此，它不应该包括：
|
||||
|
||||
* **计算所得数据：** 不要担心根据 state 来预先计算数据 —— 把所有的计算都放到 `render()` 里更容易保证用户界面和数据的一致性。例如，在 state 里有一个数组（listItems），我们要把数组长度渲染成字符串， 直接在 `render()` 里使用 `this.state.listItems.length + ' list items'` 比把它放到 state 里好的多。
|
||||
* **React 组件：** 在 `render()` 里使用当前 props 和 state 来创建它。
|
||||
* **基于 props 的重复数据：** 尽可能使用 props 来作为实际状态的源。把 props 保存到 state 的一个有效的场景是需要知道它以前值的时候，因为 props 可能因为父组件的重绘而变化。
|
||||
@@ -1,190 +0,0 @@
|
||||
---
|
||||
id: multiple-components-it-IT
|
||||
title: Componenti Multipli
|
||||
permalink: docs/multiple-components-it-IT.html
|
||||
prev: interactivity-and-dynamic-uis-it-IT.html
|
||||
next: reusable-components-it-IT.html
|
||||
---
|
||||
|
||||
Finora abbiamo visto come scrivere un singolo componente per mostrare dati e gestire l'input dell'itente. Adesso esaminiamo una delle migliori caratteristiche di React: la componibilità.
|
||||
|
||||
|
||||
## Motivazione: Separazione dei Concetti
|
||||
|
||||
Costruendo componenti modulari che riutilizzano altri componenti con interfacce ben definite, ottieni gli stessi benefici che otterresti usando funzioni o classi. Nello specifico, puoi *separare i diversi concetti* della tua applicazione nel modo che preferisci semplicemente costruendo nuovi componenti. Costruendo una libreria di componenti personalizzati per la tua applicazione, stai esprimendo la tua UI in una maniera che si adatta meglio al tuo dominio.
|
||||
|
||||
|
||||
## Esepmio di Composizione
|
||||
|
||||
Creiamo un semplice componente Avatar che mostra una foto del profilo e un nome utente usando la Graph API di Facebook.
|
||||
|
||||
```javascript
|
||||
var Avatar = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<div>
|
||||
<ProfilePic username={this.props.username} />
|
||||
<ProfileLink username={this.props.username} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var ProfilePic = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<img src={'https://graph.facebook.com/' + this.props.username + '/picture'} />
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var ProfileLink = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<a href={'https://www.facebook.com/' + this.props.username}>
|
||||
{this.props.username}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<Avatar username="pwh" />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
## Possesso
|
||||
|
||||
Nell'esempio precedente, le istanze di `Avatar` *posseggono* instanze di `ProfilePic` e `ProfileLink`. In React, **un proprietario è il componente che imposta le `props` di altri componenti**. Più formalmente, se un componente `X` è creato nel metodo `render()` del componente `Y`, si dice che `X` è *di proprietà di* `Y`. Come discusso in precedenza, un componente non può mutare le sue `props` — sono sempre consistenti con il valore che il suo proprietario ha impostato. Questa invariante fondamentale porta a UI la cui consistenza può essere garantita.
|
||||
|
||||
È importante distinguere tra la relazione di proprietario-proprietà e la relazione genitore-figlio. La relazione proprietario-proprietà è specifica di React, mentre la relazione genitore-figlio è semplicemente quella che conosci e ami del DOM. Nell'esempio precedente, `Avatar` possiede il `div`, le istanze di `ProfilePic` e `ProfileLink`, e `div` è il **genitore** (ma non il proprietario) delle istanze di `ProfilePic` e `ProfileLink`.
|
||||
|
||||
|
||||
## Figli
|
||||
|
||||
Quando crei un'istanza di un componente React, puoi includere componenti React aggiuntivi o espressioni JavaScript tra i tag di apertura e chiusura come segue:
|
||||
|
||||
```javascript
|
||||
<Parent><Child /></Parent>
|
||||
```
|
||||
|
||||
`Parent` può accedere ai propri figli leggendo la speciale proprietà `this.props.children`. **`this.props.children` è una struttura dati opaca:** usa le [utilità React.Children](/react/docs/top-level-api.html#react.children) per manipolare i figli.
|
||||
|
||||
|
||||
### Riconciliazione dei Figli
|
||||
|
||||
**La riconciliazione è il processo per il quale React aggiorna il DOM ad ogni passata di rendering.** In generale, i figli sono riconciliati secondo l'ordine in cui sono mostrati. Per esempio, supponiamo che due passate di rendering generino rispettivamente il markup seguente:
|
||||
|
||||
```html
|
||||
// Prima passata di rendering
|
||||
<Card>
|
||||
<p>Paragrafo 1</p>
|
||||
<p>Paragrafo 2</p>
|
||||
</Card>
|
||||
// Seconda passata di rendering
|
||||
<Card>
|
||||
<p>Paragrafo 2</p>
|
||||
</Card>
|
||||
```
|
||||
|
||||
Intuitivamente, `<p>Paragrafo 1</p>` è stato rimosso. Invece, React riconcilierà il DOM cambiando il testo contenuto nel primo figlio e distruggerà l'ultimo figlio. React reconcilia secondo l'*ordine* dei figli.
|
||||
|
||||
|
||||
### Figli Dotati di Stato
|
||||
|
||||
Per molti componenti, questo non è un grande problema. Tuttavia, per i componenti dotati di stato che mantengono dati in `this.state` attraverso le diverse passate di rendering, questo può essere problematico.
|
||||
|
||||
In molti casi, questo problema può essere aggirato nascondendo gli elementi anziché distruggendoli:
|
||||
|
||||
```html
|
||||
// Prima passata di rendering
|
||||
<Card>
|
||||
<p>Paragrafo 1</p>
|
||||
<p>Paragrafo 2</p>
|
||||
</Card>
|
||||
// Seconda passata di rendering
|
||||
<Card>
|
||||
<p style={{'{{'}}display: 'none'}}>Paragrafo 1</p>
|
||||
<p>Paragrafo 2</p>
|
||||
</Card>
|
||||
```
|
||||
|
||||
|
||||
### Figli Dinamici
|
||||
|
||||
La situazione si complica quando i figli sono rimescolati (come nei risultati della ricerca) o se nuovi componenti sono aggiunti all'inizio della lista (come negli stream). In questi casi quando l'identità e lo stato di ogni figlio deve essere preservato attraverso passate di rendering, puoi unicamente identificare ciascun figlio assegnandogli una proprietà `key`:
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
var results = this.props.results;
|
||||
return (
|
||||
<ol>
|
||||
{results.map(function(result) {
|
||||
return <li key={result.id}>{result.text}</li>;
|
||||
})}
|
||||
</ol>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
Quando React riconcilia i figli dotati di `key`, si assicurerà che ciascun figlio con la proprietà `key` sia riordinato (anziché clobbered) o distrutto (anziché riutilizzato).
|
||||
|
||||
La proprietà `key` dovrebbe *sempre* essere fornita direttamente all'elemento del componente nell'array, non al contenitore HTML di ciascun componente dell'array:
|
||||
|
||||
```javascript
|
||||
// SBAGLIATO!
|
||||
var ListItemWrapper = React.createClass({
|
||||
render: function() {
|
||||
return <li key={this.props.data.id}>{this.props.data.text}</li>;
|
||||
}
|
||||
});
|
||||
var MyComponent = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<ul>
|
||||
{this.props.results.map(function(result) {
|
||||
return <ListItemWrapper data={result}/>;
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
});
|
||||
```
|
||||
```javascript
|
||||
// Corretto :)
|
||||
var ListItemWrapper = React.createClass({
|
||||
render: function() {
|
||||
return <li>{this.props.data.text}</li>;
|
||||
}
|
||||
});
|
||||
var MyComponent = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<ul>
|
||||
{this.props.results.map(function(result) {
|
||||
return <ListItemWrapper key={result.id} data={result}/>;
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
Puoi anche assegnare chiavi ai figli passandogli un oggetto ReactFragment. Leggi [Frammenti con Chiave](create-fragment.html) per maggiori dettagli.
|
||||
|
||||
## Flusso dei Dati
|
||||
|
||||
In React, i dati fluiscono dal proprietario al componente posseduto attraverso le `props` come discusso in precedenza. Questo è a tutti gli effetti un binding di dati unidirezionale: i proprietari legano le proprietà dei componenti di loro proprietà a dei valori che il proprietario stesso ha calcolato in base ai propri `props` o `state`. Dal momento che questo processo avviene ricorsivamente, i cambiamenti dei dati vengono riflessi automaticamente ovunque vengano usati.
|
||||
|
||||
|
||||
## Una Nota sulle Prestazioni
|
||||
|
||||
Ti starai chiedendo che cambiare i dati sia un'operazione costosa in presenza di un gran numero di nodi sotto un proprietario. La buona notizia è che JavaScript è veloce e i metodi `render()` tendono ad essere molto semplici, quindi in molte applicazioni questo è un processo estremamente veloce. Inoltre, il collo di bottiglia è quasi sempre la mutazione del DOM e non l'esecuzione di JS. React ottimizzerà tutto per te usando il raggruppamento e osservando i cambiamenti.
|
||||
|
||||
Tuttavia, a volte vorrai avere un controllo più raffinato sulle tue prestazioni. In tal caso, ridefinisci il metodo `shouldComponentUpdate()` per restituire false quando vuoi che React salti il trattamento di un sottoalbero. Consulta [la documentazione di riferimento di React](/react/docs/component-specs.html) per maggiori informazioni.
|
||||
|
||||
> Nota:
|
||||
>
|
||||
> Se `shouldComponentUpdate()` restituisce false quando i dati sono effettivamente cambiati, React non è in grado di mantenere la tua UI in sincronia. Assicurati di usare questa tecnica con cognizione di causa, e soltanto in presenza di problemi percettibili di prestazioni. Non sottovalutare l'estrema velocità di esecuzione di JavaScript se paragonata a quella del DOM.
|
||||
@@ -1,186 +0,0 @@
|
||||
---
|
||||
id: multiple-components
|
||||
title: 複数のコンポーネント
|
||||
permalink: docs/multiple-components-ja-JP.html
|
||||
prev: interactivity-and-dynamic-uis-ja-JP.html
|
||||
next: reusable-components-ja-JP.html
|
||||
---
|
||||
|
||||
今まで、データを表示したりユーザの入力をハンドルするための1つのコンポーネントの書き方を見てきました。次に、 Reactの最も面白い特徴であるコンポーザビリティについて見ていきましょう。
|
||||
|
||||
## 動機: 関心の分離
|
||||
|
||||
うまく定義されたインターフェースとともに他のコンポーネントを再利用するモジュールのコンポーネントを構築することによって、関数やクラスを使う場合と同じ利益を得ることができます。特に、アプリの *異なった関心を分離* できるにも関わらず、新しいコンポーネントを単純に構築することで満足する場合には。アプリケーションにカスタムコンポーネントライブラリを構築することによって、あなたがやりたいことに最も合う方法でUIを表現することができます。
|
||||
|
||||
## 構成例
|
||||
|
||||
FacebookのグラフAPIを使って、プロフィール画像とユーザー名を表示する単純なアバターのコンポーネントを作ってみましょう。
|
||||
|
||||
```javascript
|
||||
var Avatar = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<div>
|
||||
<ProfilePic username={this.props.username} />
|
||||
<ProfileLink username={this.props.username} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var ProfilePic = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<img src={'https://graph.facebook.com/' + this.props.username + '/picture'} />
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var ProfileLink = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<a href={'https://www.facebook.com/' + this.props.username}>
|
||||
{this.props.username}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<Avatar username="pwh" />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
## 所有
|
||||
|
||||
上記の例では、 `Avatar` のインスタンスは `ProfilePic` と `ProfileLink` のインスタンスを *所有* しています。Reactでは、 **所有者は、他のコンポーネントの `props` をセットするコンポーネントです。** 正式に言うと、もし `Y` コンポーネントの `render()` メソッドの中に `X` コンポーネントが作られた場合、 `X` は `Y` に所有されていると言います。以前述べたように、コンポーネントはそれ自身の `props` を変化させることはできません。 `props` は常に、所有者が彼らにセットしたものと一貫性があります。このキー要素は一貫性があることを保証するために、UIに反映されます。
|
||||
|
||||
所有者と所有される側の関係と、親子の関係の違いを示すのは重要です。所有者と所有される側の関係はReact独特です。一方で、親子の関係は単純にDOMから分かる、愛すべき関係です。上の例では、 `Avatar` は `div` を所有しますが、 `ProfilePic` と `ProfileLink` インスタンスと、 `div` は `ProfilePic` と `ProfileLink`インスタンスの **親** (しかし、所有者ではありません)です。
|
||||
|
||||
|
||||
## 子
|
||||
|
||||
Reactのコンポーネントのインスタンスを作成する時には、以下のように開始タグと終了タグの間に付加的なReactのコンポーネントやJavaScriptの表現を含めることができます。
|
||||
|
||||
```javascript
|
||||
<Parent><Child /></Parent>
|
||||
```
|
||||
|
||||
`Parent` は特別な `this.props.children` というプロパティでアクセスすることで、子要素を読み取ることができます。 **`this.props.children` は不透明なデータ構造です。** 操作するには[React.Children utilities](/react/docs/top-level-api.html#react.children)を使用してください。
|
||||
|
||||
|
||||
### 子要素の調和
|
||||
|
||||
**調和はReactが新しいレンダリングのパスごとにDOMをアップデートするプロセスです。** 一般的に、子要素はレンダリングされる順序に従って調和します。例えば、2つのレンダリングパスを考えると、以下のそれぞれのマークアップが生成されます。
|
||||
|
||||
```html
|
||||
// パス1のレンダリング
|
||||
<Card>
|
||||
<p>Paragraph 1</p>
|
||||
<p>Paragraph 2</p>
|
||||
</Card>
|
||||
// パス2のレンダリング
|
||||
<Card>
|
||||
<p>Paragraph 2</p>
|
||||
</Card>
|
||||
```
|
||||
|
||||
直感的には、 `<p>Paragraph 1</p>` が削除されたように思えます。代わりに、Reactは1つ目の子要素のテキストコンテンツを変更し、最後の子要素を削除するという変更を加えることでDOMを調和させます。Reactは子要素の *順序* に従って調和するのです。
|
||||
|
||||
|
||||
|
||||
### ステートフルな子要素
|
||||
|
||||
多くのコンポーネントにとって、これは大きな処理ではありません。しかし、レンダリングのパスを超えて、 `this.state` にデータを保持しているステートフルなコンポーネントにとっては、これはとても問題になり得ます。
|
||||
|
||||
多くのケースにおいては、以下のように、削除する代わりに要素を隠すことで回避することがあります。
|
||||
|
||||
```html
|
||||
// パス1のレンダリング
|
||||
<Card>
|
||||
<p>Paragraph 1</p>
|
||||
<p>Paragraph 2</p>
|
||||
</Card>
|
||||
// パス2のレンダリング
|
||||
<Card>
|
||||
<p style={{'{{'}}display: 'none'}}>Paragraph 1</p>
|
||||
<p>Paragraph 2</p>
|
||||
</Card>
|
||||
```
|
||||
|
||||
|
||||
### 動的な子要素
|
||||
|
||||
子要素がシャッフルされているような時（検索結果のように）や、リストの最初に新しいコンポーネントが追加されるような時（ストリームのように）には、状況はさらに複雑になります。そういったケースでは、それぞれの子要素のアイデンティティやstateがレンダリングパスを保持する必要があり、以下のように `key` を認識することでそれぞれの子要素をただ1つに識別できます。
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
var results = this.props.results;
|
||||
return (
|
||||
<ol>
|
||||
{results.map(function(result) {
|
||||
return <li key={result.id}>{result.text}</li>;
|
||||
})}
|
||||
</ol>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
Reactがキー付けされた子要素を調和させるとき、 `key` と子要素が再び整理される（けんかをする代わりに）か削除されます（再利用される代わりに）。
|
||||
|
||||
`key` は以下のように *常に* 配列の中でコンポーネントに直接提供されるべきで、その配列の中でそれぞれのコンポーネントのHTMLの子要素の入れ物に提供されるべきではありません。
|
||||
|
||||
```javascript
|
||||
// 間違い！
|
||||
var ListItemWrapper = React.createClass({
|
||||
render: function() {
|
||||
return <li key={this.props.data.id}>{this.props.data.text}</li>;
|
||||
}
|
||||
});
|
||||
var MyComponent = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<ul>
|
||||
{this.props.results.map(function(result) {
|
||||
return <ListItemWrapper data={result}/>;
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// 正解 :)
|
||||
var ListItemWrapper = React.createClass({
|
||||
render: function() {
|
||||
return <li>{this.props.data.text}</li>;
|
||||
}
|
||||
});
|
||||
var MyComponent = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<ul>
|
||||
{this.props.results.map(function(result) {
|
||||
return <ListItemWrapper key={result.id} data={result}/>;
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
Reactのフラグのオブジェクトを渡すことで子要素をキー付けすることもできます。詳細は、[キー付けされたフラグ](create-fragment.html)をご覧ください。
|
||||
|
||||
## データフロー
|
||||
|
||||
Reactの、 `props` を通した所有者から所有されるコンポーネントへのデータフローは今までに記述してきました。これは実際には一方向のデータバインディングです。所有者は所有しているコンポーネントのpropsを、所有者が `props` か `state` に基づいて計算したいくつかの値にバインドします。このプロセスが何度も行われるので、データの変更は彼らが使われるところは自動的にどこでも反映されます。
|
||||
|
||||
## パフォーマンスの注意
|
||||
|
||||
みなさんは所有者の下にたくさんのノードがあるときには、データの変更には多くのコストがかかると考えるでしょう。良いニュースとして、JavaScriptは早く、 `render()` メソッドはとても単純になりやすいので、多くのアプリケーションにおいて、こういったことは非常に早くなります。加えて、ボトルネックとなるものの多くは、JSの実行ではなく、DOMの変更です。Reactは変更の一括処理と検知を使うことによって、それを最適化しています。
|
||||
|
||||
しかし、パフォーマンスについて、よりよい制御を持つことを求める時もあるでしょう。こういったケースで、Reactがサブツリーの処理をスキップすることを求めるなら、 `shouldComponentUpdate()` が単純にfalseを返すようにオーバーライドしてください。更に情報を得たい場合には、[Reactのリファレンス文書](/react/docs/component-specs.html)を読んでください。
|
||||
|
||||
> 注意:
|
||||
> `shouldComponentUpdate()` がデータが実際に変わった時にfalseを返したならば、ReactはUIを同期的に保つことができません。このメソッドを使う際には、何を行っているか理解してください。そして、顕著なパフォーマンスの問題がある時にだけ、この関数を使ってください。DOMと比較して、JavaScriptが速いことを過小評価しないでください。
|
||||
@@ -1,182 +0,0 @@
|
||||
---
|
||||
id: multiple-components-ko-KR
|
||||
title: 복합 컴포넌트
|
||||
permalink: docs/multiple-components-ko-KR.html
|
||||
prev: interactivity-and-dynamic-uis-ko-KR.html
|
||||
next: reusable-components-ko-KR.html
|
||||
---
|
||||
|
||||
지금까지, 단일 컴포넌트에서 데이터를 표시하고 유저 입력을 다루는 것을 살펴보았습니다. 다음엔 React의 최고의 기능 중 하나인 조합가능성(composability)을 살펴봅시다.
|
||||
|
||||
## 동기: 관심의 분리
|
||||
|
||||
명확히 정의된 인터페이스와 다른 컴포넌트를 재사용해 모듈러 컴포넌트를 구축하면, 함수와 클래스를 이용했을 때 얻을 수 있는 이점 대부분을 얻을 수 있습니다. 특히 앱에서 *다른 관심을 분리*할 수 있습니다.아무리 간단히 새 컴포넌트를 만들었다고 해도 말이죠. 당신의 애플리케이션에서 쓸 커스텀 컴포넌트 라이브러리를 만들어서, 당신의 도메인에 최적화된 방법으로 UI를 표현할 수 있게 됩니다.
|
||||
|
||||
## 조합(Composition) 예제
|
||||
|
||||
간단히 페이스북 그래프 API를 사용해 프로필 사진과 유저이름을 보여주는 아바타 컴포넌트를 만든다고 합시다.
|
||||
|
||||
```javascript
|
||||
var Avatar = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<div>
|
||||
<ProfilePic username={this.props.username} />
|
||||
<ProfileLink username={this.props.username} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var ProfilePic = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<img src={'https://graph.facebook.com/' + this.props.username + '/picture'} />
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var ProfileLink = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<a href={'https://www.facebook.com/' + this.props.username}>
|
||||
{this.props.username}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<Avatar username="pwh" />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
## 소유권(Ownership)
|
||||
|
||||
위의 예제에서, `Avatar` 인스턴스는 `ProfilePic`과 `ProfileLink`인스턴스를 *가지고* 있습니다. React에서 **소유자는 다른 컴포넌트의 `props`를 설정하는 컴포넌트입니다**. 더 정식으로 말하면, `X` 컴포넌트가 `Y` 컴포넌트의 `render()` 메소드 안에서 만들어졌다면, `Y`가 `X`를 *소유하고* 있다고 합니다. 앞에서 설명한 바와 같이, 컴포넌트는 자신의 `props`를 변경할 수 없습니다. `props`는 언제나 소유자가 설정한 것과 일치합니다. 이와 같은 근본적인 불변성은 UI가 일관성 있도록 해줍니다.
|
||||
|
||||
소유(owner-ownee)관계와 부모·자식 관계를 구별하는 것은 중요합니다. 부모·자식 관계가 DOM에서부터 쓰던 익숙하고 이미 알고있던 단순한 것인 한편, 소유관계는 React 고유의 것입니다. 위의 예제에서, `Avatar`는 `div`, `ProfilePic`, `ProfileLink`인스턴스를 소유하고, `div`는 `ProfilePic`과 `ProfileLink`인스턴스의 (소유자가 아닌) **부모**입니다.
|
||||
|
||||
## 자식
|
||||
|
||||
React 컴포넌트 인스턴스를 만들 때, 추가적인 React 컴포넌트나 JavaScript 표현식을 시작과 끝 태그 사이에 넣을 수 있습니다. 이렇게 말이죠.
|
||||
|
||||
```javascript
|
||||
<Parent><Child /></Parent>
|
||||
```
|
||||
|
||||
`Parent`는 `this.props.children`라는 특수 prop으로 자식들을 읽을 수 있습니다. **`this.props.children` 는 불투명한 데이터 구조이며,** [React.Children 유틸리티](/react/docs/top-level-api-ko-KR.html#react.children)를 사용해 자식들을 관리합니다.
|
||||
|
||||
### 자식 Reconciliation (비교조정)
|
||||
|
||||
**Reconciliation은 React가 DOM을 각각 새로운 렌더 패스에 업데이트하는 과정입니다.** 일반적으로, 자식은 렌더하는 순서에 따라 비교조정됩니다. 예를 들어, 각각의 마크업을 생성하는 두 개의 렌더 패스가 있다고 해봅시다.
|
||||
|
||||
```html
|
||||
// Render Pass 1
|
||||
<Card>
|
||||
<p>Paragraph 1</p>
|
||||
<p>Paragraph 2</p>
|
||||
</Card>
|
||||
// Render Pass 2
|
||||
<Card>
|
||||
<p>Paragraph 2</p>
|
||||
</Card>
|
||||
```
|
||||
|
||||
직관적으로 보면, `<p>Paragraph 1</p>`가 없어졌습니다만 그러는 대신에, React는 첫 번째 자식의 텍스트를 비교조정하고 마지막 자식을 파괴하도록 DOM을 비교조정할 것입니다. React는 자식들의 *순서*에 따라 비교조정합니다.
|
||||
|
||||
### 상태기반(Stateful) 자식
|
||||
|
||||
대부분의 컴포넌트에서는, 이것은 큰 문제가 아닙니다. 하지만 렌더 패스 간에 `this.state`를 유지하는 상태기반의 컴포넌트에서는 매우 문제가 될 수 있습니다.
|
||||
|
||||
대부분의 경우, 이 문제는 엘리먼트를 파괴하지 않고 숨김으로써 피해갈 수 있습니다.
|
||||
|
||||
```html
|
||||
// Render Pass 1
|
||||
<Card>
|
||||
<p>Paragraph 1</p>
|
||||
<p>Paragraph 2</p>
|
||||
</Card>
|
||||
// Render Pass 2
|
||||
<Card>
|
||||
<p style={{'{{'}}display: 'none'}}>Paragraph 1</p>
|
||||
<p>Paragraph 2</p>
|
||||
</Card>
|
||||
```
|
||||
|
||||
### 동적 자식
|
||||
|
||||
자식들이 섞이거나(검색의 결과같은 경우) 새로운 컴포넌트가 목록의 앞에 추가(스트림같은 경우)된다면 상황은 점점 더 까다로워집니다. 이런 때에의 동일성과 각 자식의 상태는 반드시 렌더 패스 간에 유지돼야 합니다. 각 자식에 `key`를 할당 함으로써 독자적으로 식별할 수 있습니다.
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
var results = this.props.results;
|
||||
return (
|
||||
<ol>
|
||||
{results.map(function(result) {
|
||||
return <li key={result.id}>{result.text}</li>;
|
||||
})}
|
||||
</ol>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
React가 키가 있는 자식들을 비교조정할 때, React는 `key`가 있는 자식이 (오염(clobbered)되는 대신) 재배치되고 (재사용되는 대신) 파괴되도록 보장할 것입니다.
|
||||
|
||||
`key`는 *항상* 배열 안의 각 컴포넌트의 컨테이너 HTML 자식이 아닌 컴포넌트에게 직접 주어져야 합니다.
|
||||
|
||||
```javascript
|
||||
// 틀림!
|
||||
var ListItemWrapper = React.createClass({
|
||||
render: function() {
|
||||
return <li key={this.props.data.id}>{this.props.data.text}</li>;
|
||||
}
|
||||
});
|
||||
var MyComponent = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<ul>
|
||||
{this.props.results.map(function(result) {
|
||||
return <ListItemWrapper data={result}/>;
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
});
|
||||
```
|
||||
```javascript
|
||||
// 맞음 :)
|
||||
var ListItemWrapper = React.createClass({
|
||||
render: function() {
|
||||
return <li>{this.props.data.text}</li>;
|
||||
}
|
||||
});
|
||||
var MyComponent = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<ul>
|
||||
{this.props.results.map(function(result) {
|
||||
return <ListItemWrapper key={result.id} data={result}/>;
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
ReactFragment 객체를 넘기는 것으로 자식에 키를 할당할 수도 있습니다. 자세한 내용은 [키가 할당된 프래그먼트](create-fragment-ko-KR.html)를 참고하세요.
|
||||
|
||||
## 데이터 흐름
|
||||
|
||||
React에서 데이터는 위에서 말한 것처럼 `props`를 통해 소유자로부터 소유한 컴포넌트로 흐릅니다. 이것은 사실상 단방향 데이터 바인딩입니다. 소유자는 `props`나 `state`를 기준으로 계산한 어떤 값으로 소유한 컴포넌트의 props를 바인드합니다. 이 과정은 재귀적으로 발생하므로, 데이터의 변경은 자동으로 모든 곳에 반영됩니다.
|
||||
|
||||
## 성능의 주의점
|
||||
|
||||
소유자가 가지고 있는 노드의 수가 많아지면 데이터가 변화하는 비용이 증가할 것으로 생각할 수도 있습니다. 좋은 소식은 JavaScript의 속도는 빠르고 `render()` 메소드는 꽤 간단한 경향이 있어, 대부분 애플리케이션에서 매우 빠르다는 점입니다. 덧붙여, 대부분의 병목 현상은 JS 실행이 아닌 DOM 변경에서 일어나고, React는 배치와 탐지 변경을 이용해 최적화해 줍니다.
|
||||
|
||||
하지만, 가끔 성능을 위해 정교하게 제어해야 할 때도 있습니다. 이런 경우, React가 서브트리의 처리를 건너 뛰도록 간단히 `shouldComponentUpdate()`를 오버라이드해 false를 리턴하게 할 수 있습니다. 좀 더 자세한 정보는 [React 참조 문서](/react/docs/component-specs-ko-KR.html)를 보세요.
|
||||
|
||||
> 주의:
|
||||
>
|
||||
> 데이터가 실제로는 변경되었지만 `shouldComponentUpdate()`가 false를 리턴한다면 React는 UI를 싱크시킬수 없습니다. 이 기능을 사용할 때에는 자신이 지금 무엇을 하고 있는지 알고 있고, 눈에 띄는 성능 문제가 있을 경우에만 사용하세요. JavaScript는 DOM에 비해 빠릅니다. 과소평가하지 마세요.
|
||||
@@ -1,181 +0,0 @@
|
||||
---
|
||||
id: multiple-components
|
||||
title: Multiple Components
|
||||
permalink: docs/multiple-components.html
|
||||
prev: interactivity-and-dynamic-uis.html
|
||||
next: reusable-components.html
|
||||
---
|
||||
|
||||
So far, we've looked at how to write a single component to display data and handle user input. Next let's examine one of React's finest features: composability.
|
||||
|
||||
## Motivation: Separation of Concerns
|
||||
|
||||
By building modular components that reuse other components with well-defined interfaces, you get much of the same benefits that you get by using functions or classes. Specifically you can *separate the different concerns* of your app however you please simply by building new components. By building a custom component library for your application, you are expressing your UI in a way that best fits your domain.
|
||||
|
||||
## Composition Example
|
||||
|
||||
Let's create a simple Avatar component which shows a Facebook page picture and name using the Facebook Graph API.
|
||||
|
||||
```javascript
|
||||
class Avatar extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<PagePic pagename={this.props.pagename} />
|
||||
<PageLink pagename={this.props.pagename} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class PagePic extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<img src={'https://graph.facebook.com/' + this.props.pagename + '/picture'} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class PageLink extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<a href={'https://www.facebook.com/' + this.props.pagename}>
|
||||
{this.props.pagename}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<Avatar pagename="Engineering" />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
## Ownership
|
||||
|
||||
In the above example, instances of `Avatar` *own* instances of `PagePic` and `PageLink`. In React, **an owner is the component that sets the `props` of other components**. More formally, if a component `X` is created in component `Y`'s `render()` method, it is said that `X` is *owned by* `Y`. As discussed earlier, a component cannot mutate its `props` — they are always consistent with what its owner sets them to. This fundamental invariant leads to UIs that are guaranteed to be consistent.
|
||||
|
||||
It's important to draw a distinction between the owner-ownee relationship and the parent-child relationship. The owner-ownee relationship is specific to React, while the parent-child relationship is simply the one you know and love from the DOM. In the example above, `Avatar` owns the `div`, `PagePic` and `PageLink` instances, and `div` is the **parent** (but not owner) of the `PagePic` and `PageLink` instances.
|
||||
|
||||
## Children
|
||||
|
||||
When you create a React component instance, you can include additional React components or JavaScript expressions between the opening and closing tags like this:
|
||||
|
||||
```javascript
|
||||
<Parent><Child /></Parent>
|
||||
```
|
||||
|
||||
`Parent` can read its children by accessing the special `this.props.children` prop. **`this.props.children` is an opaque data structure:** use the [React.Children utilities](/react/docs/top-level-api.html#react.children) to manipulate them.
|
||||
|
||||
### Child Reconciliation
|
||||
|
||||
**Reconciliation is the process by which React updates the DOM with each new render pass.** In general, children are reconciled according to the order in which they are rendered. For example, suppose two render passes generate the following respective markup:
|
||||
|
||||
```html
|
||||
// Render Pass 1
|
||||
<Card>
|
||||
<p>Paragraph 1</p>
|
||||
<p>Paragraph 2</p>
|
||||
</Card>
|
||||
// Render Pass 2
|
||||
<Card>
|
||||
<p>Paragraph 2</p>
|
||||
</Card>
|
||||
```
|
||||
|
||||
Intuitively, `<p>Paragraph 1</p>` was removed. Instead, React will reconcile the DOM by changing the text content of the first child and destroying the last child. React reconciles according to the *order* of the children.
|
||||
|
||||
### Stateful Children
|
||||
|
||||
For most components, this is not a big deal. However, for stateful components that maintain data in `this.state` across render passes, this can be very problematic.
|
||||
|
||||
In most cases, this can be sidestepped by hiding elements instead of destroying them:
|
||||
|
||||
```html
|
||||
// Render Pass 1
|
||||
<Card>
|
||||
<p>Paragraph 1</p>
|
||||
<p>Paragraph 2</p>
|
||||
</Card>
|
||||
// Render Pass 2
|
||||
<Card>
|
||||
<p style={{'{{'}}display: 'none'}}>Paragraph 1</p>
|
||||
<p>Paragraph 2</p>
|
||||
</Card>
|
||||
```
|
||||
|
||||
### Dynamic Children
|
||||
|
||||
The situation gets more complicated when the children are shuffled around (as in search results) or if new components are added onto the front of the list (as in streams). In these cases where the identity and state of each child must be maintained across render passes, you can uniquely identify each child by assigning it a `key`:
|
||||
|
||||
```javascript
|
||||
render() {
|
||||
return (
|
||||
<ol>
|
||||
{this.props.results.map((result) => (
|
||||
<li key={result.id}>{result.text}</li>
|
||||
))}
|
||||
</ol>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
When React reconciles the keyed children, it will ensure that any child with `key` will be reordered (instead of clobbered) or destroyed (instead of reused).
|
||||
|
||||
The `key` should *always* be supplied directly to the components in the array, not to the container HTML child of each component in the array:
|
||||
|
||||
```javascript
|
||||
// WRONG!
|
||||
class ListItemWrapper extends React.Component {
|
||||
render() {
|
||||
return <li key={this.props.data.id}>{this.props.data.text}</li>;
|
||||
}
|
||||
}
|
||||
class MyComponent extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<ul>
|
||||
{this.props.results.map((result) => (
|
||||
<ListItemWrapper data={result} />
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
```javascript
|
||||
// Correct :)
|
||||
class ListItemWrapper extends React.Component {
|
||||
render() {
|
||||
return <li>{this.props.data.text}</li>;
|
||||
}
|
||||
}
|
||||
class MyComponent extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<ul>
|
||||
{this.props.results.map((result) => (
|
||||
<ListItemWrapper key={result.id} data={result} />
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
You can also key children by passing a ReactFragment object. See [Keyed Fragments](create-fragment.html) for more details.
|
||||
|
||||
## Data Flow
|
||||
|
||||
In React, data flows from owner to owned component through `props` as discussed above. This is effectively one-way data binding: owners bind their owned component's props to some value the owner has computed based on its `props` or `state`. Since this process happens recursively, data changes are automatically reflected everywhere they are used.
|
||||
|
||||
## A Note on Performance
|
||||
|
||||
You may be thinking that it's expensive to change data if there are a large number of nodes under an owner. The good news is that JavaScript is fast and `render()` methods tend to be quite simple, so in most applications this is extremely fast. Additionally, the bottleneck is almost always the DOM mutation and not JS execution. React will optimize this for you by using batching and change detection.
|
||||
|
||||
However, sometimes you really want to have fine-grained control over your performance. In that case, simply override `shouldComponentUpdate()` to return false when you want React to skip processing of a subtree. See [the React reference docs](/react/docs/component-specs.html) for more information.
|
||||
|
||||
> Note:
|
||||
>
|
||||
> If `shouldComponentUpdate()` returns false when data has actually changed, React can't keep your UI in sync. Be sure you know what you're doing while using it, and only use this function when you have a noticeable performance problem. Don't underestimate how fast JavaScript is relative to the DOM.
|
||||
@@ -1,183 +0,0 @@
|
||||
---
|
||||
id: multiple-components-zh-CN
|
||||
title: 复合组件
|
||||
permalink: docs/multiple-components-zh-CN.html
|
||||
prev: interactivity-and-dynamic-uis-zh-CN.html
|
||||
next: reusable-components-zh-CN.html
|
||||
---
|
||||
|
||||
目前为止，我们已经学了如何用单个组件来展示数据和处理用户输入。下一步让我们来体验 React 最激动人心的特性之一：可组合性（composability）。
|
||||
|
||||
## 动机：关注分离
|
||||
|
||||
通过复用那些接口定义良好的组件来开发新的模块化组件，我们得到了与使用函数和类相似的好处。具体来说就是能够通过开发简单的组件把程序的*不同关注面分离*。如果为程序开发一套自定义的组件库，那么就能以最适合业务场景的方式来展示你的用户界面。
|
||||
|
||||
## 组合实例
|
||||
|
||||
让我们用 Facebook Graph API 来开发一个显示 Facebook 页面图片和用户名的简单 Avatar 组件吧。
|
||||
|
||||
```javascript
|
||||
var Avatar = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<div>
|
||||
<PagePic pagename={this.props.pagename} />
|
||||
<PageLink pagename={this.props.pagename} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var PagePic = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<img src={'https://graph.facebook.com/' + this.props.pagename + '/picture'} />
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var PageLink = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<a href={'https://www.facebook.com/' + this.props.pagename}>
|
||||
{this.props.pagename}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<Avatar pagename="Engineering" />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
## 从属关系
|
||||
|
||||
上面例子中，`Avatar` 拥有 `PagePic` 和 `PageLink` 的实例。`拥有者` 就是给其它组件设置 `props` 的那个组件。更正式地说，如果组件 `Y` 在 `render()` 方法是创建了组件 `X`，那么 `Y` 就拥有 `X`。上面讲过，组件不能修改自身的 `props` - 它们总是与它们的拥有者所设置的值保持一致。这是保持用户界面一致性的基本不变量。
|
||||
|
||||
把从属关系与父子关系加以区别至关重要。从属关系是 React 特有的，而父子关系简单来讲就是 DOM 里的标签的关系。在上一个例子中，`Avatar` 拥有 `div`、`PagePic` 和 `PageLink` 实例，`div` 是 `PagePic` 和 `PageLink` 实例的**父级**（但不是拥有者）。
|
||||
|
||||
## 子级
|
||||
|
||||
实例化 React 组件时，你可以在开始标签和结束标签之间引用在React 组件或者Javascript 表达式：
|
||||
|
||||
```javascript
|
||||
<Parent><Child /></Parent>
|
||||
```
|
||||
|
||||
`Parent` 能通过专门的 `this.props.children` prop 读取子级。**`this.props.children` 是一个不透明的数据结构：** 通过 [React.Children 工具类](/react/docs/top-level-api.html#react.children) 来操作。
|
||||
|
||||
### 子级校正（Reconciliation）
|
||||
|
||||
**校正就是每次 render 方法调用后 React 更新 DOM 的过程。** 一般情况下，子级会根据它们被渲染的顺序来做校正。例如，下面代码描述了两次渲染的过程：
|
||||
|
||||
```html
|
||||
// 第一次渲染
|
||||
<Card>
|
||||
<p>Paragraph 1</p>
|
||||
<p>Paragraph 2</p>
|
||||
</Card>
|
||||
// 第二次渲染
|
||||
<Card>
|
||||
<p>Paragraph 2</p>
|
||||
</Card>
|
||||
```
|
||||
|
||||
直观来看，只是删除了`<p>Paragraph 1</p>`。事实上，React 先更新第一个子级的内容，然后删除最后一个组件。React 是根据子级的*顺序*来校正的。
|
||||
|
||||
### 子组件状态管理
|
||||
|
||||
对于大多数组件，这没什么大碍。但是，对于使用 `this.state` 来在多次渲染过程中里维持数据的状态化组件，这样做潜在很多问题。
|
||||
|
||||
多数情况下，可以通过隐藏组件而不是删除它们来绕过这些问题。
|
||||
|
||||
```html
|
||||
// 第一次渲染
|
||||
<Card>
|
||||
<p>Paragraph 1</p>
|
||||
<p>Paragraph 2</p>
|
||||
</Card>
|
||||
// 第二次渲染
|
||||
<Card>
|
||||
<p style={{'{{'}}display: 'none'}}>Paragraph 1</p>
|
||||
<p>Paragraph 2</p>
|
||||
</Card>
|
||||
```
|
||||
|
||||
### 动态子级
|
||||
|
||||
如果子组件位置会改变（如在搜索结果中）或者有新组件添加到列表开头（如在流中）情况会变得更加复杂。如果子级要在多个渲染阶段保持自己的特征和状态，在这种情况下，你可以通过给子级设置惟一标识的 `key` 来区分。
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
var results = this.props.results;
|
||||
return (
|
||||
<ol>
|
||||
{results.map(function(result) {
|
||||
return <li key={result.id}>{result.text}</li>;
|
||||
})}
|
||||
</ol>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
当 React 校正带有 key 的子级时，它会确保它们被重新排序（而不是破坏）或者删除（而不是重用）。
|
||||
|
||||
务必把 `key` 添加到子级数组中的组件本身上，而不是数组中每个子级组件内部的最外层 HTML 上：
|
||||
|
||||
```javascript
|
||||
// 错误！
|
||||
var ListItemWrapper = React.createClass({
|
||||
render: function() {
|
||||
return <li key={this.props.data.id}>{this.props.data.text}</li>;
|
||||
}
|
||||
});
|
||||
var MyComponent = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<ul>
|
||||
{this.props.results.map(function(result) {
|
||||
return <ListItemWrapper data={result}/>;
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
});
|
||||
```
|
||||
```javascript
|
||||
// 正确 :)
|
||||
var ListItemWrapper = React.createClass({
|
||||
render: function() {
|
||||
return <li>{this.props.data.text}</li>;
|
||||
}
|
||||
});
|
||||
var MyComponent = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<ul>
|
||||
{this.props.results.map(function(result) {
|
||||
return <ListItemWrapper key={result.id} data={result}/>;
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
也可以传递 ReactFragment 对象来做有 key 的子级。详见[Keyed Fragments](create-fragment.html)
|
||||
|
||||
## 数据流
|
||||
|
||||
React 里，数据通过上面介绍过的 `props` 从拥有者流向归属者。这就是高效的单向数据绑定(one-way data binding)：拥有者们通过它们的 `props` 或 `state` 计算出一些值，并把这些值绑定到它们拥有的组件的 props 上。因为这个过程会递归地调用，所以数据变化会自动在所有它们被使用的地方反映出来。
|
||||
|
||||
|
||||
## 性能提醒
|
||||
|
||||
你或许会担心如果一个拥有者有大量子级时，对于数据变化做出响应非常耗费性能。值得庆幸的是执行 JavaScript 非常的快，而且 `render()` 方法一般比较简单，所以在大部分应用里这样做速度极快。此外，性能的瓶颈大多是因为 DOM 更新，而非 JS 执行，而且 React 会通过批量更新和变化检测来优化性能。
|
||||
|
||||
但是，有时候需要做细粒度的性能控制。这种情况下，可以重写 `shouldComponentUpdate()` 方法返回 false 来让 React 跳过对子树的处理。参考 [React reference docs](/react/docs/component-specs.html) 了解更多。
|
||||
|
||||
> 注意：
|
||||
>
|
||||
> 如果在数据变化时让 `shouldComponentUpdate()` 返回 false，React 就不能保证用户界面同步。当使用它的时候一定确保你清楚到底做了什么，并且只在遇到明显性能问题的时候才使用它。不要低估 JavaScript 的速度，DOM 操作通常才是慢的原因。
|
||||
@@ -1,264 +0,0 @@
|
||||
---
|
||||
id: reusable-components-it-IT
|
||||
title: Componenti Riutilizzabili
|
||||
permalink: docs/reusable-components-it-IT.html
|
||||
prev: multiple-components-it-IT.html
|
||||
next: transferring-props-it-IT.html
|
||||
---
|
||||
|
||||
Quando disegni interfacce, separa gli elementi comuni di design (bottoni, campi dei moduli, componenti di layout, etc.) in componenti riutilizzabili con interfacce ben definite. In questo modo, la prossima volta che dovrai costruire una nuova UI, puoi scrivere molto meno codice. Ciò significa tempi di sviluppo più brevi, meno bachi, e meno byte trasferiti sulla rete.
|
||||
|
||||
|
||||
## Validazione delle Proprietà
|
||||
|
||||
Mentre la tua applicazione cresce, è utile assicurarsi che i tuoi componenti vengano usati correttamente. Ciò viene fatto permettendoti di specificare i `propTypes`. `React.PropTypes` esporta una gamma di validatori che possono essere usati per assicurarsi che i dati che ricevi siano validi. Quando ad una proprietà è assegnato un valore non valido, sarà mostrato un avvertimento nella console JavaScript. Nota che per motivi di prestazioni, `propTypes` è utilizzato soltanto nella modalità di sviluppo. Di seguito trovi un esempio che documenta i diversi validatori che vengono forniti:
|
||||
|
||||
```javascript
|
||||
React.createClass({
|
||||
propTypes: {
|
||||
// Puoi dichiarare che una proprietà è uno specifico tipo primitivo JS. In
|
||||
// maniera predefinita, questi sono tutti opzionali.
|
||||
optionalArray: React.PropTypes.array,
|
||||
optionalBool: React.PropTypes.bool,
|
||||
optionalFunc: React.PropTypes.func,
|
||||
optionalNumber: React.PropTypes.number,
|
||||
optionalObject: React.PropTypes.object,
|
||||
optionalString: React.PropTypes.string,
|
||||
optionalSymbol: React.PropTypes.symbol,
|
||||
|
||||
// Tutto ciò che può essere mostrato: numeri, stringhe, elementi, o un array
|
||||
// (o frammento) contenente questi tipi.
|
||||
optionalNode: React.PropTypes.node,
|
||||
|
||||
// Un elemento React.
|
||||
optionalElement: React.PropTypes.element,
|
||||
|
||||
// Puoi anche dichiarare che una proprietà è un'istanza di una classe. Questo
|
||||
// validatore usa l'operatore instanceof di JS.
|
||||
optionalMessage: React.PropTypes.instanceOf(Message),
|
||||
|
||||
// Puoi assicurarti che la tua proprietà sia ristretta a valori specifici
|
||||
// trattandoli come una enumerazione.
|
||||
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
|
||||
|
||||
// Un oggetto che può essere di uno tra diversi tipi
|
||||
optionalUnion: React.PropTypes.oneOfType([
|
||||
React.PropTypes.string,
|
||||
React.PropTypes.number,
|
||||
React.PropTypes.instanceOf(Message)
|
||||
]),
|
||||
|
||||
// Un array di un tipo specificato
|
||||
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
|
||||
|
||||
// Un oggetto con proprietà dai valori di un tipo specificato
|
||||
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
|
||||
|
||||
// Un oggetto che accetta una forma particolare
|
||||
optionalObjectWithShape: React.PropTypes.shape({
|
||||
color: React.PropTypes.string,
|
||||
fontSize: React.PropTypes.number
|
||||
}),
|
||||
|
||||
// Puoi concatenare ciascuna delle precedenti con `isRequired` per assicurarti
|
||||
// che venga mostrato un avvertimento se la proprietà non viene impostata.
|
||||
requiredFunc: React.PropTypes.func.isRequired,
|
||||
|
||||
// Un valore di un tipo qualsiasi
|
||||
requiredAny: React.PropTypes.any.isRequired,
|
||||
|
||||
// Puoi inoltre specificare un validatore personalizzato. Deve restituire un
|
||||
// oggetto di tipo Error se la validazione fallisce. Non lanciare eccezioni
|
||||
// o utilizzare `console.warn`, in quanto non funzionerebbe all'interno di
|
||||
// `oneOfType`.
|
||||
customProp: function(props, propName, componentName) {
|
||||
if (!/matchme/.test(props[propName])) {
|
||||
return new Error('Validazione fallita!');
|
||||
}
|
||||
}
|
||||
},
|
||||
/* ... */
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
## Valori Predefiniti delle Proprietà
|
||||
|
||||
React ti permette di definire valori predefiniti per le tue `props` in una maniera molto dichiarativa:
|
||||
|
||||
```javascript
|
||||
var ComponentWithDefaultProps = React.createClass({
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
value: 'valore predefinito'
|
||||
};
|
||||
}
|
||||
/* ... */
|
||||
});
|
||||
```
|
||||
|
||||
Il risultato di `getDefaultProps()` sarà conservato e usato per assicurarsi che `this.props.value` avrà sempre un valore se non è stato specificato dal componente proprietario. Ciò ti permette di utilizzare in sicurezza le tue proprietà senza dover scrivere codice fragile e ripetitivo per gestirlo da te.
|
||||
|
||||
|
||||
## Trasferire le Proprietà: Una Scorciatoia
|
||||
|
||||
Un tipo comune di componente React è uno che estende un elemento basico HTML in maniera semplice. Spesso vorrai copiare qualsiasi attributo HTML passato al tuo componente all'elemento HTML sottostante per risparmiare del codice. Puoi usare la sintassi _spread_ di JSX per ottenerlo:
|
||||
|
||||
```javascript
|
||||
var CheckLink = React.createClass({
|
||||
render: function() {
|
||||
// Questo prende ciascuna proprietà passata a CheckLink e la copia su <a>
|
||||
return <a {...this.props}>{'√ '}{this.props.children}</a>;
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<CheckLink href="/checked.html">
|
||||
Clicca qui!
|
||||
</CheckLink>,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
## Figlio Singolo
|
||||
|
||||
Con `React.PropTypes.element` puoi specificare che solo un figlio unico possa essere passato come figli ad un componente.
|
||||
|
||||
```javascript
|
||||
var MyComponent = React.createClass({
|
||||
propTypes: {
|
||||
children: React.PropTypes.element.isRequired
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<div>
|
||||
{this.props.children} // Questo deve essere esattamente un elemento oppure lancerà un'eccezione.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
});
|
||||
```
|
||||
|
||||
## Mixin
|
||||
|
||||
I componenti sono la maniera migliore di riutilizzare il codice in React, ma a volte componenti molto diversi possono condividere funzionalità comune. Questi sono a volte chiamate [responsabilità trasversali](https://en.wikipedia.org/wiki/Cross-cutting_concern). React fornisce i `mixin` per risolvere questo problema.
|
||||
|
||||
Un caso d'uso comune è un componente che desidera aggiornarsi ad intervalli di tempo. È facile usare `setInterval()`, ma è anche importante cancellare la chiamata ripetuta quando non è più necessaria per liberare memoria. React fornisce dei [metodi del ciclo di vita](/react/docs/working-with-the-browser.html#component-lifecycle) che ti permettono di sapere quando un componente sta per essere creato o distrutto. Creiamo un semplice mixin che usa questi metodi per fornire una facile funzione `setInterval()` che sarà automaticamente rimossa quando il tuo componente viene distrutto.
|
||||
|
||||
```javascript
|
||||
var SetIntervalMixin = {
|
||||
componentWillMount: function() {
|
||||
this.intervals = [];
|
||||
},
|
||||
setInterval: function() {
|
||||
this.intervals.push(setInterval.apply(null, arguments));
|
||||
},
|
||||
componentWillUnmount: function() {
|
||||
this.intervals.forEach(clearInterval);
|
||||
}
|
||||
};
|
||||
|
||||
var TickTock = React.createClass({
|
||||
mixins: [SetIntervalMixin], // Usa il mixin
|
||||
getInitialState: function() {
|
||||
return {seconds: 0};
|
||||
},
|
||||
componentDidMount: function() {
|
||||
this.setInterval(this.tick, 1000); // Chiama un metodo del mixin
|
||||
},
|
||||
tick: function() {
|
||||
this.setState({seconds: this.state.seconds + 1});
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<p>
|
||||
React has been running for {this.state.seconds} seconds.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<TickTock />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
Una caratteristica interessante dei mixin è che, se un componente usa molteplici mixin e diversi mixin definiscono lo stesso metodo del ciclo di vita (cioè diversi mixin desiderano effettuare una pulizia quando il componente viene distrutto), viene garantito che tutti i metodi del ciclo di vita verranno chiamati. I metodi definiti nei mixin vengono eseguiti nell'ordine in cui i mixin sono elencati, seguiti da una chiamata al metodo definito nel componente.
|
||||
|
||||
## Classi ES6
|
||||
|
||||
Puoi anche definire le tue classi React come pure classi JavaScript. Per esempio, usando la sintassi delle classi ES6:
|
||||
|
||||
```javascript
|
||||
class HelloMessage extends React.Component {
|
||||
render() {
|
||||
return <div>Ciao {this.props.name}</div>;
|
||||
}
|
||||
}
|
||||
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
|
||||
```
|
||||
|
||||
L'API è simile a `React.createClass` con l'eccezione del metodo `getInitialState`. Anziché fornire un metodo `getInitialState` a parte, imposti la tua proprietà `state` nel costruttore.
|
||||
|
||||
Un'altra differenza è che `propTypes` e `defaultProps` sono definite come proprietà del costruttore anziché nel corpo della classe.
|
||||
|
||||
```javascript
|
||||
export class Counter extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {count: props.initialCount};
|
||||
}
|
||||
tick() {
|
||||
this.setState({count: this.state.count + 1});
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div onClick={this.tick.bind(this)}>
|
||||
Click: {this.state.count}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Counter.propTypes = { initialCount: React.PropTypes.number };
|
||||
Counter.defaultProps = { initialCount: 0 };
|
||||
```
|
||||
|
||||
### Niente Binding Automatico
|
||||
|
||||
I metodi seguono la stessa semantica delle classi ES6 regolari, ciò significa che non effettuano il binding automatico di `this` all'istanza. Dovrai pertanto usare esplicitamente `.bind(this)` oppure [le funzioni freccia](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) `=>`.
|
||||
|
||||
### Niente Mixin
|
||||
|
||||
Sfortunatamente, ES6 è stato lanciato senza alcun supporto per i mixin. Di conseguenza non vi è alcun supporto per i mixin quando usi React con le classi ES6. Stiamo lavorando per rendere più semplice il supporto dei relativi casi d'uso senza ricorrere ai mixin.
|
||||
|
||||
|
||||
|
||||
## Funzioni Prive di Stato
|
||||
|
||||
Puoi anche definire le tue classi React come semplici funzioni JavaScript. Ad esempio usando la sintassi della funzione priva di stato:
|
||||
|
||||
```javascript
|
||||
function HelloMessage(props) {
|
||||
return <div>Ciao {props.name}</div>;
|
||||
}
|
||||
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
|
||||
```
|
||||
|
||||
Oppure usando la nuova sintassi freccia di ES6:
|
||||
|
||||
```javascript
|
||||
const HelloMessage = (props) => <div>Ciao {props.name}</div>;
|
||||
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
|
||||
```
|
||||
|
||||
|
||||
Questa API semplificata dei componenti è intesa per i componenti che sono pure funzioni dele proprietà. Questi componenti non devono trattenere stato interno, non hanno istanze di supporto, e non posseggono metodi di ciclo di vita. Sono pure trasformate funzionali del loro input, con zero codice boilerplate.
|
||||
|
||||
> NOTA:
|
||||
>
|
||||
> Poiché le funzioni prive di stato non hanno un'istanza di supporto, non puoi assegnare un ref a un componente creato con una funzione priva di stato. Normalmente questo non è un problema, poiché le funzioni prive di stato non forniscono un'API imperativa. Senza un'API imperativa, non puoi comunque fare molto con un'istanza. Tuttavia, se un utente desidera trovare il nodo DOM di un componente creato con una funzione priva di stato, occorre avvolgere il componente in un altro componente dotato di stato (ad es. un componente classe ES6) e assegnare il ref al componente dotato di stato.
|
||||
|
||||
In un mondo ideale, la maggior parte dei tuoi componenti sarebbero funzioni prive di stato poiché questi componenti privi di stato seguono un percorso più rapido all'interno del core di React. Questo è un pattern raccomandato, quando possibile.
|
||||
@@ -1,231 +0,0 @@
|
||||
---
|
||||
id: reusable-components
|
||||
title: 再利用可能なコンポーネント
|
||||
permalink: docs/reusable-components-ja-JP.html
|
||||
prev: multiple-components-ja-JP.html
|
||||
next: transferring-props-ja-JP.html
|
||||
---
|
||||
|
||||
インターフェースをデザインするとき、明確に定義されたインターフェースでは共通のデザイン要素（ボタン、フォームフィールド、レイアウトコンポーネントなど）を再利用可能なコンポーネントにブレークダウンします。そのような方法をとることで、次にUIを作成する必要があるときに、書くコードが少なくて済みます。これは、開発速度を上げ、バグを減らし、導線を減らすことを意味します。
|
||||
|
||||
## Propのバリデーション
|
||||
|
||||
アプリが大きくなっていくにつれて、コンポーネントが正しく使われていることを保証することが役に立つようになります。`propTypes` を指定することでそういったことができるようになります。`React.PropTypes` はあなたが受け取ったデータが正しいことを認識するのに使われるバリデータを出力します。不正な値がpropに渡されたときは、警告がJavaScriptコンソールに表示されます。パフォーマンスの点で、 `propTypes` は開発モードでのみチェックされることに注意してください。異なるバリデータが提供された際の例を表すドキュメントは以下の通りです。
|
||||
|
||||
```javascript
|
||||
React.createClass({
|
||||
propTypes: {
|
||||
// propがJSのプリミティブ型であると宣言できます。
|
||||
// デフォルトで、以下は全てオプションです。
|
||||
optionalArray: React.PropTypes.array,
|
||||
optionalBool: React.PropTypes.bool,
|
||||
optionalFunc: React.PropTypes.func,
|
||||
optionalNumber: React.PropTypes.number,
|
||||
optionalObject: React.PropTypes.object,
|
||||
optionalString: React.PropTypes.string,
|
||||
optionalSymbol: React.PropTypes.symbol,
|
||||
|
||||
// 何でもレンダリングできます。number、string、要素やそれらを含む配列など。
|
||||
optionalNode: React.PropTypes.node,
|
||||
|
||||
// Reactの要素。
|
||||
optionalElement: React.PropTypes.element,
|
||||
|
||||
// propがクラスのインスタンスであるとの宣言もできます。
|
||||
// JSのinstanceofオペレータを使用しています。
|
||||
optionalMessage: React.PropTypes.instanceOf(Message),
|
||||
|
||||
// 以下をenumとして扱うことで、propがある値であると保証できます。
|
||||
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
|
||||
|
||||
// たくさんの型のうちのひとつになりうるオブジェクト
|
||||
optionalUnion: React.PropTypes.oneOfType([
|
||||
React.PropTypes.string,
|
||||
React.PropTypes.number,
|
||||
React.PropTypes.instanceOf(Message)
|
||||
]),
|
||||
|
||||
// ある型の配列
|
||||
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
|
||||
|
||||
// プロパティの値がある型のものであるオブジェクト
|
||||
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
|
||||
|
||||
// 特定の形をとるオブジェクト
|
||||
optionalObjectWithShape: React.PropTypes.shape({
|
||||
color: React.PropTypes.string,
|
||||
fontSize: React.PropTypes.number
|
||||
}),
|
||||
|
||||
// `isRequired` は上記のどの値にも繋げることができますが、
|
||||
// propが提供されなかったときには警告が出ることに注意してください。
|
||||
requiredFunc: React.PropTypes.func.isRequired,
|
||||
|
||||
// どのようなデータ型の値でも大丈夫です
|
||||
requiredAny: React.PropTypes.any.isRequired,
|
||||
|
||||
// バリデータをカスタマイズすることもできます。
|
||||
// 以下はバリデーションが落ちた時にはエラーを返します。
|
||||
// `oneOfType` の中で動かなくなるので、 `console.warn` や throw はしないでください。
|
||||
customProp: function(props, propName, componentName) {
|
||||
if (!/matchme/.test(props[propName])) {
|
||||
return new Error('Validation failed!');
|
||||
}
|
||||
}
|
||||
},
|
||||
/* ... */
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
## デフォルトのPropの値
|
||||
|
||||
Reactは以下のように、とても宣言的な方法で `props` のデフォルト値を定義できます。
|
||||
|
||||
```javascript
|
||||
var ComponentWithDefaultProps = React.createClass({
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
value: 'default value'
|
||||
};
|
||||
}
|
||||
/* ... */
|
||||
});
|
||||
```
|
||||
|
||||
`getDefaultProps()` の結果は `this.props.value` が親コンポーネントで制限されなかった場合に値を保証するためにキャッシュされて使われます。これによって、自分自身でハンドルするための壊れやすいコードを何度も書くことなくpropsをただ安全に使うことができます。
|
||||
|
||||
## Propsの移動: ショートカット
|
||||
|
||||
Reactのコンポーネントに共通しているのは、単純な方法で基本的なHTML要素を拡張していることです。よく、
|
||||
コンポーネントに渡されるHTML属性を、型付けを守るために、基本的なHTML要素にコピーしたいと考える人もいます。このようなことを行うために、JSXの _拡張された_ シンタックスを使うことができます。
|
||||
|
||||
```javascript
|
||||
var CheckLink = React.createClass({
|
||||
render: function() {
|
||||
// 以下はCheckLinkに渡されたどんなpropsをとることができ、<a>タグにコピーすることもできます。
|
||||
return <a {...this.props}>{'√ '}{this.props.children}</a>;
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<CheckLink href="/checked.html">
|
||||
Click here!
|
||||
</CheckLink>,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
## 単一の子要素
|
||||
|
||||
`React.PropTypes.element` を使って、childrenとしてコンポーネントにただ一つの子要素が渡されるよう制限できます。
|
||||
|
||||
```javascript
|
||||
var MyComponent = React.createClass({
|
||||
propTypes: {
|
||||
children: React.PropTypes.element.isRequired
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<div>
|
||||
{this.props.children} // これは1つの要素でなくてはなりません。さもなければエラーがthrowされます。
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
});
|
||||
```
|
||||
|
||||
## ミックスイン
|
||||
|
||||
コンポーネントはReactでコードを再利用する最良の方法ですが、全く異なったコンポーネントが共通の機能性を共有することもあります。それらは[横断的関心事](https://en.wikipedia.org/wiki/Cross-cutting_concern)と呼ばれることもあります。Reactはこの問題を解決するために、 `mixins` を提供しています。
|
||||
|
||||
共通のユースケースとしては、時間の間隔によって、コンポーネントにそれ自身をアップデートさせたい場合があります。 `setInterval()` を使うのは簡単ですが、メモリをセーブするためにもう必要でなくなった場合にはインターバルをキャンセルすることが重要です。Reactは[ライフサイクルメソッド](/react/docs/working-with-the-browser.html#component-lifecycle)を提供しており、コンポーネントが作成されようとしたり削除されようとした時にそれを検知することができます。コンポーネントが削除されたときに自動的にクリーンアップしてくれる、簡単な `setInterval()` 関数を提供する以下のようなメソッドを使って単純なミックスインを作成してみましょう。
|
||||
|
||||
```javascript
|
||||
var SetIntervalMixin = {
|
||||
componentWillMount: function() {
|
||||
this.intervals = [];
|
||||
},
|
||||
setInterval: function() {
|
||||
this.intervals.push(setInterval.apply(null, arguments));
|
||||
},
|
||||
componentWillUnmount: function() {
|
||||
this.intervals.forEach(clearInterval);
|
||||
}
|
||||
};
|
||||
|
||||
var TickTock = React.createClass({
|
||||
mixins: [SetIntervalMixin], // ミックスインを使う
|
||||
getInitialState: function() {
|
||||
return {seconds: 0};
|
||||
},
|
||||
componentDidMount: function() {
|
||||
this.setInterval(this.tick, 1000); // ミックスインのメソッドを呼ぶ
|
||||
},
|
||||
tick: function() {
|
||||
this.setState({seconds: this.state.seconds + 1});
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<p>
|
||||
React has been running for {this.state.seconds} seconds.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<TickTock />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
ミックスインの素晴らしい特徴はコンポーネントが複数のミックスインを使っていて、いくつかのミックスインが同じライフサイクルメソッドを定義している場合（すなわち、コンポーネントが削除された際に幾つかのミックスインがクリーンアップを行いたい場合）に、すべてのライフサイクルメソッドが呼ばれることを保証することです。ミックスインで定義されたメソッドは、ミックスインが並んでいる順番に走り、コンポーネントのメソッド呼び出しで呼ばれます。
|
||||
|
||||
## ES6のクラス
|
||||
|
||||
ReactのクラスをただのJavaScriptのクラスとして定義することもできます。例えば、ES6 のクラスシンタックスを使うと、以下のようになります。
|
||||
|
||||
```javascript
|
||||
class HelloMessage extends React.Component {
|
||||
render() {
|
||||
return <div>Hello {this.props.name}</div>;
|
||||
}
|
||||
}
|
||||
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
|
||||
```
|
||||
|
||||
APIは `getInitialState` という例外を除き、 `React.createClass` と同じです。APIが異なっている `getInitialState` メソッドを提供する代わりに、コンストラクタの中に `state` プロパティをセットします。
|
||||
|
||||
他の違いは、 `propTypes` と `defaultProps` はクラスのボディに定義される代わりにコンストラクタにプロパティとして定義されます。
|
||||
|
||||
```javascript
|
||||
export class Counter extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {count: props.initialCount};
|
||||
}
|
||||
tick() {
|
||||
this.setState({count: this.state.count + 1});
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div onClick={this.tick.bind(this)}>
|
||||
Clicks: {this.state.count}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Counter.propTypes = { initialCount: React.PropTypes.number };
|
||||
Counter.defaultProps = { initialCount: 0 };
|
||||
```
|
||||
|
||||
### オートバインディングしません
|
||||
|
||||
メソッドは標準のES6のクラスと同じ仕様です。それは、 `this` をインスタンスに自動的にバインドしないことを意味します。明確に `.bind(this)` を使うか [アロー関数](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/) `=>` を使ってください。
|
||||
|
||||
### ミックスインはありません
|
||||
|
||||
不幸なことに、ES6はミックスインのサポートを行いません。それゆえ、ReactをES6のクラスと一緒に使う際にはミックスインのサポートはありません。代わりに、ミックスインに頼ることなくそれらのユースケースをサポートするのが簡単になるよう努力しています。
|
||||
@@ -1,256 +0,0 @@
|
||||
---
|
||||
id: reusable-components-ko-KR
|
||||
title: 재사용가능한 컴포넌트
|
||||
permalink: docs/reusable-components-ko-KR.html
|
||||
prev: multiple-components-ko-KR.html
|
||||
next: transferring-props-ko-KR.html
|
||||
---
|
||||
|
||||
인터페이스를 설계할 때, 공통적으로 사용되는 디자인 요소들(버튼, 폼 필드, 레이아웃 컴포넌트 등.)을 잘 정의된 인터페이스의 재사용 가능한 컴포넌트로 분해합니다. 이런 방법으로 다음에 UI를 구축할 때에는 훨씬 적은 코드로 만들 수 있습니다. 이 말은 더 빠른 개발 시간, 더 적은 버그, 더 적은 용량으로 할 수 있다는 뜻이죠.
|
||||
|
||||
## Prop 검증
|
||||
|
||||
앱의 규모가 커지면 컴포넌트들이 바르게 사용되었는지 확인하는게 도움이 됩니다. 확인은 `propTypes`를 명시해서 할 수 있습니다. `React.PropTypes`는 받은 데이터가 적절한지(valid) 확인하는데 사용할 수 있는 다양한 검증자(validator)를 제공합니다. prop에 부적절한 값을 명시한다면 JavaScript 콘솔에 경고가 보일 것입니다. 성능상의 문제로 `propTypes`는 개발 모드에서만 검사됩니다. 다음은 제공되는 검증자를 설명하는 예제입니다.
|
||||
|
||||
```javascript
|
||||
React.createClass({
|
||||
propTypes: {
|
||||
// 특정 JavaScript 프리미티브 타입에 대한 prop을 명시할 수 있습니다.
|
||||
// 기본적으로 이것들은 모두 선택적입니다.
|
||||
optionalArray: React.PropTypes.array,
|
||||
optionalBool: React.PropTypes.bool,
|
||||
optionalFunc: React.PropTypes.func,
|
||||
optionalNumber: React.PropTypes.number,
|
||||
optionalObject: React.PropTypes.object,
|
||||
optionalString: React.PropTypes.string,
|
||||
optionalSymbol: React.PropTypes.symbol,
|
||||
|
||||
// 렌더링될 수 있는 모든 것: 숫자, 문자열, 요소
|
||||
// 이것들을 포함하는 배열(이나 프래그먼트)
|
||||
optionalNode: React.PropTypes.node,
|
||||
|
||||
// React 엘리먼트
|
||||
optionalElement: React.PropTypes.element,
|
||||
|
||||
// 클래스의 인스턴스 또한 prop으로 명시할 수 있습니다. JavaScript의 instanceof
|
||||
// 연산자를 사용합니다.
|
||||
optionalMessage: React.PropTypes.instanceOf(Message),
|
||||
|
||||
// 열거형처럼 특정 값들로만 prop을 제한해서 사용할 수 있습니다.
|
||||
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
|
||||
|
||||
// 많은 타입들 중 하나로 사용할 수 있는 객체가 될 수도 있습니다.
|
||||
optionalUnion: React.PropTypes.oneOfType([
|
||||
React.PropTypes.string,
|
||||
React.PropTypes.number,
|
||||
React.PropTypes.instanceOf(Message)
|
||||
]),
|
||||
|
||||
// 특정 타입의 배열
|
||||
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
|
||||
|
||||
// 특정 타입의 속성값을 갖는 객체
|
||||
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
|
||||
|
||||
// 특정한 형태(shape)의 객체
|
||||
optionalObjectWithShape: React.PropTypes.shape({
|
||||
color: React.PropTypes.string,
|
||||
fontSize: React.PropTypes.number
|
||||
}),
|
||||
|
||||
// 위에 언급된 것들을 `isRequired`로 연결해서 prop이 제공되지 않을 때 경고를
|
||||
// 띄우도록 할 수도 있습니다.
|
||||
requiredFunc: React.PropTypes.func.isRequired,
|
||||
|
||||
// 어떤 데이터 타입도 가능
|
||||
requiredAny: React.PropTypes.any.isRequired,
|
||||
|
||||
// 물론 사용자 정의 검증자도 지정할 수 있습니다. 이는 검증이 실패했을 때
|
||||
// Error 객체를 리턴해야합니다. `console.warn`을 이나 throw를 하면 안됩니다.
|
||||
// 그렇게하면 `oneOfType` 안에서 작동하지 않습니다.
|
||||
customProp: function(props, propName, componentName) {
|
||||
if (!/matchme/.test(props[propName])) {
|
||||
return new Error('Validation failed!');
|
||||
}
|
||||
}
|
||||
},
|
||||
/* ... */
|
||||
});
|
||||
```
|
||||
|
||||
## 기본 Prop 값
|
||||
|
||||
React는 매우 선언적(declarative)인 방법으로 `props`의 기본값을 정의할 수 있게 해줍니다.
|
||||
|
||||
```javascript
|
||||
var ComponentWithDefaultProps = React.createClass({
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
value: 'default value'
|
||||
};
|
||||
}
|
||||
/* ... */
|
||||
});
|
||||
```
|
||||
|
||||
`getDefaultProps()`의 결과값은 캐시가 되며, 부모 컴포넌트에서 명시되지 않았을 때 `this.props.value`가 값을 가질 수 있도록 해주는데 사용됩니다.`getDefaultProps()`를 사용하면 반복적이고 깨지기 쉬운 코드를 짤 필요없이 그냥 안전하게 prop을 사용할 수 있습니다.
|
||||
|
||||
## Prop 전달하기: 단축
|
||||
|
||||
React 컴포넌트의 흔히 그냥 기본 HTML 엘리먼트를 확장해서 씁니다. 타이핑을 아끼기 위해 기저의 HTML 엘리먼트에 HTML 속성들을 단순히 복사하는 컴포넌트가 필요할 수도 있습니다. JSX의 _spread_ 문법을 사용하면 이렇게 할 수 있습니다.
|
||||
|
||||
```javascript
|
||||
var CheckLink = React.createClass({
|
||||
render: function() {
|
||||
// 모든 prop을 받아서 CheckLink에 넘기고 <a>에 복사합니다.
|
||||
return <a {...this.props}>{'√ '}{this.props.children}</a>;
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<CheckLink href="/checked.html">
|
||||
Click here!
|
||||
</CheckLink>,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
## 단일 자식
|
||||
|
||||
`React.PropTypes.element`을 통해 컴포넌트에 한 자식만 보내도록 명시할 수 있습니다.
|
||||
|
||||
```javascript
|
||||
var MyComponent = React.createClass({
|
||||
propTypes: {
|
||||
children: React.PropTypes.element.isRequired
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<div>
|
||||
{this.props.children} // 정확히 한 엘리먼트여야만 하며, 아니면 에러가 발생합니다.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
});
|
||||
```
|
||||
|
||||
## 믹스인
|
||||
|
||||
컴포넌트는 React에서 코드를 재사용할 수 있는 최고의 방법이지만, 가끔 아주 다른 컴포넌트에서 공통 기능이 필요한 때도 있습니다. 이런 상황을 [공통된 관심사(cross-cutting concerns)](https://en.wikipedia.org/wiki/Cross-cutting_concern)라 부르며, React에서는 `mixins`으로 이 문제를 해결합니다.
|
||||
|
||||
예를 들어, 컴포넌트가 주기적으로 업데이트되길 원할 경우가 있습니다. `setInterval()`을 사용하면 쉽지만, 필요 없어지면 메모리를 아끼기 위해 주기를 꼭 취소해야 합니다. React는 컴포넌트가 막 생성거나 없어질 때를 [생명주기 메소드](/react/docs/working-with-the-browser-ko-KR.html#컴포넌트-생명주기)를 통해 알려줍니다. 이런 메소드들을 사용해서 컴포넌트가 사라질 때 자동으로 정리해주는 `setInterval()`를 제공해주는 간단한 믹스인을 만들어보겠습니다.
|
||||
|
||||
```javascript
|
||||
var SetIntervalMixin = {
|
||||
componentWillMount: function() {
|
||||
this.intervals = [];
|
||||
},
|
||||
setInterval: function() {
|
||||
this.intervals.push(setInterval.apply(null, arguments));
|
||||
},
|
||||
componentWillUnmount: function() {
|
||||
this.intervals.forEach(clearInterval);
|
||||
}
|
||||
};
|
||||
|
||||
var TickTock = React.createClass({
|
||||
mixins: [SetIntervalMixin], // 믹스인 사용
|
||||
getInitialState: function() {
|
||||
return {seconds: 0};
|
||||
},
|
||||
componentDidMount: function() {
|
||||
this.setInterval(this.tick, 1000); // 믹스인에 있는 메소드를 호출
|
||||
},
|
||||
tick: function() {
|
||||
this.setState({seconds: this.state.seconds + 1});
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<p>
|
||||
React has been running for {this.state.seconds} seconds.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<TickTock />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
믹스인의 괜찮은 점은 컴포넌트가 여러 믹스인을 사용하고 여러 믹스인에서 같은 생명주기 메소드를 사용할 때(예를 들어, 여러 믹스인에서 컴포넌트가 사라질 때 뭔가 정리하려 한다면) 모든 생명주기 메소드들의 실행은 보장됩니다. 믹스인에 정의된 메소드은 컴포넌트의 메소드가 호출됨에 따라 믹스인이 나열된 순서대로 실행됩니다.
|
||||
|
||||
## ES6 클래스
|
||||
|
||||
React 클래스를 일반적인 JavaScript 클래스로 선언할 수도 있습니다. 다음의 예제는 ES6 클래스 문법을 사용합니다:
|
||||
|
||||
```javascript
|
||||
class HelloMessage extends React.Component {
|
||||
render() {
|
||||
return <div>Hello {this.props.name}</div>;
|
||||
}
|
||||
}
|
||||
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
|
||||
```
|
||||
|
||||
API는 `getInitialState`를 제외하고 `React.createClass`와 유사합니다. 별도의 `getInitialState` 메소드 대신에, 필요한 `state` 프로퍼티를 생성자에서 설정할 수 있습니다.
|
||||
|
||||
또다른 차이점은 `propTypes`와 `defaultProps`가 클래스의 내부가 아니라 생성자의 프로퍼티로 정의되어 있다는 것입니다.
|
||||
|
||||
```javascript
|
||||
export class Counter extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {count: props.initialCount};
|
||||
}
|
||||
tick() {
|
||||
this.setState({count: this.state.count + 1});
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div onClick={this.tick.bind(this)}>
|
||||
Clicks: {this.state.count}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Counter.propTypes = { initialCount: React.PropTypes.number };
|
||||
Counter.defaultProps = { initialCount: 0 };
|
||||
```
|
||||
|
||||
### 자동 바인딩 안됨
|
||||
|
||||
메소드는 일반 ES6 클래스와 동일한 시멘틱을 따릅니다. `this`를 인스턴스에 자동으로 바인딩하지 않는다는 이야기입니다. 명시적으로 `.bind(this)`나 [화살표 함수(arrow function)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) `=>`를 사용하세요.
|
||||
|
||||
### 믹스인 안됨
|
||||
|
||||
불행하게도 ES6는 믹스인에 대한 지원이 없이 출시되었기 때문에, React에서 ES6 클래스를 사용한다면 믹스인을 사용할 방법이 없습니다. 대신, 우리는 믹스인에 의존하지 않고도 동작하도록 만들기 위해 열심히 노력하고 있습니다.
|
||||
|
||||
## 상태를 가지지 않는 함수
|
||||
|
||||
React 클래스를 일반 JavaScript 함수로 작성할 수도 있습니다. 상태를 가지지 않는 함수 문법을 사용하는 예제입니다.
|
||||
|
||||
```javascript
|
||||
function HelloMessage(props) {
|
||||
return <div>Hello {props.name}</div>;
|
||||
}
|
||||
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
|
||||
```
|
||||
|
||||
아니면 ES6의 화살표 문법을 사용할 수 있습니다.
|
||||
|
||||
```javascript
|
||||
const HelloMessage = (props) => <div>Hello {props.name}</div>;
|
||||
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
|
||||
```
|
||||
|
||||
이 단순화된 컴포넌트 API는 prop의 순수 함수인 컴포넌트를 나타냅니다. 이 컴포넌트는 내부 상태가 없어야 하고, 내부 인스턴스가 없어야 하고, 컴포넌트 생명주기 메소드가 없어야 합니다. 아무런 준비 과정없이 입력에 대한 순수한 기능적 변환이어야 합니다.
|
||||
|
||||
> 주의:
|
||||
>
|
||||
> 상태를 가지지 않는 함수는 내부 인스턴스가 없기 때문에, ref를 상태를 가지지않는 함수에 넣을 수 없습니다. 상태를 가지지 않는 함수는 명령형(imperative) API를 제공하지 않기 때문에 일반적으로 이것은 문제가 되지 않습니다. 명령형 API없이 인스턴스에 할 수 있는 것이 많지 않기도 하죠. 하지만 상태를 가지지 않는 컴포넌트의 DOM 노드를 검색하길 원한다면, 반드시 상태 기반 컴포넌트(예. ES6 클래스 컴포넌트)로 컴포넌트를 감싸고 상태 기반 래퍼 컴포넌트에 ref를 붙여야 합니다.
|
||||
|
||||
이상적으로는, 대부분의 컴포넌트는 상태를 가지지 않는 함수여야 합니다. 왜냐 하면 이런 상태를 가지지 않는 컴포넌트는 React 코어 안에서 더 빠른 코드 경로를 거치기 때문입니다. 이는 가능한 한 추천하는 패턴입니다.
|
||||
@@ -1,462 +0,0 @@
|
||||
---
|
||||
id: reusable-components
|
||||
title: Reusable Components
|
||||
permalink: docs/reusable-components.html
|
||||
prev: multiple-components.html
|
||||
next: transferring-props.html
|
||||
---
|
||||
|
||||
When designing interfaces, break down the common design elements (buttons, form fields, layout components, etc.) into reusable components with well-defined interfaces. That way, the next time you need to build some UI, you can write much less code. This means faster development time, fewer bugs, and fewer bytes down the wire.
|
||||
|
||||
## Prop Validation
|
||||
|
||||
As your app grows it's helpful to ensure that your components are used correctly. We do this by allowing you to specify `propTypes`. `React.PropTypes` exports a range of validators that can be used to make sure the data you receive is valid. When an invalid value is provided for a prop, a warning will be shown in the JavaScript console. Note that for performance reasons `propTypes` is only checked in development mode.
|
||||
|
||||
You can assign a special property to a component to declare its `propTypes`:
|
||||
|
||||
```javascript
|
||||
class Greeting extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<h1>Hello, {this.props.name}</h1>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Greeting.propTypes = {
|
||||
name: React.PropTypes.string
|
||||
};
|
||||
```
|
||||
|
||||
Here is an example documenting the different validators provided:
|
||||
|
||||
```javascript
|
||||
MyComponent.propTypes = {
|
||||
// You can declare that a prop is a specific JS primitive. By default, these
|
||||
// are all optional.
|
||||
optionalArray: React.PropTypes.array,
|
||||
optionalBool: React.PropTypes.bool,
|
||||
optionalFunc: React.PropTypes.func,
|
||||
optionalNumber: React.PropTypes.number,
|
||||
optionalObject: React.PropTypes.object,
|
||||
optionalString: React.PropTypes.string,
|
||||
optionalSymbol: React.PropTypes.symbol,
|
||||
|
||||
// Anything that can be rendered: numbers, strings, elements or an array
|
||||
// (or fragment) containing these types.
|
||||
optionalNode: React.PropTypes.node,
|
||||
|
||||
// A React element.
|
||||
optionalElement: React.PropTypes.element,
|
||||
|
||||
// You can also declare that a prop is an instance of a class. This uses
|
||||
// JS's instanceof operator.
|
||||
optionalMessage: React.PropTypes.instanceOf(Message),
|
||||
|
||||
// You can ensure that your prop is limited to specific values by treating
|
||||
// it as an enum.
|
||||
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
|
||||
|
||||
// An object that could be one of many types
|
||||
optionalUnion: React.PropTypes.oneOfType([
|
||||
React.PropTypes.string,
|
||||
React.PropTypes.number,
|
||||
React.PropTypes.instanceOf(Message)
|
||||
]),
|
||||
|
||||
// An array of a certain type
|
||||
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
|
||||
|
||||
// An object with property values of a certain type
|
||||
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
|
||||
|
||||
// An object taking on a particular shape
|
||||
optionalObjectWithShape: React.PropTypes.shape({
|
||||
color: React.PropTypes.string,
|
||||
fontSize: React.PropTypes.number
|
||||
}),
|
||||
|
||||
// You can chain any of the above with `isRequired` to make sure a warning
|
||||
// is shown if the prop isn't provided.
|
||||
requiredFunc: React.PropTypes.func.isRequired,
|
||||
|
||||
// A value of any data type
|
||||
requiredAny: React.PropTypes.any.isRequired,
|
||||
|
||||
// You can also specify a custom validator. It should return an Error
|
||||
// object if the validation fails. Don't `console.warn` or throw, as this
|
||||
// won't work inside `oneOfType`.
|
||||
customProp: function(props, propName, componentName) {
|
||||
if (!/matchme/.test(props[propName])) {
|
||||
return new Error(
|
||||
'Invalid prop `' + propName + '` supplied to' +
|
||||
' `' + componentName + '`. Validation failed.'
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
// You can also supply a custom validator to `arrayOf` and `objectOf`.
|
||||
// It should return an Error object if the validation fails. The validator
|
||||
// will be called for each key in the array or object. The first two
|
||||
// arguments of the validator are the array or object itself, and the
|
||||
// current item's key.
|
||||
customArrayProp: React.PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
|
||||
if (!/matchme/.test(propValue[key])) {
|
||||
return new Error(
|
||||
'Invalid prop `' + propFullName + '` supplied to' +
|
||||
' `' + componentName + '`. Validation failed.'
|
||||
);
|
||||
}
|
||||
})
|
||||
};
|
||||
```
|
||||
|
||||
### Single Child
|
||||
|
||||
With `React.PropTypes.element` you can specify that only a single child can be passed to a component as children.
|
||||
|
||||
```javascript
|
||||
class MyComponent extends React.Component {
|
||||
render() {
|
||||
// This must be exactly one element or it will warn.
|
||||
var children = this.props.children;
|
||||
return (
|
||||
<div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
MyComponent.propTypes = {
|
||||
children: React.PropTypes.element.isRequired
|
||||
};
|
||||
```
|
||||
|
||||
## Default Prop Values
|
||||
|
||||
React lets you define default values for your `props` in a very declarative way:
|
||||
|
||||
```javascript
|
||||
class Greeting extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<h1>Hello, {this.props.name}</h1>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Specifies the default values for props:
|
||||
Greeting.defaultProps = {
|
||||
name: 'Stranger'
|
||||
};
|
||||
|
||||
// Renders "Hello, Stranger":
|
||||
ReactDOM.render(
|
||||
<Greeting />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
The `defaultProps` will be used to ensure that `this.props.name` will have a value if it was not specified by the parent component. This allows you to safely just use your props without having to write repetitive and fragile code to handle that yourself.
|
||||
|
||||
## Transferring Props: A Shortcut
|
||||
|
||||
A common type of React component is one that extends a basic HTML element in a simple way. Often you'll want to copy any HTML attributes passed to your component to the underlying HTML element. To save typing, you can use the JSX _spread_ syntax to achieve this:
|
||||
|
||||
```javascript
|
||||
class CheckLink extends React.Component {
|
||||
render() {
|
||||
// This takes any props passed to CheckLink and copies them to <a>
|
||||
return (
|
||||
<a {...this.props}>{'√ '}{this.props.children}</a>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<CheckLink href="/checked.html">
|
||||
Click here!
|
||||
</CheckLink>,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
## Stateless Functions
|
||||
|
||||
If a component doesn't use local state or lifecycle hooks, you can define it as a function instead of a class:
|
||||
|
||||
```javascript
|
||||
function Greeting(props) {
|
||||
return <h1>Hello, {props.name}</h1>;
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<Greeting name="Sebastian" />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
Or using the new ES6 arrow syntax:
|
||||
|
||||
```javascript
|
||||
const Greeting = (props) => (
|
||||
<h1>Hello, {props.name}</h1>
|
||||
);
|
||||
|
||||
ReactDOM.render(
|
||||
<Greeting name="Sebastian" />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
This simplified component API is intended for components that are pure functions of their props. These components must not retain internal state, do not have backing instances, and do not have the component lifecycle methods. They are pure functional transforms of their input, with zero boilerplate.
|
||||
|
||||
However, you may still specify `.propTypes` and `.defaultProps` by setting them as properties on the function, just as you would set them on an ES6 class:
|
||||
|
||||
```javascript
|
||||
function Greeting(props) {
|
||||
return (
|
||||
<h1>Hello, {props.name}</h1>
|
||||
);
|
||||
}
|
||||
|
||||
Greeting.propTypes = {
|
||||
name: React.PropTypes.string
|
||||
};
|
||||
|
||||
Greeting.defaultProps = {
|
||||
name: 'John Doe'
|
||||
};
|
||||
|
||||
ReactDOM.render(
|
||||
<Greeting name="Mădălina"/>,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
>**Note:**
|
||||
>
|
||||
> Because stateless functions don't have a backing instance, you can't attach a ref to a stateless function component. Normally this isn't an issue, since stateless functions do not provide an imperative API. Without an imperative API, there isn't much you could do with an instance anyway. However, if a user wants to find the DOM node of a stateless function component, they must wrap the component in a stateful component (eg. ES6 class component) and attach the ref to the stateful wrapper component.
|
||||
|
||||
In an ideal world, many of your components would be stateless functions. In the future we plan to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations.
|
||||
|
||||
When you don't need local state or lifecycle hooks in a component, we recommend declaring it with a function. Otherwise, we recommend to use the ES6 class syntax.
|
||||
|
||||
## ES6 Classes and React.createClass()
|
||||
|
||||
Normally you would define a React component as a plain JavaScript class:
|
||||
|
||||
```javascript
|
||||
class Greeting extends React.Component {
|
||||
render() {
|
||||
return <h1>Hello, {this.props.name}</h1>;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
If you don't use ES6 yet, you may use [`React.createClass`](/react/docs/top-level-api.html#react.createclass) helper instead:
|
||||
|
||||
|
||||
```javascript
|
||||
var Greeting = React.createClass({
|
||||
render: function() {
|
||||
return <h1>Hello, {this.props.name}</h1>;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
The API of ES6 classes is similar to [`React.createClass`](/react/docs/top-level-api.html#react.createclass) with a few exceptions.
|
||||
|
||||
### Declaring Prop Types and Default Props
|
||||
|
||||
With functions and ES6 classes, `propTypes` and `defaultProps` are defined as properties on the components themselves:
|
||||
|
||||
```javascript
|
||||
class Greeting extends React.Component {
|
||||
// ...
|
||||
}
|
||||
|
||||
Greeting.propTypes = {
|
||||
name: React.PropTypes.string
|
||||
};
|
||||
|
||||
Greeting.defaultProps = {
|
||||
name: 'Mary'
|
||||
};
|
||||
```
|
||||
|
||||
With `React.createClass()`, you need to define `propTypes` as a property on the passed object, and `getDefaultProps()` as a function on it:
|
||||
|
||||
```javascript
|
||||
var Greeting = React.createClass({
|
||||
propTypes: {
|
||||
name: React.PropTypes.string
|
||||
},
|
||||
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
name: 'Mary'
|
||||
};
|
||||
},
|
||||
|
||||
// ...
|
||||
|
||||
});
|
||||
```
|
||||
|
||||
### Setting the Initial State
|
||||
|
||||
In ES6 classes, you can define the initial state by assigning `this.state` in the constructor:
|
||||
|
||||
```javascript
|
||||
class Counter extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {count: props.initialCount};
|
||||
}
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
With `React.createClass()`, you have to provide a separate `getInitialState` method that returns the initial state:
|
||||
|
||||
```javascript
|
||||
var Counter = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {count: this.props.initialCount};
|
||||
},
|
||||
// ...
|
||||
});
|
||||
```
|
||||
|
||||
### Autobinding
|
||||
|
||||
In React components declared as ES6 classes, methods follow the same semantics as regular ES6 classes. This means that they don't automatically bind `this` to the instance. You'll have to explicitly use `.bind(this)` in the constructor:
|
||||
|
||||
```javascript
|
||||
class SayHello extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
// This line is important!
|
||||
this.handleClick = this.handleClick.bind(this);
|
||||
}
|
||||
|
||||
handleClick() {
|
||||
alert('Hello!');
|
||||
}
|
||||
|
||||
render() {
|
||||
// Because `this.handleClick` is bound, we can use it as an event handler.
|
||||
return (
|
||||
<button onClick={this.handleClick}>
|
||||
Say hello
|
||||
</button>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
With `React.createClass()`, this is not necessary because it binds all methods:
|
||||
|
||||
```javascript
|
||||
var SayHello = React.createClass({
|
||||
handleClick: function() {
|
||||
alert('Hello!');
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<button onClick={this.handleClick}>
|
||||
Say hello
|
||||
</button>
|
||||
);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
This means writing ES6 classes comes with a little more boilerplate code for event handlers, but the upside is slightly better performance in large applications.
|
||||
|
||||
If the boilerplate code is too unattractive to you, you may enable the **experimental** [Class Properties](https://babeljs.io/docs/plugins/transform-class-properties/) syntax proposal with Babel:
|
||||
|
||||
|
||||
```javascript
|
||||
class SayHello extends React.Component {
|
||||
// WARNING: this syntax is experimental!
|
||||
// Using an arrow here binds the method:
|
||||
handleClick = () => {
|
||||
alert('Hello!');
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<button onClick={this.handleClick}>
|
||||
Say hello
|
||||
</button>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Please note that the syntax above is **experimental** and the syntax may change, or the proposal might not make it into the language.
|
||||
|
||||
If you'd rather play it safe, you have a few options:
|
||||
|
||||
* Bind methods in the constructor.
|
||||
* Use arrow functions, e.g. `onClick={(e) => this.handleClick(e)})`.
|
||||
* Keep using `React.createClass()`.
|
||||
|
||||
### Mixins
|
||||
|
||||
>**Note:**
|
||||
>
|
||||
>ES6 launched without any mixin support. Therefore, there is no support for mixins when you use React with ES6 classes.
|
||||
>
|
||||
>**We also found numerous issues in codebases using mixins, [and don't recommend using them in the new code](/react/blog/2016/07/13/mixins-considered-harmful.html).**
|
||||
>
|
||||
>This section exists only for the reference.
|
||||
|
||||
Sometimes very different components may share some common functionality. These are sometimes called [cross-cutting concerns](https://en.wikipedia.org/wiki/Cross-cutting_concern). [`React.createClass`](/react/docs/top-level-api.html#react.createclass) lets you use a legacy `mixins` system for that.
|
||||
|
||||
One common use case is a component wanting to update itself on a time interval. It's easy to use `setInterval()`, but it's important to cancel your interval when you don't need it anymore to save memory. React provides [lifecycle methods](/react/docs/working-with-the-browser.html#component-lifecycle) that let you know when a component is about to be created or destroyed. Let's create a simple mixin that uses these methods to provide an easy `setInterval()` function that will automatically get cleaned up when your component is destroyed.
|
||||
|
||||
```javascript
|
||||
var SetIntervalMixin = {
|
||||
componentWillMount: function() {
|
||||
this.intervals = [];
|
||||
},
|
||||
setInterval: function() {
|
||||
this.intervals.push(setInterval.apply(null, arguments));
|
||||
},
|
||||
componentWillUnmount: function() {
|
||||
this.intervals.forEach(clearInterval);
|
||||
}
|
||||
};
|
||||
|
||||
var TickTock = React.createClass({
|
||||
mixins: [SetIntervalMixin], // Use the mixin
|
||||
getInitialState: function() {
|
||||
return {seconds: 0};
|
||||
},
|
||||
componentDidMount: function() {
|
||||
this.setInterval(this.tick, 1000); // Call a method on the mixin
|
||||
},
|
||||
tick: function() {
|
||||
this.setState({seconds: this.state.seconds + 1});
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<p>
|
||||
React has been running for {this.state.seconds} seconds.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<TickTock />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
If a component is using multiple mixins and several mixins define the same lifecycle method (i.e. several mixins want to do some cleanup when the component is destroyed), all of the lifecycle methods are guaranteed to be called. Methods defined on mixins run in the order mixins were listed, followed by a method call on the component.
|
||||
@@ -1,285 +0,0 @@
|
||||
---
|
||||
id: reusable-components-zh-CN
|
||||
title: 可复用组件
|
||||
permalink: docs/reusable-components-zh-CN.html
|
||||
prev: multiple-components-zh-CN.html
|
||||
next: transferring-props-zh-CN.html
|
||||
---
|
||||
|
||||
设计接口的时候，把通用的设计元素（按钮，表单框，布局组件等）拆成接口良好定义的可复用的组件。这样，下次开发相同界面程序时就可以写更少的代码，也意义着更高的开发效率，更少的 Bug 和更少的程序体积。
|
||||
|
||||
## Prop 验证
|
||||
|
||||
随着应用不断变大，保证组件被正确使用变得非常有用。为此我们引入 `propTypes`。`React.PropTypes` 提供很多验证器 (validator) 来验证传入数据的有效性。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。注意为了性能考虑，只在开发环境验证 `propTypes`。下面用例子来说明不同验证器的区别：
|
||||
|
||||
```javascript
|
||||
React.createClass({
|
||||
propTypes: {
|
||||
// 可以声明 prop 为指定的 JS 基本类型。默认
|
||||
// 情况下，这些 prop 都是可传可不传的。
|
||||
optionalArray: React.PropTypes.array,
|
||||
optionalBool: React.PropTypes.bool,
|
||||
optionalFunc: React.PropTypes.func,
|
||||
optionalNumber: React.PropTypes.number,
|
||||
optionalObject: React.PropTypes.object,
|
||||
optionalString: React.PropTypes.string,
|
||||
optionalSymbol: React.PropTypes.symbol,
|
||||
|
||||
// 所有可以被渲染的对象：数字，
|
||||
// 字符串，DOM 元素或包含这些类型的数组(or fragment) 。
|
||||
optionalNode: React.PropTypes.node,
|
||||
|
||||
// React 元素
|
||||
optionalElement: React.PropTypes.element,
|
||||
|
||||
// 你同样可以断言一个 prop 是一个类的实例。
|
||||
// 用 JS 的 instanceof 操作符声明 prop 为类的实例。
|
||||
optionalMessage: React.PropTypes.instanceOf(Message),
|
||||
|
||||
// 你可以用 enum 的方式
|
||||
// 确保你的 prop 被限定为指定值。
|
||||
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
|
||||
|
||||
// 指定的多个对象类型中的一个
|
||||
optionalUnion: React.PropTypes.oneOfType([
|
||||
React.PropTypes.string,
|
||||
React.PropTypes.number,
|
||||
React.PropTypes.instanceOf(Message)
|
||||
]),
|
||||
|
||||
// 指定类型组成的数组
|
||||
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
|
||||
|
||||
// 指定类型的属性构成的对象
|
||||
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
|
||||
|
||||
// 特定形状参数的对象
|
||||
optionalObjectWithShape: React.PropTypes.shape({
|
||||
color: React.PropTypes.string,
|
||||
fontSize: React.PropTypes.number
|
||||
}),
|
||||
|
||||
// 你可以在任意东西后面加上 `isRequired`
|
||||
// 来确保 如果 prop 没有提供 就会显示一个警告。
|
||||
requiredFunc: React.PropTypes.func.isRequired,
|
||||
|
||||
// 不可空的任意类型
|
||||
requiredAny: React.PropTypes.any.isRequired,
|
||||
|
||||
// 你可以自定义一个验证器。如果验证失败需要返回一个 Error 对象。
|
||||
// 不要直接使用 `console.warn` 或抛异常，
|
||||
// 因为这在 `oneOfType` 里不起作用。
|
||||
customProp: function(props, propName, componentName) {
|
||||
if (!/matchme/.test(props[propName])) {
|
||||
return new Error('Validation failed!');
|
||||
}
|
||||
}
|
||||
},
|
||||
/* ... */
|
||||
});
|
||||
```
|
||||
|
||||
### Single Child
|
||||
|
||||
用 `React.PropTypes.element` 你可以指定仅有一个子级能被传送给组件
|
||||
|
||||
```javascript
|
||||
var MyComponent = React.createClass({
|
||||
propTypes: {
|
||||
children: React.PropTypes.element.isRequired
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<div>
|
||||
{this.props.children} // 这里必须是一个元素否则就会警告
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
});
|
||||
```
|
||||
|
||||
## 默认 Prop 值
|
||||
|
||||
React 支持以声明式的方式来定义 `props` 的默认值。
|
||||
|
||||
```javascript
|
||||
var ComponentWithDefaultProps = React.createClass({
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
value: 'default value'
|
||||
};
|
||||
}
|
||||
/* ... */
|
||||
});
|
||||
```
|
||||
|
||||
当父级没有传入 props 时，`getDefaultProps()` 可以保证 `this.props.value` 有默认值，注意 `getDefaultProps` 的结果会被 *缓存*。得益于此，你可以直接使用 props，而不必写手动编写一些重复或无意义的代码。
|
||||
|
||||
## 传递 Props：捷径
|
||||
|
||||
有一些常用的 React 组件只是对 HTML 做简单扩展。通常，你想复制任何传进你的组件的HTML属性到底层的HTML元素上。为了减少输入，你可以用 JSX _spread_ 语法来完成：
|
||||
|
||||
```javascript
|
||||
var CheckLink = React.createClass({
|
||||
render: function() {
|
||||
// 这样会把 CheckList 所有的 props 复制到 <a>
|
||||
return <a {...this.props}>{'√ '}{this.props.children}</a>;
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<CheckLink href="/checked.html">
|
||||
Click here!
|
||||
</CheckLink>,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
## Mixins
|
||||
|
||||
组件是 React 里复用代码的最佳方式，但是有时一些不同的组件间也需要共用一些功能。有时会被称为 [跨切面关注点](https://en.wikipedia.org/wiki/Cross-cutting_concern)。React 使用 `mixins` 来解决这类问题。
|
||||
|
||||
一个通用的场景是：一个组件需要定期更新。用 `setInterval()` 做很容易，但当不需要它的时候取消定时器来节省内存是非常重要的。React 提供 [生命周期方法](/react/docs/working-with-the-browser.html#component-lifecycle) 来告知你组件创建或销毁的时间。下面来做一个简单的 mixin，使用 `setInterval()` 并保证在组件销毁时清理定时器。
|
||||
|
||||
```javascript
|
||||
var SetIntervalMixin = {
|
||||
componentWillMount: function() {
|
||||
this.intervals = [];
|
||||
},
|
||||
setInterval: function() {
|
||||
this.intervals.push(setInterval.apply(null, arguments));
|
||||
},
|
||||
componentWillUnmount: function() {
|
||||
this.intervals.forEach(clearInterval);
|
||||
}
|
||||
};
|
||||
|
||||
var TickTock = React.createClass({
|
||||
mixins: [SetIntervalMixin], // 引用 mixin
|
||||
getInitialState: function() {
|
||||
return {seconds: 0};
|
||||
},
|
||||
componentDidMount: function() {
|
||||
this.setInterval(this.tick, 1000); // 调用 mixin 的方法
|
||||
},
|
||||
tick: function() {
|
||||
this.setState({seconds: this.state.seconds + 1});
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<p>
|
||||
React has been running for {this.state.seconds} seconds.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<TickTock />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
关于 mixin 值得一提的优点是，如果一个组件使用了多个 mixin，并用有多个 mixin 定义了同样的生命周期方法（如：多个 mixin 都需要在组件销毁时做资源清理操作），所有这些生命周期方法都保证会被执行到。方法执行顺序是：首先按 mixin 引入顺序执行 mixin 里方法，最后执行组件内定义的方法。
|
||||
|
||||
## ES6 Classes
|
||||
|
||||
你也可以以一个简单的 JavaScript 类来定义你的React classes。使用ES6 class的例子:
|
||||
|
||||
```javascript
|
||||
class HelloMessage extends React.Component {
|
||||
render() {
|
||||
return <div>Hello {this.props.name}</div>;
|
||||
}
|
||||
}
|
||||
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
|
||||
```
|
||||
|
||||
API近似于 `React.createClass` 除了 `getInitialState`。 你应该在构造函数里设置你的`state`，而不是提供一个单独的 `getInitialState` 方法。就像 `getInitialState` 的返回值，你赋给 `this.state` 的值会被作为组件的初始 state。
|
||||
|
||||
另一个不同是 `propTypes` 和 `defaultProps` 是在构造函数里被定义为属性，而不是在 class body 里。
|
||||
|
||||
```javascript
|
||||
export class Counter extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {count: props.initialCount};
|
||||
}
|
||||
tick() {
|
||||
this.setState({count: this.state.count + 1});
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div onClick={this.tick.bind(this)}>
|
||||
Clicks: {this.state.count}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Counter.propTypes = { initialCount: React.PropTypes.number };
|
||||
Counter.defaultProps = { initialCount: 0 };
|
||||
```
|
||||
|
||||
### 无自动绑定
|
||||
|
||||
方法遵循正式的ES6 class的语义，意味着它们不会自动绑定`this`到实例上。你必须显示的使用`.bind(this)` or [箭头函数](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions) `=>`：
|
||||
|
||||
```javascript
|
||||
// 你可以使用 bind() 来绑定 `this`
|
||||
<div onClick={this.tick.bind(this)}>
|
||||
|
||||
// 或者你可以使用箭头函数
|
||||
<div onClick={() => this.tick()}>
|
||||
```
|
||||
|
||||
我们建议你在构造函数中绑定事件处理器，这样对于所有实例它们只需绑定一次：
|
||||
|
||||
```javascript
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {count: props.initialCount};
|
||||
this.tick = this.tick.bind(this);
|
||||
}
|
||||
```
|
||||
|
||||
现在你可以直接使用 `this.tick` 因为它已经在构造函数里绑定过一次了。
|
||||
|
||||
```javascript
|
||||
// 它已经在构造函数里绑定过了
|
||||
<div onClick={this.tick}>
|
||||
```
|
||||
|
||||
这对应用的性能有帮助，特别是当你用 [浅层比较](/react/docs/shallow-compare.html) 实现 [shouldComponentUpdate()](/react/docs/component-specs.html#updating-shouldcomponentupdate) 时。
|
||||
|
||||
### 没有 Mixins
|
||||
|
||||
不幸的是ES6的发布没有任何mixin的支持。因此，当你在ES6 classes下使用React时不支持mixins。作为替代，我们正在努力使它更容易不依靠mixins支持这些用例。
|
||||
|
||||
## 无状态函数
|
||||
|
||||
你也可以用 JavaScript 函数来定义你的 React 类。例如使用无状态函数语法：
|
||||
|
||||
```javascript
|
||||
function HelloMessage(props) {
|
||||
return <div>Hello {props.name}</div>;
|
||||
}
|
||||
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
|
||||
```
|
||||
|
||||
或者使用新的ES6箭头函数:
|
||||
|
||||
```javascript
|
||||
const HelloMessage = (props) => <div>Hello {props.name}</div>;
|
||||
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
|
||||
```
|
||||
|
||||
这个简化的组件API旨在用于那些纯函数态的组件 。这些组件必须没有保持任何内部状态，没有备份实例，也没有组件生命周期方法。他们纯粹的函数式的转化他们的输入，没有引用。
|
||||
然而，你仍然可以以设置函数 properties 的方式来指定 `.propTypes` 和 `.defaultProps`，就像你在ES6类里设置他们那样。
|
||||
|
||||
> 注意：
|
||||
>
|
||||
> 因为无状态函数没有备份实例，你不能附加一个引用到一个无状态函数组件。 通常这不是问题，因为无状态函数不提供一个命令式的API。没有命令式的API，你就没有任何需要实例来做的事。然而，如果用户想查找无状态函数组件的DOM节点，他们必须把这个组件包装在一个有状态组件里（比如，ES6 类组件） 并且连接一个引用到有状态的包装组件。
|
||||
|
||||
在理想世界里，你的大多数组件都应该是无状态函数，因为将来我们可能会用避免不必要的检查和内存分配的方式来对这些组件进行优化。 如果可能，这是推荐的模式。
|
||||
@@ -1,153 +0,0 @@
|
||||
---
|
||||
id: transferring-props-it-IT
|
||||
title: Trasferimento delle Proprietà
|
||||
permalink: docs/transferring-props-it-IT.html
|
||||
prev: reusable-components-it-IT.html
|
||||
next: forms-it-IT.html
|
||||
---
|
||||
|
||||
Un pattern comune in React è l'uso di un'astrazione per esporre un componente. Il componente esterno espone una semplice proprietà per effettuare un'azione che può richiedere un'implementazione più complessa.
|
||||
|
||||
Puoi usare gli [attributi spread di JSX](/react/docs/jsx-spread.html) per unire le vecchie props con valori aggiuntivi:
|
||||
|
||||
```javascript
|
||||
<Component {...this.props} more="values" />
|
||||
```
|
||||
|
||||
Se non usi JSX, puoi usare qualsiasi helper come l'API `Object.assign` di ES6, o il metodo `_.extend` di Underscore:
|
||||
|
||||
```javascript
|
||||
React.createElement(Component, Object.assign({}, this.props, { more: 'values' }));
|
||||
```
|
||||
|
||||
Nel resto di questo tutorial vengono illustrate le best practices, usando JSX e sintassi sperimentale di ES7.
|
||||
|
||||
## Trasferimento Manuale
|
||||
|
||||
Nella maggior parte dei casi dovresti esplicitamente passare le proprietà. Ciò assicura che venga esposto soltanto un sottoinsieme dell'API interna, del cui funzionamento si è certi.
|
||||
|
||||
```javascript
|
||||
function FancyCheckbox(props) {
|
||||
var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
|
||||
return (
|
||||
<div className={fancyClass} onClick={props.onClick}>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
ReactDOM.render(
|
||||
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
|
||||
Ciao mondo!
|
||||
</FancyCheckbox>,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
E se aggiungessimo una proprietà `name`? O una proprietà `title`? O `onMouseOver`?
|
||||
|
||||
## Trasferire con `...` in JSX
|
||||
|
||||
> NOTA:
|
||||
>
|
||||
> La sintassi `...` fa parte della proposta Object Rest Spread. Questa proposta è in processo di diventare uno standard. Consulta la sezione [Proprietà Rest e Spread ...](/react/docs/transferring-props.html#rest-and-spread-properties-...) di seguito per maggiori dettagli.
|
||||
|
||||
A volte passare manualmente ciascuna proprietà può essere noioso e fragile. In quei casi puoi usare l'[assegnamento destrutturante](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) con le proprietà residue per estrarre un insieme di proprietà sconosciute.
|
||||
|
||||
Elenca tutte le proprietà che desideri consumare, seguite da `...other`.
|
||||
|
||||
```javascript
|
||||
var { checked, ...other } = props;
|
||||
```
|
||||
|
||||
Ciò assicura che vengano passate tutte le proprietà TRANNE quelle che stai consumando tu stesso.
|
||||
|
||||
```javascript
|
||||
function FancyCheckbox(props) {
|
||||
var { checked, ...other } = props;
|
||||
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
|
||||
// `other` contiene { onClick: console.log } ma non la proprietà checked
|
||||
return (
|
||||
<div {...other} className={fancyClass} />
|
||||
);
|
||||
}
|
||||
ReactDOM.render(
|
||||
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
|
||||
Ciao mondo!
|
||||
</FancyCheckbox>,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
> NOTA:
|
||||
>
|
||||
> Nell'esempio precedente, la proprietà `checked` è anche un attributo DOM valido. Se non utilizzassi la destrutturazione in questo modo, potresti inavvertitamente assegnarlo al `div`.
|
||||
|
||||
Usa sempre il pattern di destrutturazione quando trasferisci altre proprietà sconosciute in `other`.
|
||||
|
||||
```javascript
|
||||
function FancyCheckbox(props) {
|
||||
var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
|
||||
// ANTI-PATTERN: `checked` sarebbe passato al componente interno
|
||||
return (
|
||||
<div {...props} className={fancyClass} />
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Consumare e Trasferire la Stessa Proprietà
|
||||
|
||||
Se il tuo componente desidera consumare una proprietà, ma anche passarla ad altri, puoi passarla esplicitamente mediante `checked={checked}`. Questo è preferibile a passare l'intero oggetto `this.props` dal momento che è più facile effettuarne il linting e il refactoring.
|
||||
|
||||
```javascript
|
||||
function FancyCheckbox(props) {
|
||||
var { checked, title, ...other } = props;
|
||||
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
|
||||
var fancyTitle = checked ? 'X ' + title : 'O ' + title;
|
||||
return (
|
||||
<label>
|
||||
<input {...other}
|
||||
checked={checked}
|
||||
className={fancyClass}
|
||||
type="checkbox"
|
||||
/>
|
||||
{fancyTitle}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
> NOTA:
|
||||
>
|
||||
> L'ordine è importante. Mettendo il `{...other}` prima delle tue proprietà JSX ti assicuri che il consumatore del tuo componente non possa ridefinirle. Nell'esempio precedente, abbiamo garantito che l'elemento input sarà del tipo `"checkbox"`.
|
||||
|
||||
## Proprietà Rest e Spread `...`
|
||||
|
||||
Le proprietà Rest ti permettono di estrarre le proprietà residue di un oggetto in un nuovo oggetto. Vengono escluse tutte le altre proprietà elencate nel pattern di destrutturazione.
|
||||
|
||||
Questa è un'implementazione sperimentale di una [proposta ES7](https://github.com/sebmarkbage/ecmascript-rest-spread).
|
||||
|
||||
```javascript
|
||||
var { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
|
||||
x; // 1
|
||||
y; // 2
|
||||
z; // { a: 3, b: 4 }
|
||||
```
|
||||
|
||||
> Nota:
|
||||
>
|
||||
> Questa proposta ha raggiunto lo stadio 2 ed è attivata in modo predefinito in Babel. Vecchie versioni di Babel potrebbero richiedere l'abilitazione esplicita di questa trasformazione con `babel --optional es7.objectRestSpread`
|
||||
|
||||
## Trasferire con Underscore
|
||||
|
||||
Se non usi JSX, puoi usare una libreria per ottenere il medesimo pattern. Underscore supporta `_.omit` per omettere delle proprietà ed `_.extend` per copiare le proprietà in un nuovo oggetto.
|
||||
|
||||
```javascript
|
||||
function FancyCheckbox(props) {
|
||||
var checked = props.checked;
|
||||
var other = _.omit(props, 'checked');
|
||||
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
|
||||
return (
|
||||
React.DOM.div(_.extend({}, other, { className: fancyClass }))
|
||||
);
|
||||
}
|
||||
```
|
||||
@@ -1,151 +0,0 @@
|
||||
---
|
||||
id: transferring-props
|
||||
title: propsの移譲
|
||||
permalink: docs/transferring-props-ja-JP.html
|
||||
prev: reusable-components-ja-JP.html
|
||||
next: forms-ja-JP.html
|
||||
|
||||
---
|
||||
|
||||
|
||||
コンポーネントを抽象的にラップすることはReactにおいて共通のパターンです。外のコンポーネントは単純なプロパティを表示し、中ではさらに複雑なインプリメンテーションの詳細を持つようになっています。
|
||||
|
||||
以下のように、古いpropsと追加の値を[JSXの拡張属性](/react/docs/jsx-spread-ja-JP.html)を使ってマージすることができます。
|
||||
|
||||
```javascript
|
||||
<Component {...this.props} more="values" />
|
||||
```
|
||||
|
||||
JSXを使わない場合は、以下のように、ES6の `Object.assign` か Underscore の `_.extend` といったオブジェクトヘルパーを使うことができます。
|
||||
|
||||
```javascript
|
||||
React.createElement(Component, Object.assign({}, this.props, { more: 'values' }));
|
||||
```
|
||||
|
||||
以下のチュートリアルはベストプラクティスを提示しています。JSXや試験的なES7のシンタックスを使っています。
|
||||
|
||||
## 手動での移動
|
||||
|
||||
ほとんどの場合、プロパティを明確に子要素に渡すべきです。それは、内部のAPIのサブセットだけを外に出していることと、認識しているプロパティが動作することを保証します。
|
||||
|
||||
```javascript
|
||||
function FancyCheckbox(props) {
|
||||
var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
|
||||
return (
|
||||
<div className={fancyClass} onClick={props.onClick}>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
ReactDOM.render(
|
||||
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
|
||||
Hello world!
|
||||
</FancyCheckbox>,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
しかし、 `name` プロパティや `title` プロパティや `onMouseOver` はどうでしょうか？
|
||||
|
||||
## JSXにおける `...` を使った移譲
|
||||
|
||||
> 注意:
|
||||
> 以下の例では、実験的なES7のシンタックスであることを示すために `--harmony ` フラグが必要になります。ブラウザ上でJSXトランスフォーマーを使う際には、単純に `<script type="text/jsx;harmony=true">` を使ってスクリプトを読み込んでください。詳細については、 [レストとスプレッドのプロパティ ...](/react/docs/transferring-props-ja-JP.html#レストとスプレッドのプロパティ-...)をご覧ください。
|
||||
|
||||
全てのプロパティを渡すのはバグを生みやすく、面倒くさいときがあります。そのようなケースでは、未知のプロパティのセットを使うためにレストプロパティと共に[分割代入引数](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)を使うことができます。
|
||||
|
||||
以下のように `...other` を使うことで、使いたいプロパティを一覧にすることができます。
|
||||
|
||||
```javascript
|
||||
var { checked, ...other } = props;
|
||||
```
|
||||
|
||||
これは、自分で指定したものは 除き 、全てのpropsを渡すことを保証します。
|
||||
|
||||
```javascript
|
||||
function FancyCheckbox(props) {
|
||||
var { checked, ...other } = props;
|
||||
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
|
||||
// `other` は { onClick: console.log } を含みますが、 checked プロパティは含みません。
|
||||
return (
|
||||
<div {...other} className={fancyClass} />
|
||||
);
|
||||
}
|
||||
ReactDOM.render(
|
||||
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
|
||||
Hello world!
|
||||
</FancyCheckbox>,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
> 注意:
|
||||
> 上の例では、 `checked` propは正式なDOMの属性でもあります。この方法を使って分割代入を行わない場合は、無意識的に渡すこともできます。
|
||||
|
||||
未知の `other` propsを移譲する際には、分割代入パターンを常に使ってください。
|
||||
|
||||
```javascript
|
||||
function FancyCheckbox(props) {
|
||||
var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
|
||||
// アンチパターン: `checked` が内部のコンポーネントに渡されます。
|
||||
return (
|
||||
<div {...props} className={fancyClass} />
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## 同じpropを使い、移譲する
|
||||
|
||||
コンポーネントがプロパティを使うだけでなく、子要素に渡したい場合は、明確に `checked={checked}` と記述することで再度渡すことができます。 `this.props` オブジェクトで全てを渡すほうが、リファクタリングやチェックをしやすいので好ましいです。
|
||||
|
||||
```javascript
|
||||
function FancyCheckbox(props) {
|
||||
var { checked, title, ...other } = props;
|
||||
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
|
||||
var fancyTitle = checked ? 'X ' + title : 'O ' + title;
|
||||
return (
|
||||
<label>
|
||||
<input {...other}
|
||||
checked={checked}
|
||||
className={fancyClass}
|
||||
type="checkbox"
|
||||
/>
|
||||
{fancyTitle}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
> 注意:
|
||||
> 順番の問題です。JSXのpropsの前に `{...other}` を置くことで、コンポーネントの使用者がオーバーライドできないことを保証します。上の例ではinputが `"checkbox"` 型であることを保証しました。
|
||||
|
||||
## レストとスプレッドのプロパティ `...`
|
||||
|
||||
レストプロパティはあるオブジェクトの残りの要素を新しいオブジェクトに引き抜きます。分割代入パターンでリストになっている全てのプロパティを外に出します。
|
||||
|
||||
これは、[ES7プロポーサル](https://github.com/sebmarkbage/ecmascript-rest-spread)の実験的な実行です。
|
||||
|
||||
```javascript
|
||||
var { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
|
||||
x; // 1
|
||||
y; // 2
|
||||
z; // { a: 3, b: 4 }
|
||||
```
|
||||
|
||||
> 注意:
|
||||
> 実験的なES7のシンタックスを有効にするには、 `--harmony` フラグを[JSXコマンドラインツール](https://www.npmjs.com/package/react-tools)で使用してください。
|
||||
|
||||
## Underscoreによる移譲
|
||||
|
||||
JSXを使わない際には、同じパターンを行うライブラリを使うことができます。Underscoreでは、 `_.omit` を使ってプロパティをフィルタしたり、 `_.extend` を使って新しいオブジェクトにプロパティをコピーしたりできます。
|
||||
|
||||
```javascript
|
||||
function FancyCheckbox(props) {
|
||||
var checked = props.checked;
|
||||
var other = _.omit(props, 'checked');
|
||||
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
|
||||
return (
|
||||
React.DOM.div(_.extend({}, other, { className: fancyClass }))
|
||||
);
|
||||
}
|
||||
```
|
||||
@@ -1,155 +0,0 @@
|
||||
---
|
||||
id: transferring-props-ko-KR
|
||||
title: Props 전달
|
||||
permalink: docs/transferring-props-ko-KR.html
|
||||
prev: reusable-components-ko-KR.html
|
||||
next: forms-ko-KR.html
|
||||
---
|
||||
|
||||
React에서는 컴포넌트를 감싸서 추상화하는 것이 일반적인 패턴입니다. 외부 컴포넌트에서는 간단한 프로퍼티만을 노출하여 복잡한 세부 구현을 감출 수 있습니다.
|
||||
|
||||
[JSX 스프레드 어트리뷰트](/react/docs/jsx-spread-ko-KR.html)를 통해 props에 추가적인 값을 병합할 수 있습니다.
|
||||
|
||||
```javascript
|
||||
<Component {...this.props} more="values" />
|
||||
```
|
||||
|
||||
만약 JSX를 사용하지 않는다면 ES6의 `Object.assign`나 Underscore의 `_.extend` 같은 객체 헬퍼를 사용할 수 있습니다:
|
||||
|
||||
```javascript
|
||||
React.createElement(Component, Object.assign({}, this.props, { more: 'values' }));
|
||||
```
|
||||
|
||||
이 튜토리얼의 나머지 부분은 모범 답안을 소개할 것입니다. JSX와 실험적인 ES7 구문을 사용합니다.
|
||||
|
||||
## 수동적인 전달
|
||||
|
||||
대부분의 경우 명시적으로 프로퍼티를 아래로 전달해야 합니다. 이는 동작을 확신하는 내부 API의 일부만 공개하도록 합니다.
|
||||
|
||||
```javascript
|
||||
function FancyCheckbox(props) {
|
||||
var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
|
||||
return (
|
||||
<div className={fancyClass} onClick={props.onClick}>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
ReactDOM.render(
|
||||
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
|
||||
세상아 안녕!
|
||||
</FancyCheckbox>,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
하지만 `name`이나 `title`, `onMouseOver` 같은 prop들이 더 추가된다면 어떨까요?
|
||||
|
||||
## JSX에서 `...`를 사용해 전달하기
|
||||
|
||||
> 주의:
|
||||
>
|
||||
> `...` 구문은 객체 잔여 스프레드 제안의 일부입니다. 이 제안은 표준화 과정에 있습니다. 더 자세한 내용은 밑의 [잔여 프로퍼티와 스프레드 프로퍼티 ...](/react/docs/transferring-props.html#rest-and-spread-properties-...) 부분을 참고하세요.
|
||||
|
||||
|
||||
때로는 모든 프로퍼티를 일일이 전달 하는것은 지루하고 덧없는 작업입니다. 이 경우 [구조 해체 할당(destructuring assignment)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)을 다른 프로퍼티를 함께 사용해 미상의 프로퍼티를 추출할 수 있습니다.
|
||||
|
||||
소비할 프로퍼티들을 나열하고, 그 뒤에 `...other`를 넣습니다.
|
||||
|
||||
```javascript
|
||||
var { checked, ...other } = props;
|
||||
```
|
||||
|
||||
이는 지금 소비한 props를 *제외한* 나머지를 아래로 전달합니다.
|
||||
|
||||
```javascript
|
||||
function FancyCheckbox(props) {
|
||||
var { checked, ...other } = props;
|
||||
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
|
||||
// `other`에는 { onClick: console.log }가 포함되지만 checked 프로퍼티는 제외됩니다
|
||||
return (
|
||||
<div {...other} className={fancyClass} />
|
||||
);
|
||||
}
|
||||
ReactDOM.render(
|
||||
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
|
||||
세상아 안녕!
|
||||
</FancyCheckbox>,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
> 주의:
|
||||
>
|
||||
> 위의 예제에서는 `checked` prop 또한 마찬가지로 유효한 DOM 어트리뷰트입니다. 이런 식으로 구조의 해체(destructuring)를 하지 않으면 의도하지 않게 함께 전달될 수 있습니다.
|
||||
|
||||
미상의 `other` props을 전달할 때는 항상 구조 해체 패턴을 사용하세요.
|
||||
|
||||
```javascript
|
||||
function FancyCheckbox(props) {
|
||||
var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
|
||||
// 반례: `checked` 또한 내부 컴포넌트로 전달될 것입니다
|
||||
return (
|
||||
<div {...props} className={fancyClass} />
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## 같은 Prop을 소비하고 전달하기
|
||||
|
||||
컴포넌트가 프로퍼티를 사용하지만 계속 넘기길 원한다면, `checked={checked}`처럼 명시적으로 다시 넘길 수 있습니다. 리팩토링과 린트(lint)하기가 더 쉬우므로 이 방식이 `this.props` 객체 전부를 넘기는 것보다 낫습니다.
|
||||
|
||||
```javascript
|
||||
function FancyCheckbox(props) {
|
||||
var { checked, title, ...other } = props;
|
||||
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
|
||||
var fancyTitle = checked ? 'X ' + title : 'O ' + title;
|
||||
return (
|
||||
<label>
|
||||
<input {...other}
|
||||
checked={checked}
|
||||
className={fancyClass}
|
||||
type="checkbox"
|
||||
/>
|
||||
{fancyTitle}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
> 주의:
|
||||
>
|
||||
> 순서는 중요합니다. `{...other}`를 JSX props 이전에 넣는 것으로 컴포넌트의 사용자가 확실히 그것들을 오버라이드 할 수 없게 합니다. 위의 예제에서는 input이 `"checkbox"` 타입인 것을 보장합니다.
|
||||
|
||||
<a name="rest-and-spread-properties-..."></a>
|
||||
## 잔여 프로퍼티와 스프레드 프로퍼티 `...`
|
||||
|
||||
잔여(Rest, `...`) 프로퍼티는 객체에서 소비되지 않은 나머지 프로퍼티를 추출해 새로운 객체로 만들 수 있게 해 줍니다. 구조 해체 패턴에서 열거된 다른 프로퍼티들은 모두 제외됩니다.
|
||||
|
||||
이 제안은 2 단계에 돌입해 이제 바벨에서 기본값으로 활성화되어있습니다. 바벨의 이전 버전은 `babel --optional es7.objectRestSpread`로 명시적으로 활성화 할 필요가 있을 수도 있습니다.
|
||||
|
||||
```javascript
|
||||
var { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
|
||||
x; // 1
|
||||
y; // 2
|
||||
z; // { a: 3, b: 4 }
|
||||
```
|
||||
|
||||
> 주의:
|
||||
>
|
||||
> 실험적인 ES7 구문을 활성화하려면 [JSX 커맨드라인 도구](https://www.npmjs.com/package/react-tools)를 `--harmony` 플래그와 함께 사용하세요.
|
||||
|
||||
## Underscore로 전달 다루기
|
||||
|
||||
JSX를 사용하지 않는다면 라이브러리를 사용해 같은 패턴을 쓸 수 있습니다. Underscore에서는 `_.omit`을 사용해 특정 프로퍼티를 제외하거나 `_.extend`를 사용해 새로운 객체로 프로퍼티를 복사할 수 있습니다.
|
||||
|
||||
```javascript
|
||||
function FancyCheckbox(props) {
|
||||
var checked = props.checked;
|
||||
var other = _.omit(props, 'checked');
|
||||
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
|
||||
return (
|
||||
React.DOM.div(_.extend({}, other, { className: fancyClass }))
|
||||
);
|
||||
}
|
||||
```
|
||||
@@ -1,153 +0,0 @@
|
||||
---
|
||||
id: transferring-props
|
||||
title: Transferring Props
|
||||
permalink: docs/transferring-props.html
|
||||
prev: reusable-components.html
|
||||
next: forms.html
|
||||
---
|
||||
|
||||
It's a common pattern in React to wrap a component in an abstraction. The outer component exposes a simple property to do something that might have more complex implementation details.
|
||||
|
||||
You can use [JSX spread attributes](/react/docs/jsx-spread.html) to merge the old props with additional values:
|
||||
|
||||
```javascript
|
||||
<Component {...this.props} more="values" />
|
||||
```
|
||||
|
||||
If you don't use JSX, you can use any object helper such as ES6 `Object.assign` or Underscore `_.extend`:
|
||||
|
||||
```javascript
|
||||
React.createElement(Component, Object.assign({}, this.props, { more: 'values' }));
|
||||
```
|
||||
|
||||
The rest of this tutorial explains best practices. It uses JSX and experimental ECMAScript syntax.
|
||||
|
||||
## Manual Transfer
|
||||
|
||||
Most of the time you should explicitly pass the properties down. This ensures that you only expose a subset of the inner API, one that you know will work.
|
||||
|
||||
```javascript
|
||||
function FancyCheckbox(props) {
|
||||
var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
|
||||
return (
|
||||
<div className={fancyClass} onClick={props.onClick}>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
ReactDOM.render(
|
||||
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
|
||||
Hello world!
|
||||
</FancyCheckbox>,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
But what about the `name` prop? Or the `title` prop? Or `onMouseOver`?
|
||||
|
||||
## Transferring with `...` in JSX
|
||||
|
||||
> NOTE:
|
||||
>
|
||||
> The `...` syntax is part of the Object Rest Spread proposal. This proposal is on track to become a standard. See the [Rest and Spread Properties ...](/react/docs/transferring-props.html#rest-and-spread-properties-...) section below for more details.
|
||||
|
||||
Sometimes it's fragile and tedious to pass every property along. In that case you can use [destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) with rest properties to extract a set of unknown properties.
|
||||
|
||||
List out all the properties that you would like to consume, followed by `...other`.
|
||||
|
||||
```javascript
|
||||
var { checked, ...other } = props;
|
||||
```
|
||||
|
||||
This ensures that you pass down all the props EXCEPT the ones you're consuming yourself.
|
||||
|
||||
```javascript
|
||||
function FancyCheckbox(props) {
|
||||
var { checked, ...other } = props;
|
||||
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
|
||||
// `other` contains { onClick: console.log } but not the checked property
|
||||
return (
|
||||
<div {...other} className={fancyClass} />
|
||||
);
|
||||
}
|
||||
ReactDOM.render(
|
||||
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
|
||||
Hello world!
|
||||
</FancyCheckbox>,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
> NOTE:
|
||||
>
|
||||
> In the example above, the `checked` prop is also a valid DOM attribute. If you didn't use destructuring in this way you might inadvertently pass it along.
|
||||
|
||||
Always use the destructuring pattern when transferring unknown `other` props.
|
||||
|
||||
```javascript
|
||||
function FancyCheckbox(props) {
|
||||
var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
|
||||
// ANTI-PATTERN: `checked` would be passed down to the inner component
|
||||
return (
|
||||
<div {...props} className={fancyClass} />
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Consuming and Transferring the Same Prop
|
||||
|
||||
If your component wants to consume a property but also wants to pass it along, you can repass it explicitly with `checked={checked}`. This is preferable to passing the full `props` object since it's easier to refactor and lint.
|
||||
|
||||
```javascript
|
||||
function FancyCheckbox(props) {
|
||||
var { checked, title, ...other } = props;
|
||||
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
|
||||
var fancyTitle = checked ? 'X ' + title : 'O ' + title;
|
||||
return (
|
||||
<label>
|
||||
<input {...other}
|
||||
checked={checked}
|
||||
className={fancyClass}
|
||||
type="checkbox"
|
||||
/>
|
||||
{fancyTitle}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
> NOTE:
|
||||
>
|
||||
> Order matters. By putting the `{...other}` before your JSX props you ensure that the consumer of your component can't override them. In the example above we have guaranteed that the input will be of type `"checkbox"`.
|
||||
|
||||
## Rest and Spread Properties `...`
|
||||
|
||||
Rest properties allow you to extract the remaining properties from an object into a new object. It excludes every other property listed in the destructuring pattern.
|
||||
|
||||
This is an experimental implementation of an [ECMAScript proposal](https://github.com/sebmarkbage/ecmascript-rest-spread).
|
||||
|
||||
```javascript
|
||||
var { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
|
||||
x; // 1
|
||||
y; // 2
|
||||
z; // { a: 3, b: 4 }
|
||||
```
|
||||
|
||||
> Note:
|
||||
>
|
||||
> To transform rest and spread properties using Babel 6, you need to install the [`es2015`](https://babeljs.io/docs/plugins/preset-es2015/) preset, the [`transform-object-rest-spread`](https://babeljs.io/docs/plugins/transform-object-rest-spread/) plugin and configure them in the `.babelrc` file.
|
||||
|
||||
## Transferring with Underscore
|
||||
|
||||
If you don't use JSX, you can use a library to achieve the same pattern. Underscore supports `_.omit` to filter out properties and `_.extend` to copy properties onto a new object.
|
||||
|
||||
```javascript
|
||||
function FancyCheckbox(props) {
|
||||
var checked = props.checked;
|
||||
var other = _.omit(props, 'checked');
|
||||
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
|
||||
return (
|
||||
React.DOM.div(_.extend({}, other, { className: fancyClass }))
|
||||
);
|
||||
}
|
||||
```
|
||||
@@ -1,153 +0,0 @@
|
||||
---
|
||||
id: transferring-props-zh-CN
|
||||
title: 传递 Props
|
||||
permalink: docs/transferring-props-zh-CN.html
|
||||
prev: reusable-components-zh-CN.html
|
||||
next: forms-zh-CN.html
|
||||
---
|
||||
|
||||
React 里有一个非常常用的模式就是对组件做一层抽象。组件对外公开一个简单的属性（Props）来实现功能，但内部的实现可能非常复杂。
|
||||
|
||||
可以使用 [JSX 展开属性](/react/docs/jsx-spread-zh-CN.html) 来合并现有的 props 和其它值：
|
||||
|
||||
```javascript
|
||||
<Component {...this.props} more="values" />
|
||||
```
|
||||
|
||||
如果不使用 JSX，可以使用一些对象辅助方法如 ES6 的 `Object.assign` 或 Underscore `_.extend`。
|
||||
|
||||
```javascript
|
||||
React.createElement(Component, Object.assign({}, this.props, { more: 'values' }));
|
||||
```
|
||||
|
||||
下面的教程介绍一些最佳实践。使用了 JSX 和 试验性的ECMAScript 语法。
|
||||
|
||||
## 手动传递
|
||||
|
||||
大部分情况下你应该显式地向下传递 props。这样可以确保只公开你认为是安全的内部 API 的子集。
|
||||
|
||||
```javascript
|
||||
function FancyCheckbox(props) {
|
||||
var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
|
||||
return (
|
||||
<div className={fancyClass} onClick={props.onClick}>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
ReactDOM.render(
|
||||
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
|
||||
Hello world!
|
||||
</FancyCheckbox>,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
但 `name` 这个属性怎么办？还有 `title`、`onMouseOver` 这些 props？
|
||||
|
||||
## 在 JSX 里使用 `...` 传递
|
||||
|
||||
> 注意:
|
||||
>
|
||||
> 在下面的例子中，`--harmony ` 标志是必须的因为这个语法是ES7的实验性语法。如果用浏览器中的JSX转换器，以 `<script type="text/jsx;harmony=true">`简单的打开你脚本就行了。详见[Rest and Spread Properties ...](/react/docs/transferring-props-zh-CN.html#剩余属性和展开属性-...)
|
||||
|
||||
有时把所有属性都传下去是不安全或啰嗦的。这时可以使用 [解构赋值](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) 中的剩余属性特性来把未知属性批量提取出来。
|
||||
|
||||
列出所有当前要使用的属性，后面跟着 `...other`。
|
||||
|
||||
```javascript
|
||||
var { checked, ...other } = props;
|
||||
```
|
||||
|
||||
这样能确保把所有 props 传下去，*除了* 那些已经被使用了的。
|
||||
|
||||
```javascript
|
||||
function FancyCheckbox(props) {
|
||||
var { checked, ...other } = props;
|
||||
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
|
||||
// `other` 包含 { onClick: console.log } 但 checked 属性除外
|
||||
return (
|
||||
<div {...other} className={fancyClass} />
|
||||
);
|
||||
}
|
||||
ReactDOM.render(
|
||||
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
|
||||
Hello world!
|
||||
</FancyCheckbox>,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
> 注意:
|
||||
>
|
||||
> 上面例子中，`checked` 属性也是一个有效的 DOM 属性。如果你没有使用解构赋值，那么可能无意中把它传下去。
|
||||
|
||||
在传递这些未知的 `other` 属性时，要经常使用解构赋值模式。
|
||||
|
||||
```javascript
|
||||
function FancyCheckbox(props) {
|
||||
var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
|
||||
// 反模式：`checked` 会被传到里面的组件里
|
||||
return (
|
||||
<div {...props} className={fancyClass} />
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## 使用和传递同一个 Prop
|
||||
|
||||
如果组件需要使用一个属性又要往下传递，可以直接使用 `checked={checked}` 再传一次。这样做比传整个 `props` 对象要好，因为更利于重构和语法检查。
|
||||
|
||||
```javascript
|
||||
function FancyCheckbox(props) {
|
||||
var { checked, title, ...other } = props;
|
||||
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
|
||||
var fancyTitle = checked ? 'X ' + title : 'O ' + title;
|
||||
return (
|
||||
<label>
|
||||
<input {...other}
|
||||
checked={checked}
|
||||
className={fancyClass}
|
||||
type="checkbox"
|
||||
/>
|
||||
{fancyTitle}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
> 注意:
|
||||
>
|
||||
> 顺序很重要，把 `{...other}` 放到 JSX props 前面会使 props 不会被覆盖。上面例子中我们可以保证 input 的 type 是 `"checkbox"`。
|
||||
|
||||
## 剩余属性和展开属性 `...`
|
||||
|
||||
剩余属性可以把对象剩下的属性提取到一个新的对象。这会把所有在解构赋值中列出的属性剔除。
|
||||
|
||||
这是 [ECMAScript 草案](https://github.com/sebmarkbage/ecmascript-rest-spread) 中的试验特性。
|
||||
|
||||
```javascript
|
||||
var { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
|
||||
x; // 1
|
||||
y; // 2
|
||||
z; // { a: 3, b: 4 }
|
||||
```
|
||||
|
||||
> 注意:
|
||||
>
|
||||
> 要用 Babel 6转换 rest 和 spread 属性，你需要安装 [`es2015`](https://babeljs.io/docs/plugins/preset-es2015/) preset，[`transform-object-rest-spread`](https://babeljs.io/docs/plugins/transform-object-rest-spread/) 插件并在 `.babelrc` 里配置他们.
|
||||
|
||||
## 使用 Underscore 来传递
|
||||
|
||||
如果不使用 JSX，可以使用一些库来实现相同效果。Underscore 提供 `_.omit` 来过滤属性，`_.extend` 复制属性到新的对象。
|
||||
|
||||
```javascript
|
||||
function FancyCheckbox(props) {
|
||||
var checked = props.checked;
|
||||
var other = _.omit(props, 'checked');
|
||||
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
|
||||
return (
|
||||
React.DOM.div(_.extend({}, other, { className: fancyClass }))
|
||||
);
|
||||
}
|
||||
```
|
||||
@@ -1,165 +0,0 @@
|
||||
---
|
||||
id: forms-it-IT
|
||||
title: Moduli
|
||||
permalink: docs/forms-it-IT.html
|
||||
prev: transferring-props-it-IT.html
|
||||
next: working-with-the-browser-it-IT.html
|
||||
---
|
||||
|
||||
I componenti dei moduli come `<input>`, `<textarea>` e `<option>` differiscono dagli altri componenti nativi poiché possono essere alterati tramite interazione dell'utente. Questi componenti forniscono interfacce che rendono più semplice gestire i moduli in risposta all'interazione dell'utente.
|
||||
|
||||
Per maggiori informazioni sugli eventi dell'elemento `<form>` consulta [Eventi dei Moduli](/react/docs/events.html#form-events).
|
||||
|
||||
## Proprietà Interattive
|
||||
|
||||
I componenti dei moduli supportano un numero di proprietà che vengono modificate dall'interazione dell'utente:
|
||||
|
||||
* `value`, supportato dai elementi `<input>` e `<textarea>`.
|
||||
* `checked`, supportato dagli elementi `<input>` dal tipo `checkbox` o `radio`.
|
||||
* `selected`, supportato dagli elementi `<option>`.
|
||||
|
||||
In HTML, in valore di `<textarea>` è impostato tramite un nodo di testo figlio. In React, devi invece usare la proprietà `value`.
|
||||
|
||||
I componenti dei moduli ti permettono di reagire ai cambiamenti impostando una callback come proprietà `onChange`. La proprietà `onChange` funziona in tutti i browser e viene scatenata in risposta all'interazione dell'utente quando:
|
||||
|
||||
* Il `value` di `<input>` o `<textarea>` cambia.
|
||||
* Lo stato `checked` di `<input>` cambia.
|
||||
* Lo stato `selected` di `<option>` cambia.
|
||||
|
||||
Come tutti gli eventi DOM, la proprietà `onChange` è supportata su tutti i componenti nativi e può essere usata per gestire la propagazione di eventi di cambiamento.
|
||||
|
||||
> Nota:
|
||||
>
|
||||
> Per `<input>` e `<textarea>`, `onChange` rimpiazza — e dovrebbe generalmente essere utilizzata in sostituzione — il gestore di eventi [`oninput`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput) nativo del DOM.
|
||||
|
||||
|
||||
## Componenti Controllati
|
||||
|
||||
Un `<input>` il cui `value` è impostato è un componente *controllato*. In un `<input>` controllato, il valore dell'elemento visualizzato si riflette sempre nella sua proprietà `value`. Ad esempio:
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
return <input type="text" value="Ciao!" />;
|
||||
}
|
||||
```
|
||||
|
||||
Ciò visualizzerà un input che ha sempre il valore di `value` impostato a `Ciao!`. Ciascuna immissione dell'utente non avrà effetto sull'elemento visualizzato poiché React ha dichiarato il suo `value` pari a `Ciao!`. Se volessi aggiornare il `value` in risposta all'input dell'utente, puoi usare l'evento `onChange`:
|
||||
|
||||
```javascript
|
||||
getInitialState: function() {
|
||||
return {value: 'Ciao!'};
|
||||
},
|
||||
handleChange: function(event) {
|
||||
this.setState({value: event.target.value});
|
||||
},
|
||||
render: function() {
|
||||
var value = this.state.value;
|
||||
return <input type="text" value={value} onChange={this.handleChange} />;
|
||||
}
|
||||
```
|
||||
|
||||
In questo esempio, stiamo semplicemente accettando il valore più recente fornito dall'utente e aggiornando la proprietà `value` del componente `<input>`. Questo pattern semplifica l'implementazione di interfacce che rispondono o validano l'interazione dell'utente. Ad esempio:
|
||||
|
||||
```javascript
|
||||
handleChange: function(event) {
|
||||
this.setState({value: event.target.value.substr(0, 140)});
|
||||
}
|
||||
```
|
||||
|
||||
Così si può accettare l'input dell'utente ma ne tronca il valore ai primi 140 caratteri.
|
||||
|
||||
### Potenziali Problemi con Checkbox e Radio Button
|
||||
|
||||
Fai attenzione che, allo scopo di normalizzare la gestione del cambiamento degli elementi checkbox e radio button, React usa un evento `click` al posto di un evento `change`. Nella maggior parte dei casi questo funziona nel modo previsto, tranne quando viene usato `preventDefault` in un gestore dell'evento `change`. `preventDefault` impedisce al browser di aggiornare visualmente l'input, anche se `checked` cambia il suo valore. Questo può essere evitato rimuovendo la chiamata a `preventDefault`, oppure effettuando il cambio del valore di `checked` tramite `setTimeout`.
|
||||
|
||||
|
||||
## Componenti Non Controllati
|
||||
|
||||
Un `<input>` che non fornisce un `value` (o lo imposta a `null`) è un componente *non controllato*. In un `<input>` non controllato, il valore dell'elemento visualizzato rifletterà l'input dell'utente. Ad esempio:
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
return <input type="text" />;
|
||||
}
|
||||
```
|
||||
|
||||
Questo visualizzerà un campo di input il cui valore iniziale è vuoto. Ciascun input dell'utente si rifletterà immediatamente nell'elemento visualizzato. Se desideri reagire ai cambiamenti del valore, puoi usare il gestore di eventi `onChange` proprio come con i componenti controllati.
|
||||
|
||||
### Valore Predefinito
|
||||
|
||||
Se desideri inizializzare il componente con un valore non vuoto, puoi fornire una proprietà `defaultValue`. Ad esempio:
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
return <input type="text" defaultValue="Ciao!" />;
|
||||
}
|
||||
```
|
||||
|
||||
Questo esempio funzionerà in maniera simile all'esempio precedente sui **Componenti Controllati**.
|
||||
|
||||
Similmente, `<input>` supporta `defaultChecked` e `<select>` supporta `defaultValue`.
|
||||
|
||||
> Nota:
|
||||
>
|
||||
> Le proprietà `defaultValue` e `defaultChecked` sono usate soltanto durante il rendering iniziale. Se devi aggiornare il valore in un rendering successivo, dovrai usare un [componente controllato](#controlled-components).
|
||||
|
||||
|
||||
## Argomenti Avanzati
|
||||
|
||||
|
||||
### Perché Componenti Controllati?
|
||||
|
||||
Usare componenti di moduli come `<input>` in React presenta una difficoltà aggiuntiva, assente quando si scrive un modulo tradizionale in HTML. Ad esempio, in HTML:
|
||||
|
||||
```html
|
||||
<input type="text" name="title" value="Senza titolo" />
|
||||
```
|
||||
|
||||
Questo visualizza un campo di input *inizializzato* con il valore `Senza titolo`. Quando l'utente modifica il campo, la *proprietà* `value` del nodo cambierà. Tuttavia, `node.getAttribute('value')` restituirà ancora il valore usato durante l'inizializzazione, `Senza titolo`.
|
||||
|
||||
Diversamente dall'HTML, i componenti React devono rappresentare lo stato della vista in ciascun momento e non soltanto durante l'inizializzazione. Ad esempio, in React:
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
return <input type="text" name="title" value="Senza titolo" />;
|
||||
}
|
||||
```
|
||||
|
||||
Dal momento che questo metodo descrive la vista in ogni momento, il valore del campo di testo deve *sempre* essere `Senza titolo`.
|
||||
|
||||
|
||||
### Perché il Valore della Textarea?
|
||||
|
||||
In HTML, il valore di `<textarea>` è solitamente impostato usando un nodo di testo figlio:
|
||||
|
||||
```html
|
||||
<!-- antipattern: NON FARLO! -->
|
||||
<textarea name="description">Questa è la descrizione.</textarea>
|
||||
```
|
||||
|
||||
Per l'HTML, questo approccio permette agli sviluppatori di fornire facilmente valori su più righe. Tuttavia, dal momento che React è JavaScript, non abbiamo limitazioni sulle stringhe e possiamo usare `\n` se desideriamo andare a capo. In un mondo in cui abbiamo `value` e `defaultValue`, il ruolo giocato dal nodo figlio è ambiguo. Per questa ragione, non dovresti utilizzare il nodo figlio quando imposti il valore delle `<textarea>`:
|
||||
|
||||
```javascript
|
||||
<textarea name="description" value="Questa è la descrizione." />
|
||||
```
|
||||
|
||||
Se tuttavia decidi di *usare* il nodo di testo figlio, questo si comporterà come `defaultValue`.
|
||||
|
||||
|
||||
### Perché il Value di Select?
|
||||
|
||||
L'elemento `<option>` selezionato in un elemento HTML `<select>` è normalmente specificato attraverso l'attributo `selected` dell'opzione stessa. In React, allo scopo di rendere i componenti più semplici da manipolare, viene invece adottato il formato seguente:
|
||||
|
||||
```javascript
|
||||
<select value="B">
|
||||
<option value="A">Arancia</option>
|
||||
<option value="B">Banana</option>
|
||||
<option value="C">Ciliegia</option>
|
||||
</select>
|
||||
```
|
||||
|
||||
Per creare un componente non controllato, viene invece usato `defaultValue`.
|
||||
|
||||
> Nota:
|
||||
>
|
||||
> Puoi passare un array come valore dell'attributo `value`, se desideri selezionare più opzioni in un tag `select` a scelta multipla: `<select multiple={true} value={['B', 'C']}>`.
|
||||
@@ -1,150 +0,0 @@
|
||||
---
|
||||
id: forms
|
||||
title: フォーム
|
||||
permalink: docs/forms-ja-JP.html
|
||||
prev: transferring-props-ja-JP.html
|
||||
next: working-with-the-browser-ja-JP.html
|
||||
---
|
||||
|
||||
`<input>` や `<textarea>` や `<option>` のようなフォームのコンポーネントはユーザの入力によって変化しうるので、他のネイティブのコンポーネントとは異なります。以下のコンポーネントは、ユーザの入力に返答することにおいて、フォームを操作することを簡単にするインターフェースを提供します。
|
||||
|
||||
`<form>` のイベントについての情報は、[フォームのイベント](/react/docs/events.html#form-events)をご覧ください。
|
||||
|
||||
## 双方向のprops
|
||||
|
||||
以下のように、フォームのコンポーネントはユーザの入力に影響されるいくつかのpropsをサポートしています。
|
||||
|
||||
* `value` は `<input>` と `<textarea>` コンポーネントにサポートされています。
|
||||
* `checked` は `<input>` コンポーネントの `checkbox` か `radio` タイプにサポートされています。
|
||||
* `selected` は `<option>` コンポーネントにサポートされています。
|
||||
|
||||
HTMLでは、 `<textarea>` の値は子要素によってセットされます。Reactでは、 `value` を代わりに使うべきです。
|
||||
|
||||
フォームコンポーネントは `onChange` propにコールバックをセットすることで変更を検知することを可能にします。`onChange` propはブラウザ上で、ユーザの入力に返答する際に発火するために動きます。それは以下のようなタイミングです。
|
||||
|
||||
* `<input>` か `<textarea>` の `value` が変わる時。
|
||||
* `<input>` の `checked` ステータスが変わる時。
|
||||
* `<option>` の `selected` ステータスが変わる時。
|
||||
|
||||
全てのDOMのイベントのように、 `onChange` propは全てのネイティブのコンポーネントにサポートされており、何度も発生するチェンジイベントを検知するのに使われることもあります。
|
||||
|
||||
> 注意:
|
||||
> `<input>` と `<textarea>` にとって、 `onChange` は DOMのビルトインの [`oninput`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput) イベントハンドラの代替のものです。そして、一般的に、代わりに使われています。
|
||||
|
||||
## 制御されたコンポーネント
|
||||
|
||||
`<input>` と `value` のセットは *制御された* コンポーネントです。制御された `<input>` では、レンダリングされた要素の値は、常に `value` propを反映します。例えば、
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
return <input type="text" value="Hello!" />;
|
||||
}
|
||||
```
|
||||
|
||||
上記は、常に `Hello!` という値を持つinputをレンダリングするでしょう。ユーザのinputはレンダリングされた要素に何も影響を与えないでしょう。なぜなら、Reactが、値が `Hello!` になるように宣言しているからです。ユーザのinputに返答する形で値を更新したいなら、以下のように `onChange` イベントが使用できます。
|
||||
|
||||
```javascript
|
||||
getInitialState: function() {
|
||||
return {value: 'Hello!'};
|
||||
},
|
||||
handleChange: function(event) {
|
||||
this.setState({value: event.target.value});
|
||||
},
|
||||
render: function() {
|
||||
var value = this.state.value;
|
||||
return <input type="text" value={value} onChange={this.handleChange} />;
|
||||
}
|
||||
```
|
||||
|
||||
この例では、ユーザから提供された、最新の値を単純に受け入れ `<input>` コンポーネントの `value` propを更新します。 このパターンはユーザの入力に返答したり、バリデーションしたりするインターフェースを実行することを簡単にします。例えば、
|
||||
|
||||
```javascript
|
||||
handleChange: function(event) {
|
||||
this.setState({value: event.target.value.substr(0, 140)});
|
||||
}
|
||||
```
|
||||
|
||||
上記はユーザのinputを受け入れますが、値を最初の140字に切り取ります。
|
||||
|
||||
|
||||
## 制御されないコンポーネント
|
||||
|
||||
`value` を与えられていない（もしくは `null` がセットされている） `<input>` は *制御されない* コンポーネントです。制御されない `<input>` では、レンダリングされた要素の値はユーザのinputを反映します。例えば、
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
return <input type="text" />;
|
||||
}
|
||||
```
|
||||
|
||||
上記は、空の値で最初は始まるinputをレンダリングします。どのようなユーザのinputも即座にレンダリングされた要素によって反映されます。値の更新を検知したいなら、 `onChange` イベントを、制御されたコンポーネントと同様に使用することができます。
|
||||
|
||||
コンポーネントを空ではない値で初期化したいなら、 `defaultValue` propを提供することができます。例えば、
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
return <input type="text" defaultValue="Hello!" />;
|
||||
}
|
||||
```
|
||||
|
||||
この例は、上記の **制御されたコンポーネント** の例と同じように動くでしょう。
|
||||
|
||||
同様に、 `<input>` は `defaultChecked` をサポートし、 `<select>` は `defaultValue` をサポートします。
|
||||
|
||||
## 高度なトピック
|
||||
|
||||
|
||||
### なぜコントロールされたコンポーネントを使うのでしょうか？
|
||||
|
||||
`<input>` のようなフォームのコンポーネントをReactで使うことは、伝統的なHTMLのフォームを書いた時には無視される表現であることを表します。例えば、HTMLでは、
|
||||
|
||||
```html
|
||||
<input type="text" name="title" value="Untitled" />
|
||||
```
|
||||
|
||||
上記は、 `Untitled` という値で *初期化* されたinputをレンダリングします。ユーザがinputを更新する時、ノードの `value` *プロパティ* が変更されるでしょう。しかし、 `node.getAttribute('value')` は初期化の際に使用された値である `Untitled` をまだリターンします。
|
||||
|
||||
HTMLと違って、Reactのコンポーネントは初期化の時だけではなく、いつでもビューのステータスを再度表示しなくてはなりません。例えば、Reactでは、
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
return <input type="text" name="title" value="Untitled" />;
|
||||
}
|
||||
```
|
||||
|
||||
このメソッドがいつでもビューを描画するので、次のテキストの入力の値は *常に* `Untitled` になります。
|
||||
|
||||
|
||||
### なぜテキストエリアの値を使うのでしょうか？
|
||||
|
||||
HTMLでは、 `<textarea>` の値は普通、以下のようにその子要素を使うことでセットされます。
|
||||
|
||||
```html
|
||||
<!-- 反例: このようにはしないでください！ -->
|
||||
<textarea name="description">This is the description.</textarea>
|
||||
```
|
||||
|
||||
HTMLでは、開発者は簡単に複数行に渡る値を提供できます。しかし、ReactがJavaScriptであるので、文字列の制限を私たちは持っておらず、改行をしたい場合は `\n` を使えます。 `value` と `defaultValue` を私たちが持っている世界では、子要素が果たす役割は曖昧になっています。この理由から、以下のように `<textarea>` の値をセットする際には子要素を使うべきではありません。
|
||||
|
||||
```javascript
|
||||
<textarea name="description" value="This is a description." />
|
||||
```
|
||||
|
||||
子要素を使うことを *決めた* 場合は、 `defaultValue` と同様の動きをします。
|
||||
|
||||
### なぜセレクトバリューを使うのでしょうか？
|
||||
|
||||
HTMLの `<select>` の選択された `<option>` は、普通はオプションの `selected` 属性によって指定されます。Reactでは、コンポーネントの操作を簡単にするために、以下のようなフォーマットが代わりに適用されます。
|
||||
|
||||
```javascript
|
||||
<select value="B">
|
||||
<option value="A">Apple</option>
|
||||
<option value="B">Banana</option>
|
||||
<option value="C">Cranberry</option>
|
||||
</select>
|
||||
```
|
||||
|
||||
制御されないコンポーネントを作成するために、 `defaultValue` が代わりに使われます。
|
||||
|
||||
> 注意:
|
||||
> 配列を `value` 属性の中に渡すことができます。これで、以下のように、 `select` タグの中で複数のオプションを選択することができます。 `<select multiple={true} value={['B', 'C']}>`
|
||||
@@ -1,159 +0,0 @@
|
||||
---
|
||||
id: forms-ko-KR
|
||||
title: 폼
|
||||
permalink: docs/forms-ko-KR.html
|
||||
prev: transferring-props-ko-KR.html
|
||||
next: working-with-the-browser-ko-KR.html
|
||||
---
|
||||
|
||||
`<input>`, `<textarea>`, `<option>` 같은 폼 컴포넌트는 다른 네이티브 컴포넌트와 다릅니다. 왜냐하면, 사용자의 상호작용에 의해 변경될 수 있기 때문이죠. 이런 컴포넌트들은 사용자의 상호작용에 반응하여 폼을 더 쉽게 관리할 수 있도록 인터페이스를 제공합니다.
|
||||
|
||||
`<form>` 이벤트에 관한 정보는 [폼 이벤트](/react/docs/events-ko-KR.html#폼-이벤트)를 보세요.
|
||||
|
||||
## Props의 상호작용
|
||||
|
||||
폼 컴포넌트는 사용자 상호작용을 통해 영향을 받는 몇 가지 props를 지원합니다.
|
||||
|
||||
* `value`: `<input>`, `<textarea>` 컴포넌트에서 사용가능.
|
||||
* `checked`: `checkbox`, `radio`타입의 `<input>` 컴포넌트에서 사용가능.
|
||||
* `selected`: `<option>` 컴포넌트에서 사용가능.
|
||||
|
||||
HTML에서는 `<textarea>` 태그의 값을 설정할 때 `<textarea>` 태그의 자식이 사용되지만, React에서는 `value` 를 사용해야 합니다.
|
||||
|
||||
폼 컴포넌트는 `onChange` prop의 콜백을 설정하여 변경을 감시(listening)할 수 있습니다. `onChange` prop는 브라우저에 관계없이 다음과 같은 사용자 상호작용에 반응합니다.
|
||||
|
||||
* `<input>`, `<textarea>`의 `value` 변경.
|
||||
* `<input>`의 `checked` state 변경.
|
||||
* `<option>`의 `selected` state 변경.
|
||||
|
||||
모든 DOM 이벤트처럼 `onChange` prop은 모든 네이티브 컴포넌트에서 지원되며 일어난(bubbled) 변경 이벤트를 감시하는데 사용할 수 있습니다.
|
||||
|
||||
> 주의:
|
||||
>
|
||||
> `<input>`, `<textarea>`에서는 `onChange`가 DOM의 [`oninput`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput) 이벤트 핸들러와 같은 기능을 제공하므로 일반적인 경우에는 `onChange`를 사용하세요.
|
||||
|
||||
## 제어되는(controlled) 컴포넌트
|
||||
|
||||
`value`가 설정된 `<input>`은 *제어되는* 컴포넌트입니다. 제어되는 `<input>`에서, 렌더 엘리먼트의 값은 항상 `value` prop을 반영합니다. 예를 들어,
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
return <input type="text" value="Hello!" />;
|
||||
}
|
||||
```
|
||||
|
||||
이것은 항상 `Hello!`의 값을 가지는 input을 렌더합니다. 어떤 사용자 입력도 렌더된 엘리먼트에는 영향을 주지 않는데, 왜냐하면 React가 값을 `Hello!`로 설정했기 때문입니다. 사용자 입력에 따라 값을 업데이트하길 원한다면, `onChange` 이벤트를 사용할 수 있습니다.
|
||||
|
||||
```javascript
|
||||
getInitialState: function() {
|
||||
return {value: 'Hello!'};
|
||||
},
|
||||
handleChange: function(event) {
|
||||
this.setState({value: event.target.value});
|
||||
},
|
||||
render: function() {
|
||||
var value = this.state.value;
|
||||
return <input type="text" value={value} onChange={this.handleChange} />;
|
||||
}
|
||||
```
|
||||
|
||||
이 예제에서는, 단순히 사용자가 주는 최신값을 받고 `<input>` 컴포넌트의 `value` prop을 업데이트하고 있습니다. 이 패턴은 사용자의 상호작용에 반응하거나 검증하는 인터페이스를 쉽게 구현하게 합니다. 예를 들어,
|
||||
|
||||
```javascript
|
||||
handleChange: function(event) {
|
||||
this.setState({value: event.target.value.substr(0, 140)});
|
||||
}
|
||||
```
|
||||
|
||||
이것은 사용자 입력을 받아들이지만, 시작에서부터 140자로 값을 자릅니다.
|
||||
|
||||
### 체크박스와 라디오 버튼의 잠재적인 문제
|
||||
|
||||
변경 핸들링을 일반화하기 위해 React는 `change` 이벤트 대신에 `click` 이벤트를 사용하는 것에 주의하세요. `change` 핸들러 안에서 `preventDefault`를 호출하는 경우를 제외하고 이 동작은 예상대로 동작합니다. 이런 경우 `preventDefault`를 제거하거나, `setTimeout`에 `checked`의 전환을 넣어서 해결 가능합니다.
|
||||
|
||||
## 제어되지 않는(Uncontrolled) 컴포넌트
|
||||
|
||||
`value` 가 없(거나 `null`로 설정되어 있)는 `<input>`은 *제어되지 않는* 컴포넌트입니다. 제어되지 않는 `<input>`에서 렌더된 엘리먼트의 value값은 사용자의 입력을 반영합니다. 예를 들어,
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
return <input type="text" />;
|
||||
}
|
||||
```
|
||||
|
||||
이것은 빈 값으로 시작되는 input을 렌더합니다. 임의의 사용자 입력은 즉시 렌더된 엘리먼트에 반영됩니다. 값의 업데이트를 감시하길 원한다면, 제어되는 컴포넌트처럼 `onChange` 이벤트를 사용할 수 있습니다.
|
||||
|
||||
### 기본 값
|
||||
|
||||
비어 있지 않은 값으로 초기화하길 원한다면, `defaultValue` prop로 할 수 있습니다. 예를 들어,
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
return <input type="text" defaultValue="Hello!" />;
|
||||
}
|
||||
```
|
||||
|
||||
이 예제는 위에있는 **제어되지 않는 컴포넌트**에 더 가깝게 동작할 것입니다.
|
||||
|
||||
마찬가지로, `<input>`은 `defaultChecked`를 지원하고 `<select>`는 `defaultValue`를 지원합니다.
|
||||
|
||||
> 주의:
|
||||
>
|
||||
> `defaultValue`, `defaultChecked` prop은 최초 렌더에서만 사용됩니다. 뒤에 일어나는 렌더에서 값을 업데이트할 필요가 있다면, [제어되는(controlled) 컴포넌트](#제어되는controlled-컴포넌트)를 사용하셔야 합니다.
|
||||
|
||||
## 심화 주제
|
||||
|
||||
### 왜 제어되는 컴포넌트인가요?
|
||||
|
||||
React에서 `<input>`같은 폼 컴포넌트를 사용하면, 전통적인 폼 HTML을 쓸 때에는 없던 어려운 문제가 있습니다. 예를 들어 HTML에서
|
||||
|
||||
```html
|
||||
<input type="text" name="title" value="Untitled" />
|
||||
```
|
||||
|
||||
이렇게 하면 input은 `Untitled` 값으로 *초기화* 됩니다. 사용자가 input을 업데이트할 때, 노드의 `value` *프로퍼티*가 변경될 것입니다. 하지만, `node.getAttribute('value')`은 여전히 초기화 때 사용했던 값인 `Untitled`를 리턴합니다.
|
||||
|
||||
HTML과 다르게, React 컴포넌트는 초기화 시점 뿐만 아니라, 어떤 시점이라도 반드시 뷰의 state를 나타내야 합니다. 예를 들어 React에서
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
return <input type="text" name="title" value="Untitled" />;
|
||||
}
|
||||
```
|
||||
|
||||
이 메소드가 어떤 시점에도 뷰를 기술하기 때문에, 텍스트 input의 값은 *언제나* `Untitled`입니다.
|
||||
|
||||
### 왜 Textarea에 value를 사용하나요?
|
||||
|
||||
HTML에서, `<textarea>`의 값은 보통 그것의 자식들로 설정됩니다.
|
||||
|
||||
```html
|
||||
<!-- 안티패턴: 이렇게 하지 마세요! -->
|
||||
<textarea name="description">이것은 설명입니다.</textarea>
|
||||
```
|
||||
|
||||
HTML에서는 이렇게 하면 여러 줄의 값을 쉽게 개발자가 넣을 수 있게 합니다. 하지만, React는 JavaScript기 때문에, 우리는 문자열 제한이 없고 개행이 필요하면 `\n`을 사용할 수 있습니다. 이 곳에서는 `value`와 `defaultValue`가 있고, 그것이 자식들의 역할을 모호하게 합니다. 이런 이유로, `<textarea>`의 값을 설정할 때에는 자식들을 사용하지 않아야 합니다.
|
||||
|
||||
```javascript
|
||||
<textarea name="description" value="이것은 설명입니다." />
|
||||
```
|
||||
|
||||
자식들을 사용하기로 *했다면*, 자식들은 `defaultValue`처럼 동작할 것입니다.
|
||||
|
||||
### 왜 Select에 value를 사용하나요?
|
||||
|
||||
HTML `<select>`에서 선택된 `<option>`은 보통 option의 `selected` 어트리뷰트로 기술됩니다. React에서는 컴포넌트를 관리하기 쉽게 하기 위해, 다음 형식이 대신 채용됐습니다.
|
||||
|
||||
```javascript
|
||||
<select value="B">
|
||||
<option value="A">Apple</option>
|
||||
<option value="B">Banana</option>
|
||||
<option value="C">Cranberry</option>
|
||||
</select>
|
||||
```
|
||||
|
||||
제어되지 않는 컴포넌트로 만드려면, 대신 `defaultValue`를 사용하세요.
|
||||
|
||||
> 주의:
|
||||
>
|
||||
> `select` 태그에 여러 옵션을 선택할 수 있도록, `value` 어트리뷰트에 배열을 넘길 수도 있습니다. `<select multiple={true} value={['B', 'C']}>`
|
||||
@@ -1,179 +0,0 @@
|
||||
---
|
||||
id: forms
|
||||
title: Forms
|
||||
permalink: docs/forms.html
|
||||
prev: transferring-props.html
|
||||
next: working-with-the-browser.html
|
||||
---
|
||||
|
||||
Form components such as `<input>`, `<textarea>`, and `<option>` differ from other native components because they can be mutated via user interactions. These components provide interfaces that make it easier to manage forms in response to user interactions.
|
||||
|
||||
For information on events on `<form>` see [Form Events](/react/docs/events.html#form-events).
|
||||
|
||||
## Interactive Props
|
||||
|
||||
Form components support a few props that are affected via user interactions:
|
||||
|
||||
* `value`, supported by `<input>` and `<textarea>` components.
|
||||
* `checked`, supported by `<input>` components of type `checkbox` or `radio`.
|
||||
* `selected`, supported by `<option>` components.
|
||||
|
||||
In HTML, the value of `<textarea>` is set via children. In React, you should use `value` instead.
|
||||
|
||||
Form components allow listening for changes by setting a callback to the `onChange` prop. The `onChange` prop works across browsers to fire in response to user interactions when:
|
||||
|
||||
* The `value` of `<input>` or `<textarea>` changes.
|
||||
* The `checked` state of `<input>` changes.
|
||||
* The `selected` state of `<option>` changes.
|
||||
|
||||
Like all DOM events, the `onChange` prop is supported on all native components and can be used to listen to bubbled change events.
|
||||
|
||||
> Note:
|
||||
>
|
||||
> For `<input>` and `<textarea>`, `onChange` supersedes — and should generally be used instead of — the DOM's built-in [`oninput`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput) event handler.
|
||||
|
||||
## Controlled Components
|
||||
|
||||
A **controlled** `<input>` has a `value` prop. Rendering a controlled `<input>` will reflect the value of the `value` prop.
|
||||
|
||||
```javascript
|
||||
render() {
|
||||
return <input type="text" value="Hello!" />;
|
||||
}
|
||||
```
|
||||
|
||||
User input will have no effect on the rendered element because React has declared the value to be `Hello!`. To update the value in response to user input, you could use the `onChange` event:
|
||||
|
||||
```javascript
|
||||
class MyForm extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {value: 'Hello!'};
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
}
|
||||
|
||||
handleChange(event) {
|
||||
this.setState({value: event.target.value});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<input
|
||||
type="text"
|
||||
value={this.state.value}
|
||||
onChange={this.handleChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
In this example, we are accepting the value provided by the user and updating the `value` prop of the `<input>` component. This pattern makes it easy to implement interfaces that respond to or validate user interactions. For example:
|
||||
|
||||
```javascript
|
||||
handleChange(event) {
|
||||
this.setState({value: event.target.value.substr(0, 140)});
|
||||
}
|
||||
```
|
||||
|
||||
This would accept user input and truncate the value to the first 140 characters.
|
||||
|
||||
A **Controlled** component does not maintain its own internal state; the component renders purely based on props.
|
||||
|
||||
### Potential Issues With Checkboxes and Radio Buttons
|
||||
|
||||
Be aware that, in an attempt to normalize change handling for checkbox and radio inputs, React uses a `click` event in place of a `change` event. For the most part this behaves as expected, except when calling `preventDefault` in a `change` handler. `preventDefault` stops the browser from visually updating the input, even if `checked` gets toggled. This can be worked around either by removing the call to `preventDefault`, or putting the toggle of `checked` in a `setTimeout`.
|
||||
|
||||
## Uncontrolled Components
|
||||
|
||||
An `<input>` without a `value` property is an *uncontrolled* component:
|
||||
|
||||
```javascript
|
||||
render() {
|
||||
return <input type="text" />;
|
||||
}
|
||||
```
|
||||
|
||||
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 `onChange` event just like you can with controlled components.
|
||||
|
||||
An **uncontrolled** component maintains its own internal state.
|
||||
|
||||
### Default Value
|
||||
|
||||
If you want to initialize the component with a non-empty value, you can supply a `defaultValue` prop. For example:
|
||||
|
||||
```javascript
|
||||
render() {
|
||||
return <input type="text" defaultValue="Hello!" />;
|
||||
}
|
||||
```
|
||||
|
||||
This example will function much like the **Controlled Components** example above.
|
||||
|
||||
Likewise, `<input type="checkbox">` and `<input type="radio">` support `defaultChecked`, and `<select>` supports `defaultValue`.
|
||||
|
||||
> Note:
|
||||
>
|
||||
> The `defaultValue` and `defaultChecked` props are only used during initial render. If you need to update the value in a subsequent render, you will need to use a [controlled component](#controlled-components).
|
||||
|
||||
## Advanced Topics
|
||||
|
||||
### Why Controlled Components?
|
||||
|
||||
Using form components such as `<input>` in React presents a challenge that is absent when writing traditional form HTML. For example, in HTML:
|
||||
|
||||
```html
|
||||
<input type="text" name="title" value="Untitled" />
|
||||
```
|
||||
|
||||
This renders an input *initialized* with the value, `Untitled`. When the user updates the input, the node's `value` *property* will change. However, `node.getAttribute('value')` will still return the value used at initialization time, `Untitled`.
|
||||
|
||||
Unlike HTML, React components must represent the state of the view at any point in time and not only at initialization time. For example, in React:
|
||||
|
||||
```javascript
|
||||
render() {
|
||||
return <input type="text" name="title" value="Untitled" />;
|
||||
}
|
||||
```
|
||||
|
||||
Since this method describes the view at any point in time, the value of the text input should *always* be `Untitled`.
|
||||
|
||||
### Why Textarea Value?
|
||||
|
||||
In HTML, the value of `<textarea>` is usually set using its children:
|
||||
|
||||
```html
|
||||
<!-- antipattern: DO NOT DO THIS! -->
|
||||
<textarea name="description">This is the description.</textarea>
|
||||
```
|
||||
|
||||
For HTML, this easily allows developers to supply multiline values. However, since React is JavaScript, we do not have string limitations and can use `\n` if we want newlines. In a world where we have `value` and `defaultValue`, it is ambiguous what role children play. For this reason, you should not use children when setting `<textarea>` values:
|
||||
|
||||
```javascript
|
||||
<textarea name="description" value="This is a description." />
|
||||
```
|
||||
|
||||
If you *do* decide to use children, they will behave like `defaultValue`.
|
||||
|
||||
### Why Select Value?
|
||||
|
||||
The selected `<option>` in an HTML `<select>` is normally specified through that option's `selected` attribute. In React, in order to make components easier to manipulate, the following format is adopted instead:
|
||||
|
||||
```javascript
|
||||
<select value="B">
|
||||
<option value="A">Apple</option>
|
||||
<option value="B">Banana</option>
|
||||
<option value="C">Cranberry</option>
|
||||
</select>
|
||||
```
|
||||
|
||||
To make an uncontrolled component, `defaultValue` is used instead.
|
||||
|
||||
> Note:
|
||||
>
|
||||
> You can pass an array into the `value` attribute, allowing you to select multiple options in a `select` tag: `<select multiple={true} value={['B', 'C']}>`.
|
||||
|
||||
### Imperative operations
|
||||
|
||||
If you need to imperatively perform an operation, you have to obtain a [reference to the DOM node](/react/docs/more-about-refs.html#the-ref-callback-attribute).
|
||||
For instance, if you want to imperatively submit a form, one approach would be to attach a `ref` to the `form` element and manually call `form.submit()`.
|
||||
@@ -1,168 +0,0 @@
|
||||
---
|
||||
id: forms-zh-CN
|
||||
title: 表单组件
|
||||
permalink: docs/forms-zh-CN.html
|
||||
prev: transferring-props-zh-CN.html
|
||||
next: working-with-the-browser-zh-CN.html
|
||||
---
|
||||
|
||||
诸如 `<input>`、`<textarea>`、`<option>` 这样的表单组件不同于其他原生组件，因为他们可以通过用户交互发生变化。这些组件提供的界面使响应用户交互的表单数据处理更加容易。
|
||||
|
||||
关于 `<form>` 事件详情请查看 [表单事件](/react/docs/events-zh-CN.html#表单事件)。
|
||||
|
||||
## 交互属性
|
||||
|
||||
表单组件支持几个受用户交互影响的属性：
|
||||
|
||||
* `value`，用于 `<input>`、`<textarea>` 组件。
|
||||
* `checked`，用于类型为 `checkbox` 或者 `radio` 的 `<input>` 组件。
|
||||
* `selected`，用于 `<option>` 组件。
|
||||
|
||||
在 HTML 中，`<textarea>` 的值通过子节点设置；在 React 中则应该使用 `value` 代替。
|
||||
|
||||
表单组件可以通过 `onChange` 回调函数来监听组件变化。当用户做出以下交互时，`onChange` 执行并通过浏览器做出响应：
|
||||
|
||||
* `<input>` 或 `<textarea>` 的 `value` 发生变化时。
|
||||
* `<input>` 的 `checked` 状态改变时。
|
||||
* `<option>` 的 `selected` 状态改变时。
|
||||
|
||||
和所有 DOM 事件一样，所有的 HTML 原生组件都支持 `onChange` 属性，而且可以用来监听冒泡的 `change` 事件。
|
||||
|
||||
> 注意:
|
||||
>
|
||||
> 对于 `<input>` and `<textarea>`， `onChange` 取代 — 一般应该用来替代 — DOM内建的 [`oninput`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput) 事件处理。
|
||||
|
||||
## 受控组件
|
||||
|
||||
一个*受控*的 `<input>` 有一个 `value` prop。渲染一个受控 `<input>` 会反映 `value` prop 的值。
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
return <input type="text" value="Hello!" />;
|
||||
}
|
||||
```
|
||||
|
||||
用户输入在被渲染的元素里将没有作用,因为 React 已经声明值为 `Hello!`。要更新 value 来响应用户输入，你可以使用 `onChange` 事件：
|
||||
|
||||
```javascript
|
||||
getInitialState: function() {
|
||||
return {value: 'Hello!'};
|
||||
},
|
||||
handleChange: function(event) {
|
||||
this.setState({value: event.target.value});
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<input
|
||||
type="text"
|
||||
value={this.state.value}
|
||||
onChange={this.handleChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
在这个例子中，我们接受用户提供的值并更新 `<input>` 组件的 `value` prop。这个模式使实现响应或者验证用户输入的界面更容易。例如：
|
||||
|
||||
```javascript
|
||||
handleChange: function(event) {
|
||||
this.setState({value: event.target.value.substr(0, 140)});
|
||||
}
|
||||
```
|
||||
|
||||
上面的代码接受用户输入，并截取前 140 个字符。
|
||||
|
||||
受控组件不维持一个自己的内部状态;它单纯的基于 props 渲染。
|
||||
|
||||
### 复选框与单选按钮的潜在问题
|
||||
|
||||
当心，在力图标准化复选框与单选按钮的变换处理中，React使用 `click` 事件代替 `change` 事件。在大多数情况下它们表现的如同预期，除了在`change` handler中调用`preventDefault` 。`preventDefault` 阻止了浏览器视觉上更新输入，即使`checked`被触发。变通的方式是要么移除`preventDefault`的调用，要么把`checked` 的触发放在一个`setTimeout`里。
|
||||
|
||||
## 不受控组件
|
||||
|
||||
一个没有 `value` 属性的 `<input>` 是一个不*受控*组件:
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
return <input type="text" />;
|
||||
}
|
||||
```
|
||||
|
||||
上面的代码将渲染出一个空值的输入框，用户输入将立即反应到元素上。和受控元素一样，使用 `onChange` 事件可以监听值的变化。
|
||||
|
||||
*不受控*组件维持它自己的内部状态。
|
||||
|
||||
### 默认值
|
||||
|
||||
如果想给组件设置一个非空的初始值，可以使用 `defaultValue` 属性。例如：
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
return <input type="text" defaultValue="Hello!" />;
|
||||
}
|
||||
```
|
||||
|
||||
这个例子会像上面的 **受控组件** 例子一样运行。
|
||||
|
||||
同样的， `<input type="checkbox">` 和 `<input type="radio">` 支持 `defaultChecked` 、 `<select>` 支持 `defaultValue`.
|
||||
|
||||
> 注意:
|
||||
>
|
||||
> `defaultValue` 和 `defaultChecked` props 只能在内部渲染时被使用。 如果你需要在随后的渲染更新值, 你需要使用 [受控组件](#受控组件).
|
||||
|
||||
## 高级主题
|
||||
|
||||
### 为什么使用受控组件？
|
||||
|
||||
在 React 中使用诸如 `<input>` 的表单组件时，遇到了一个在传统 HTML 中没有的挑战。比如下面的代码：
|
||||
|
||||
```html
|
||||
<input type="text" name="title" value="Untitled" />
|
||||
```
|
||||
|
||||
它渲染一个*初始值*为 `Untitled` 的输入框。当用户改变输入框的值时，节点的 `value` 属性( *property*)将随之变化，但是 `node.getAttribute('value')` 还是会返回初始设置的值 `Untitled`.
|
||||
|
||||
与 HTML 不同，React 组件必须在任何时间点表现视图的状态，而不仅仅是在初始化时。比如在 React 中：
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
return <input type="text" name="title" value="Untitled" />;
|
||||
}
|
||||
```
|
||||
|
||||
由于这个方法描述了在任意时间点上的视图，那么文本输入框的值就应该*始终*为 `Untitled`。
|
||||
|
||||
### 为什么 `<textarea>` 使用 `value` 属性？
|
||||
|
||||
在 HTML 中， `<textarea>` 的值通常使用子节点设置：
|
||||
|
||||
```html
|
||||
<!-- 反例：在 React 中不要这样使用！ -->
|
||||
<textarea name="description">This is the description.</textarea>
|
||||
```
|
||||
|
||||
对 HTML 而言，让开发者设置多行的值很容易。但是，由于 React 是 JavaScript，没有字符串限制，可以使用 `\n` 实现换行。简言之，React 已经有 `value`、`defaultValue` 属性，`<textarea>` 组件的子节点扮演什么角色就有点模棱两可了。基于此， 设置 `<textarea>` 值时不应该使用子节点：
|
||||
|
||||
```javascript
|
||||
<textarea name="description" value="This is a description." />
|
||||
```
|
||||
|
||||
如果 *非要* 使用子节点，效果和使用 `defaultValue` 一样。
|
||||
|
||||
### 为什么 `<select>` 使用 `value` 属性
|
||||
|
||||
HTML 中 `<select>` 通常使用 `<option>` 的 `selected` 属性设置选中状态；React 为了更方便地控制组件，采用以下方式代替：
|
||||
|
||||
```javascript
|
||||
<select value="B">
|
||||
<option value="A">Apple</option>
|
||||
<option value="B">Banana</option>
|
||||
<option value="C">Cranberry</option>
|
||||
</select>
|
||||
```
|
||||
|
||||
如果是不受控组件，则使用 `defaultValue`。
|
||||
|
||||
> 注意：
|
||||
>
|
||||
> 给 `value` 属性传递一个数组，可以选中多个选项：`<select multiple={true} value={['B', 'C']}>`。
|
||||
@@ -1,109 +0,0 @@
|
||||
---
|
||||
id: working-with-the-browser-it-IT
|
||||
title: Lavorare con il Browser
|
||||
permalink: docs/working-with-the-browser-it-IT.html
|
||||
prev: forms-it-IT.html
|
||||
next: more-about-refs-it-IT.html
|
||||
---
|
||||
|
||||
React offre potenti astrazioni che ti liberano in molti casi dal compito di manipolare direttamente il DOM, ma a volte potresti avere bisogno di accedere alle API sottostanti, ad esempio per lavorare con una libreria di terze parti o altro codice preesistente.
|
||||
|
||||
|
||||
## Il DOM Virtuale
|
||||
|
||||
React è così veloce perché non interagisce direttamente con il DOM. React gestisce una rappresentazione veloce del DOM in memoria. I metodi `render()` restituiscono una *descrizione* del DOM, e React può confrontare questa descrizione con la rappresentazione in memoria per calcolare la maniera più veloce di aggiornare il browser.
|
||||
|
||||
In aggiunta, React implementa un intero sistema di eventi sintetici che fa in modo che tutti gli oggetti evento siano conformi alle specifiche W3C nonostante le incompatibilità dei browser, e ciascun evento si propaga in maniera consistente ed efficiente in ogni browser. Puoi anche utilizzare alcuni eventi HTML5 in IE8!
|
||||
|
||||
Nella maggior parte dei casi è sufficiente rimanere nel mondo del "browser fittizio" di React poiché più efficiente e facile da concepire. Tuttavia, a volte potresti aver bisogno di accedere alle API sottostanti, ad esempio per lavorare con una libreria di terze parti come un plugin jQuery. React fornisce convenienti vie di fuga perché tu possa utilizzare direttamente le API DOM sottostanti.
|
||||
|
||||
|
||||
## I Ref e findDOMNode()
|
||||
|
||||
Per interagire con il browser, avrai bisogno di un riferimento a un nodo DOM. Puoi assegnare un attributo `ref` a ciascun elemento, ciò ti permette di fare riferimento all'**istanza di supporto** del componente. Questo è utile se devi invocare funzioni imperative sul componente, oppure desideri accedere ai nodi DOM sottostanti. Per saperne di piu sui ref, incluso la maniera di usarli con efficacia, leggi la nostra documentazione [riferimenti a componenti](/react/docs/more-about-refs-it-IT.html).
|
||||
|
||||
|
||||
## Ciclo di Vita del Componente
|
||||
|
||||
I componenti hanno tree fasi principali del ciclo di vita:
|
||||
|
||||
* **Montaggio:** Un componente sta venendo inserito nel DOM.
|
||||
* **Aggiornamento:** Viene effettuato nuovamente il rendering del componente per determinare se il DOM vada aggiornato.
|
||||
* **Smontaggio:** Un componente sta venendo rimosso dal DOM.
|
||||
|
||||
React offre metodi del ciclo di vita che puoi specificare per inserirti in questo processo. Offriamo dei metodi il cui nome inizia per **will**, chiamati immediatamente prima che qualcosa accada, o per **did** che sono chiamati immediatamente dopo che qualcosa è accaduto.
|
||||
|
||||
|
||||
### Montaggio
|
||||
|
||||
* `getInitialState(): object` è invocato prima che un componente viene montato. Componenti dotati di stato dovrebbero implementare questo metodo e restituire lo stato iniziale.
|
||||
* `componentWillMount()` è invocato immediatamente prima che si effettui il montaggio.
|
||||
* `componentDidMount()` è invocato immediatamente dopo che il montaggio è avvenuto. L'inizializzazione che richiede l'esistenza di nodi DOM dovrebbe avvenire in questo metodo.
|
||||
|
||||
|
||||
### Aggiornamento
|
||||
|
||||
* `componentWillReceiveProps(object nextProps)` è invocato quando un componente montato riceve nuove proprietà. Questo metodo dovrebbe essere utilizzato per confrontare `this.props` e `nextProps` per effettuare transizioni di stato utilizzando `this.setState()`.
|
||||
* `shouldComponentUpdate(object nextProps, object nextState): boolean` è invocato quando un componente decide se i cambiamenti debbano risultare in un aggiornamento del DOM. Implementa questo metodo come un'ottimizzazione per confrontare `this.props` con `nextProps` e `this.state` con `nextState`, e restituisci `false` se React debba rimandare l'aggiornamento.
|
||||
* `componentWillUpdate(object nextProps, object nextState)` è invocato immediatamente prima che l'aggiornamento avvenga. Non puoi chiamare `this.setState()` al suo interno.
|
||||
* `componentDidUpdate(object prevProps, object prevState)` è invocato immediatamente dopo che l'aggiornamento è avvenuto.
|
||||
|
||||
|
||||
### Smontaggio
|
||||
|
||||
* `componentWillUnmount()` è invocato immediatamente prima che un componente venga smontato e distrutto. Puoi effettuare operazioni di pulizia al suo interno.
|
||||
|
||||
|
||||
### Metodi Montati
|
||||
|
||||
Componenti compositi _montati_ supportano anche i seguenti metodi:
|
||||
|
||||
* `findDOMNode(): DOMElement` può essere invocato su ciascun componente montato per ottenere un riferimento al suo nodo DOM.
|
||||
* `forceUpdate()` può essere invocato su ciascun componente montato quando si è certi che un aspetto interno del componente è cambiato senza usare `this.setState()`.
|
||||
|
||||
|
||||
## Supporto per i Browser e Polyfill
|
||||
|
||||
A Facebook supportiamo vecchi browser, incluso IE8. Abbiamo impiegato per un lungo tempo i polyfill per consentirci di scrivere JS con un occhio al futuro. Ciò significa che non abbiamo una quantità di hack sparsi nel nostro codice e possiamo tuttavia aspettarci che il nostro codice "semplicemente funzioni". Ad esempio, anziché usare `+new Date()`, possiamo scrivere `Date.now()`. Dal momento che la versione open source di React è la stessa che usiamo internamente, vi abbiamo applicato la stessa filosofia di scrivere JS guardando avanti.
|
||||
|
||||
In aggiunta a questa filosofia, abbiamo anche deciso, in qualità di autori di una libreria JS, non dovremmo fornire i polyfill assieme alla nostra libreria. Se ciascuna libreria facesse ciò, con buona probabilità invieresti lo stesso polyfill diverse volte, cosa che potrebbe risultare in una rilevante quantità di codice inutilizzato. Se il tuo prodotto deve supportare vecchi browser, con buona probabilità stai già usando qualcosa come [es5-shim](https://github.com/es-shims/es5-shim).
|
||||
|
||||
|
||||
### Polyfill Richiesti per Supportare Vecchi Browser
|
||||
|
||||
`es5-shim.js` tratto da [es5-shim di kriskowal](https://github.com/es-shims/es5-shim) fornisce le seguenti API indispensabili a React:
|
||||
|
||||
* `Array.isArray`
|
||||
* `Array.prototype.every`
|
||||
* `Array.prototype.forEach`
|
||||
* `Array.prototype.indexOf`
|
||||
* `Array.prototype.map`
|
||||
* `Date.now`
|
||||
* `Function.prototype.bind`
|
||||
* `Object.keys`
|
||||
* `String.prototype.split`
|
||||
* `String.prototype.trim`
|
||||
|
||||
`es5-sham.js`, anch'esso tratto da [es5-shim di kriskowal](https://github.com/es-shims/es5-shim), provides the following that React needs:
|
||||
|
||||
* `Object.create`
|
||||
* `Object.freeze`
|
||||
|
||||
La build non minificata di React richiede le seguenti API tratte da [console-polyfill di paulmillr](https://github.com/paulmillr/console-polyfill).
|
||||
|
||||
* `console.*`
|
||||
|
||||
Quando si usano elementi HTML5 in IE8 incluso `<section>`, `<article>`, `<nav>`, `<header>` e `<footer>`, è inoltre necessario includere [html5shiv](https://github.com/aFarkas/html5shiv) o uno script equivalente.
|
||||
|
||||
|
||||
### Problemi Cross-browser
|
||||
|
||||
Nonostante React sia molto buono ad astrarre le differenze tra browser, alcuni browser sono limitati o presentano comportamenti scorretti per i quali non abbiamo potuto trovare un rimedio.
|
||||
|
||||
|
||||
#### Evento onScroll su IE8
|
||||
|
||||
Su IE8 l'evento `onScroll` non viene propagato, e IE8 non possiede una API per definire gestori di eventi nella fase di cattura dell'evento, con il risultato che React non ha alcun modo di reagire a questi eventi.
|
||||
Al momento i gestori di questo evento vengono ignorati su IE8.
|
||||
|
||||
Leggi la issue [onScroll doesn't work in IE8](https://github.com/facebook/react/issues/631) su GitHub per maggiori informazioni.
|
||||
@@ -1,137 +0,0 @@
|
||||
---
|
||||
id: working-with-the-browser
|
||||
title: ブラウザと動くこと
|
||||
permalink: docs/working-with-the-browser-ja-JP.html
|
||||
prev: forms-ja-JP.html
|
||||
next: more-about-refs-ja-JP.html
|
||||
---
|
||||
|
||||
Reactはほとんどのケースで、DOMを直接触ることからあなたを解放するパワフルな抽象性を提供します。しかし、単純に根本的なAPIにアクセスする必要がある場合もあります。サードパーティのライブラリや現存するコードと動かす必要があるかもしれません。
|
||||
|
||||
## 仮想DOM
|
||||
|
||||
ReactはDOMと直接対話を行わないため、とても速いです。Reactは速いメモリ上のDOMの表現を持っています。 `render()` メソッドはDOMの *記述* をリターンします。Reactはこの記述とメモリ上の表現のdiffをとることができ、ブラウザを更新する最速の方法を計算することができます。
|
||||
|
||||
加えて、Reactはブラウザ依存があるにも関わらず、W3Cの使用に則っていると保証されているイベントオブジェクトのような、完全に合成されたイベントシステムを実行します。HTML5のイベントをIE8で使うこともできます！
|
||||
|
||||
パフォーマンスが優れており、簡単であると思われるので、ほとんどの場合、Reactの「偽のブラウザ」を使うべきです。しかし、jQueryプラグインのようなサードパーティのライブラリと動かすかもしれません。基本的なAPIに単純にアクセスする必要がある時もあります。Reactは基本的なDOMのAPIを直接使うための脱出口を提供しています。
|
||||
|
||||
## 参照とfindDOMNode()
|
||||
|
||||
ブラウザと相互に影響するために、DOMノードへの参照が必要になるでしょう。ReactはコンポーネントのDOMノードへの参照を得ることができる `ReactDOM.findDOMNode(component)` 関数を持っています。
|
||||
|
||||
> 注意:
|
||||
> `findDOMNode()` はマウントされたコンポーネントの上でのみ動きます（これは、DOMに配置されたコンポーネントという意味です）。まだマウントされていない（まだ作成されていないコンポーネントの上で `render()` の `findDOMNode()` を呼ぶようなものです）コンポーネントの上でこれを呼ぼうとした場合、例外がスローされます。
|
||||
|
||||
Reactのコンポーネントへの参照を得るためには、現在のReactコンポーネントを得るために `this` を使ったり、あなたがオーナーのコンポーネントを表す参照を使ったりできます。それらは、以下のように動きます。
|
||||
|
||||
```javascript
|
||||
var MyComponent = React.createClass({
|
||||
handleClick: function() {
|
||||
// 生のDOMのAPIを使ってテキスト入力に明確にフォーカスします。
|
||||
ReactDOM.findDOMNode(this.refs.myTextInput).focus();
|
||||
},
|
||||
render: function() {
|
||||
// この参照属性はコンポーネントがマウントされた時に、
|
||||
// this.refs のコンポーネントへの参照を追加します。
|
||||
return (
|
||||
<div>
|
||||
<input type="text" ref="myTextInput" />
|
||||
<input
|
||||
type="button"
|
||||
value="Focus the text input"
|
||||
onClick={this.handleClick}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<MyComponent />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
## 参照に関しての詳細
|
||||
|
||||
参照に関して、詳細に学ぶためと、効率的にそれらを使う方法については、[参照に関しての詳細](/react/docs/more-about-refs.html)ドキュメントを読んでください。
|
||||
|
||||
|
||||
## コンポーネントライフサイクル
|
||||
|
||||
コンポーネントは以下のように、ライフサイクルの3つのパートを持っています
|
||||
|
||||
* **マウンティング:** コンポーネントはDOMにインサートされます。
|
||||
* **アップデーティング:** DOMがアップデートする必要があるとき、コンポーネントを決定するために再度レンダリングされます。
|
||||
* * **アンマウンティング:** コンポーネントはDOMから削除されます。
|
||||
|
||||
Reactは上記のプロセスになるように指定できるライフサイクルメソッドを提供します。私たちは何かが起こる直前に呼ばれる **未来の** メソッドと何かが起こった直後に呼ばれる **過去の** メソッドを使うことができます。
|
||||
|
||||
### マウンティング
|
||||
|
||||
* `getInitialState(): object` はコンポーネントがマウントされる前に実行されます。ステートフルなコンポーネントはこのメソッドをインプリメントする必要があり、最初のstateのデータをリターンする必要があります。
|
||||
* `componentWillMount()` はマウンティングが起きる直前に実行されます。
|
||||
* `componentDidMount()` はマウンティングが起きた直後に実行されます。DOMノードを必要とする初期化はここで行われるべきです。
|
||||
|
||||
### アップデーティング
|
||||
|
||||
* `componentWillReceiveProps(object nextProps)` はマウントされたコンポーネントが新しいpropsを受け取ったときに実行されます。このメソッドは `this.setState()` を使ったstateの変更を実行するために `this.props` と `nextProps` とを比較するのに使われるべきです。
|
||||
* `shouldComponentUpdate(object nextProps, object nextState): boolean` は何かしらの変更がDOMをアップデートしなければいけないかどうかコンポーネントが決めるときに実行されます。このメソッドを `this.props` と `nextProps` そして `this.state` と `nextState` の比較の最適化のために実行してください。そして、Reactがアップデートをスキップするべきときには `false` を返してください。
|
||||
* `componentWillUpdate(object nextProps, object nextState)` はアップデーティングが発生する直前に実行されます。ここで `this.setState()` を呼ぶことはできません。
|
||||
* `componentDidUpdate(object prevProps, object prevState)` はアップデーティングが発生した直後に実行されます。
|
||||
|
||||
### アンマウンティング
|
||||
|
||||
* `componentWillUnmount()` はコンポーネントがアンマウントされ、削除される直前に実行されます。クリーンアップはここで行われるべきです。
|
||||
|
||||
### マウントのメソッド
|
||||
|
||||
_マウントされた_ 複合的なコンポーネントも以下のようなメソッドをサポートします。
|
||||
|
||||
* `findDOMNode(): DOMElement` はレンダリングされたDOMノードへの参照を得るために、どのマウントされたコンポーネントの上でも実行されます。
|
||||
* `forceUpdate()` は `this.setState()` を使うことなくコンポーネントのstateが変更された際にさらにその詳細について知るときにどのマウントされたコンポーネントの上でも実行されます。
|
||||
|
||||
## ブラウザのサポートとポリフィル
|
||||
|
||||
Facebookでは、IE8を含む古いブラウザをサポートしています。私たちは将来に向けたJSを書くことができるように、長い間ポリフィルを使ってきました。これは、私たちのコードベースにたくさんの処理が散らばり、「ただ動くだけの」コードであることを予想することしかできないことを意味します。例えば、 `+new Date()` を見る代わりに、 `Date.now()` と記述しています。オープンソースであるReactを私たちは内部で使っているので、将来に向けたJSを使うという哲学を持ち越しています。
|
||||
|
||||
この哲学に加えて、私たちはJSのライブラリの作者として、ライブラリの一部としてポリフィルを含めるべきではないというスタンスをとっています。全てのライブラリがこのようなことを行ったなら、死んだコードの大きな塊になりうる同じポリフィルを何度も記述しなくてもよくなるでしょう。あなたのプロダクトが古いブラウザをサポートする必要があるなら、[es5-shim](https://github.com/es-shims/es5-shim)のようなものを使うことにチャンスがあるでしょう。
|
||||
|
||||
### ポリフィルは古いブラウザをサポートする必要があります
|
||||
|
||||
[kriskowal's es5-shim](https://github.com/es-shims/es5-shim) の `es5-shim.js` はReactが必要とする以下のようなものを提供します。
|
||||
|
||||
* `Array.isArray`
|
||||
* `Array.prototype.every`
|
||||
* `Array.prototype.forEach`
|
||||
* `Array.prototype.indexOf`
|
||||
* `Array.prototype.map`
|
||||
* `Date.now`
|
||||
* `Function.prototype.bind`
|
||||
* `Object.keys`
|
||||
* `String.prototype.split`
|
||||
* `String.prototype.trim`
|
||||
|
||||
[kriskowal's es5-shim](https://github.com/es-shims/es5-shim)の `es5-sham.js` もまたReactが必要とする以下のようなものを提供します。
|
||||
|
||||
* `Object.create`
|
||||
* `Object.freeze`
|
||||
|
||||
小さくされていないReactのビルドは[paulmillr's console-polyfill](https://github.com/paulmillr/console-polyfill)にある以下のようなものを必要とします。
|
||||
|
||||
* `console.*`
|
||||
|
||||
`<section>` 、 `<article>` 、 `<nav>` 、 `<header>` 、 `<footer>` を含むHTML5の要素をIE8で使うときには、[html5shiv](https://github.com/aFarkas/html5shiv)か、似たようなスクリプトをインクルードする必要があります。
|
||||
|
||||
### クロスブラウザの問題
|
||||
|
||||
Reactはブラウザ間の違いを抽象化することにおいてとても優れていますが、一時的な解決ができない、制限や独特な動作をするブラウザもあります。
|
||||
|
||||
#### IE8のonScrollイベント
|
||||
|
||||
IE8では `onScroll` イベントは発火せず、イベントのフェーズをキャプチャするハンドラを定義するAPIを持っていません。それは、Reactがそれらのイベントを検知する方法が無いということを意味します。現状、IE8ではこのイベントは無視されています。
|
||||
|
||||
詳細な情報については、GitHubのイシューである[onScrollがIE8で動かない](https://github.com/facebook/react/issues/631)を参照してください。
|
||||
|
||||
@@ -1,100 +0,0 @@
|
||||
---
|
||||
id: working-with-the-browser-ko-KR
|
||||
title: 브라우저에서의 동작
|
||||
permalink: docs/working-with-the-browser-ko-KR.html
|
||||
prev: forms-ko-KR.html
|
||||
next: more-about-refs-ko-KR.html
|
||||
---
|
||||
|
||||
React는 대부분의 경우 직접 DOM을 다루지 않아도 될만큼 강력한 추상화를 제공합니다. 하지만 서드파티 라이브러리나 기존의 코드들을 다루다 보면 간혹 기저(underlying)의 API에 접근해야 할 때도 있습니다.
|
||||
|
||||
|
||||
## 가상의 DOM
|
||||
|
||||
React는 DOM을 직접 다루지 않기 때문에 매우 빠릅니다. React는 메모리에(in-memory) DOM의 표상(representation)을 관리합니다. `render()` 메소드는 사실은 DOM의 *서술*를 반환하고, React는 이를 메모리에 있는 DOM의 표상과 비교해 가장 빠른 방식으로 계산해서 브라우저를 업데이트해 줍니다.
|
||||
|
||||
게다가 React는 브라우저의 괴악함(quirks)에도 불구하고 모든 이벤트 객체가 W3C 명세를 보장하도록 통합적인 이벤트 시스템을 구현했습니다. 모든 것이 일관된 방식으로 일어나고(bubbles) 효율적으로 크로스 브라우징을 수행합니다. 심지어 IE8에서도 HTML5 이벤트를 사용할 수 있습니다!
|
||||
|
||||
더 효율적이고 쉬우므로 대개의 경우 React의 "가짜 브라우저"를 이용해 작업을 하게 될 것입니다. 하지만 간혹 jQuery 플러그인 같은 서드파티 라이브러리를 다루다 보면 기저(underlying)의 API에 접근할 필요가 있을지도 모릅니다. React는 기저의 DOM API를 직접 다루는 회피방법을 제공합니다.
|
||||
|
||||
|
||||
## Refs와 findDOMNode()
|
||||
|
||||
브라우저와 상호 작용하려면 DOM 노드에 대한 참조가 필요합니다. `ref`를 어떤 엘리먼트에도 붙일 수 있으며, 이를 통해 컴포넌트 **지원 인스턴스**를 참조 할 수 있습니다. 이는 컴포넌트에 필수 적인 기능을 호출할 때나 기저의 DOM 노드에 접근하고 싶을 때 유용합니다. [refs에서 컴포넌트로](/react/docs/more-about-refs-ko-KR.html) 문서에서 refs를 효율적으로 사용하는 법을 포함해 더 많은 내용을 익혀보세요.
|
||||
|
||||
|
||||
<a name="component-lifecycle"></a>
|
||||
## 컴포넌트 생명주기
|
||||
|
||||
컴포넌트의 생명주기에는 세 가지 주요 부분이 있습니다:
|
||||
|
||||
* **Mounting:** 컴포넌트가 DOM에 삽입되고 있습니다.
|
||||
* **Updating:** 컴포넌트가 DOM의 업데이트 여부를 결정하기 위해 다시 렌더링되고 있습니다.
|
||||
* **Unmounting:** 컴포넌트가 DOM에서 제거되고 있습니다.
|
||||
|
||||
React는 이 프로세스에 훅을 지정할 수 있는 생명주기 메소드를 제공합니다. 발생 직전 시점을 위한 **will** 메소드, 발생 직후 시점을 위한 **did** 메소드가 있습니다.
|
||||
|
||||
### Mounting
|
||||
|
||||
* `getInitialState(): object`는 컴포넌트가 마운트되기 전에 호출됩니다. 상태기반 컴포넌트는 이를 구현하고 초기 상태 데이터를 리턴합니다.
|
||||
* `componentWillMount()`는 마운팅되기 직전에 호출됩니다.
|
||||
* `componentDidMount()`는 마운팅 직후 호출됩니다. 초기화에 필요한 DOM 노드는 이곳에 있어야 합니다.
|
||||
|
||||
### Updating
|
||||
|
||||
* `componentWillReceiveProps(object nextProps)`는 마운트된 컴포넌트가 새로운 props을 받을 때 호출됩니다. 이 메소드는 `this.props`와 `nextProps`을 비교하여 `this.setState()`를 사용해 상태 변환을 수행하는데 사용되야 합니다.
|
||||
* `shouldComponentUpdate(object nextProps, object nextState): boolean`는 컴포넌트가 어떤 변경이 DOM의 업데이트를 보증하는지 결정해야 할 때 호출됩니다. 최적화하려면, React가 업데이트를 무시해야할 때 `this.props`와 `nextProps`를, `this.state`와 `nextState`를 비교해 `false`를 리턴하면 됩니다.
|
||||
* `componentWillUpdate(object nextProps, object nextState)`는 업데이트가 발생하기 직전에 호출됩니다. 이 시점에는 `this.setState()`를 호출할 수 없습니다.
|
||||
* `componentDidUpdate(object prevProps, object prevState)`는 업데이트가 발생한 후 즉시 호출됩니다.
|
||||
|
||||
### Unmounting
|
||||
|
||||
* `componentWillUnmount()`는 컴포넌트가 언마운트되어 파괴되기 직전에 호출됩니다. 정리(Cleanup)는 여기서 처리해야 합니다.
|
||||
|
||||
### Mounted 메소드
|
||||
|
||||
_마운트된_ 합성 컴포넌트들은 다음과 같은 메소드를 지원합니다:
|
||||
|
||||
* `component.forceUpdate()`는 `this.setState()`를 사용하지 않고 변경된 컴포넌트의 상태의 변경을 적용하고 싶을 때 마운트된 컴포넌트에서 사용할 수 있습니다.
|
||||
|
||||
## 브라우저 지원과 Polyfill
|
||||
|
||||
페이스북에서 우리는 IE8을 포함한 구식 브라우저를 지원합니다. 미래지향적인 JS를 작성할 수 있도록 우리는 polyfill을 오랫동안 써왔습니다. 이는 우리의 코드베이스에 구식 브라우저를 위한 코드뭉치를 흩뿌려 놓을 필요가 없으며 그럼에도 우리의 코드가 "잘 작동"할 것이라 예상할 수 있음을 의미합니다. 예를 들어, `+new Date()` 대신에 그냥 `Date.now()`를 사용할 수 있습니다. 오픈소스 React는 우리가 내부에서 사용하는것과 동일하기 때문에, 우리는 이를 통해 미래지향적인 JS를 사용하는 철학을 전달했습니다.
|
||||
|
||||
그 철학에 더하여, 우리는 또한 JS 라이브러리의 저자로서 polyfill을 라이브러리에 포함해서 배포하지 않습니다. 만약 모든 라이브러리가 이런 짓을 하면, 같은 polyfill을 여러 번 내리게 되어 쓸모없이 크기만 차지하는 죽은 코드들을 만들 것 입니다. 당신의 제품이 구식 브라우저를 지원해야한다면, [es5-shim](https://github.com/es-shims/es5-shim) 같은 녀석을 사용할 기회가 있었을 겁니다.
|
||||
|
||||
### Polyfill은 구식 브라우저를 지원하기 위해 필요하다
|
||||
|
||||
[kriskowal's es5-shim](https://github.com/es-shims/es5-shim)의 `es5-shim.js`는 React에 필요한 다음의 기능을 제공합니다:
|
||||
|
||||
* `Array.isArray`
|
||||
* `Array.prototype.every`
|
||||
* `Array.prototype.forEach`
|
||||
* `Array.prototype.indexOf`
|
||||
* `Array.prototype.map`
|
||||
* `Date.now`
|
||||
* `Function.prototype.bind`
|
||||
* `Object.keys`
|
||||
* `String.prototype.split`
|
||||
* `String.prototype.trim`
|
||||
|
||||
[kriskowal's es5-shim](https://github.com/kriskowal/es5-shim)의 `es5-sham.js`는, React에 필요한 다음의 기능도 제공합니다:
|
||||
|
||||
* `Object.create`
|
||||
* `Object.freeze`
|
||||
|
||||
압축되지 않은 React 빌드는 [paulmillr의 console-polyfill](https://github.com/paulmillr/console-polyfill)에서 다음의 기능이 필요합니다.
|
||||
|
||||
* `console.*`
|
||||
|
||||
`<section>`, `<article>`, `<nav>`, `<header>`, `<footer>`등 HTML5 엘리먼트를 IE8에서 이용하려면 [html5shiv](https://github.com/aFarkas/html5shiv)같은 스크립트가 추가로 필요합니다.
|
||||
|
||||
### 크로스 브라우징 이슈
|
||||
|
||||
React가 브라우저별 차이점을 썩 잘 추상화하긴 했지만 일부는 한정적이거나 우리가 발견하지 못한 이상한(quirky) 동작을 보여주기도 합니다.
|
||||
|
||||
#### IE8에서의 onScroll 이벤트
|
||||
|
||||
IE8에서는 `onScroll` 이벤트가 일어나지(bubble) 않으며, IE8은 이벤트의 캡쳐링 단계를 위한 핸들러를 정의하는 API를 갖고 있지 않습니다. 이는 React가 이 이벤트를 이해(listen) 할 방법이 없음을 뜻합니다. 현재 이 이벤트 핸들러는 IE8에서 무시됩니다.
|
||||
|
||||
더 많은 정보는 [onScroll doesn't work in IE8](https://github.com/facebook/react/issues/631) GitHub 이슈를 살펴보세요.
|
||||
@@ -1,60 +0,0 @@
|
||||
---
|
||||
id: working-with-the-browser
|
||||
title: Working With the Browser
|
||||
permalink: docs/working-with-the-browser.html
|
||||
prev: forms.html
|
||||
next: more-about-refs.html
|
||||
---
|
||||
|
||||
React provides powerful abstractions that free you from touching the DOM directly in most cases, but sometimes you simply need to access the underlying API, perhaps to work with a third-party library or existing code.
|
||||
|
||||
## The Virtual DOM
|
||||
|
||||
React is very fast because it never talks to the DOM directly. React maintains a fast in-memory representation of the DOM. `render()` methods actually return a *description* of the DOM, and React can compare this description with the in-memory representation to compute the fastest way to update the browser.
|
||||
|
||||
Additionally, React implements a full synthetic event system such that all event objects are guaranteed to conform to the W3C spec despite browser quirks, and everything bubbles consistently and efficiently across browsers. You can even use some HTML5 events in older browsers that don't ordinarily support them!
|
||||
|
||||
Most of the time you should stay within React's "faked browser" world since it's more performant and easier to reason about. However, sometimes you simply need to access the underlying API, perhaps to work with a third-party library like a jQuery plugin. React provides escape hatches for you to use the underlying DOM API directly.
|
||||
|
||||
## Refs and findDOMNode()
|
||||
|
||||
To interact with the browser, you'll need a reference to a DOM node. You can attach a `ref` to any element, which allows you to reference the **backing instance** of the component. This is useful if you need to invoke imperative functions on the component, or want to access the underlying DOM nodes. To learn more about refs, including ways to use them effectively, see our [refs to components](/react/docs/more-about-refs.html) documentation.
|
||||
|
||||
## Component Lifecycle
|
||||
|
||||
Components have three main parts of their lifecycle:
|
||||
|
||||
* **Mounting:** A component is being inserted into the DOM.
|
||||
* **Updating:** A component is being re-rendered to determine if the DOM should be updated.
|
||||
* **Unmounting:** A component is being removed from the DOM.
|
||||
|
||||
React provides lifecycle methods that you can specify to hook into this process. We provide **will** methods, which are called right before something happens, and **did** methods which are called right after something happens.
|
||||
|
||||
### Mounting
|
||||
|
||||
* `getInitialState(): object` is invoked before a component is mounted. Stateful components should implement this and return the initial state data.
|
||||
* `componentWillMount()` is invoked immediately before mounting occurs.
|
||||
* `componentDidMount()` is invoked immediately after mounting occurs. Initialization that requires DOM nodes should go here.
|
||||
|
||||
### Updating
|
||||
|
||||
* `componentWillReceiveProps(object nextProps)` is invoked when a mounted component receives new props. This method should be used to compare `this.props` and `nextProps` to perform state transitions using `this.setState()`.
|
||||
* `shouldComponentUpdate(object nextProps, object nextState): boolean` is invoked when a component decides whether any changes warrant an update to the DOM. Implement this as an optimization to compare `this.props` with `nextProps` and `this.state` with `nextState` and return `false` if React should skip updating.
|
||||
* `componentWillUpdate(object nextProps, object nextState)` is invoked immediately before updating occurs. You cannot call `this.setState()` here.
|
||||
* `componentDidUpdate(object prevProps, object prevState)` is invoked immediately after updating occurs.
|
||||
|
||||
### Unmounting
|
||||
|
||||
* `componentWillUnmount()` is invoked immediately before a component is unmounted and destroyed. Cleanup should go here.
|
||||
|
||||
### Mounted Methods
|
||||
|
||||
_Mounted_ composite components also support the following method:
|
||||
|
||||
* `component.forceUpdate()` can be invoked on any mounted component when you know that some deeper aspect of the component's state has changed without using `this.setState()`.
|
||||
|
||||
## Browser Support
|
||||
|
||||
React supports most popular browsers, including Internet Explorer 9 and above.
|
||||
|
||||
(We don't support older browsers that don't support ES5 methods, but you may find that your apps do work in older browsers if polyfills such as [es5-shim and es5-sham](https://github.com/es-shims/es5-shim) are included in the page. You're on your own if you choose to take this path.)
|
||||
@@ -1,60 +0,0 @@
|
||||
---
|
||||
id: working-with-the-browser-zh-CN
|
||||
title: 与浏览器协作
|
||||
permalink: docs/working-with-the-browser-zh-CN.html
|
||||
prev: forms-zh-CN.html
|
||||
next: more-about-refs-zh-CN.html
|
||||
---
|
||||
|
||||
React提供了强大的抽象机制使你在大多数情况下免于直接接触DOM，但有时你仅仅只需要访问底层API，也许是为了与第三方库或者已有的代码协作。
|
||||
|
||||
## 虚拟 DOM
|
||||
|
||||
React非常快速是因为它从不直接操作DOM。React维持了一个快速的内存中的DOM表示。`render()` 方法实际上返回一个对DOM的*描述*，然后React能将其与内存中的“描述”进行比较，以计算出最快速的方式更新浏览器。
|
||||
|
||||
此外，React实现了一个完备的合成事件（synthetic event）系统，以使得所有的事件对象都被保证符合W3C细则，而不论各个浏览器的怪癖，并且所有事件跨浏览器地一致并高效的冒泡（bubbles），你甚至能在IE8里使用一些HTML5事件！
|
||||
|
||||
大多数时间你应该和React的"伪造浏览器"呆在一起，因为它更高性能并且容易推理。然而，有时你只需要访问底层API，或许是为了与第三方库比如一个jQuery插件协作。React为你提供了安全舱口来直接使用底层API。
|
||||
|
||||
## Refs 和 findDOMNode()
|
||||
|
||||
为了与浏览器互动，你需要一个指向DOM node的引用。你可以连接一个 `ref` 到任何的元素，这允许你引用组件的 **backing instance** 。如果你需要在组件上调用命令式函数，或者想访问底层的DOM节点，它很有用。要了解更多关于 refs，包括更有效使用他们的方法，请查看我们的 [关于Refs的更多内容](/react/docs/more-about-refs-zh-CN.html) 文档。
|
||||
|
||||
## 组件的生命周期
|
||||
|
||||
组件的生命周期有三个主要部分：
|
||||
|
||||
* **挂载:** 组件被注入DOM。
|
||||
* **更新:** 组件被重新渲染来决定DOM是否应被更新。
|
||||
* **卸载:** 组件从DOM中被移除。
|
||||
|
||||
React提供生命周期方法，以便你可以指定钩挂到这个过程上。我们提供了 **will** 方法，该方法在某事发生前被调用，**did**方法，在某事发生后被调用。
|
||||
|
||||
### 挂载
|
||||
|
||||
* `getInitialState(): object` 在组件挂载前被调用。有状态组件(Stateful components) 应该实现此函数并返回初始state的数据。
|
||||
* `componentWillMount()` 在挂载发生前被立即调用。
|
||||
* `componentDidMount()` 在挂载发生后被立即调用。 需要DOM node的初始化应该放在这里。
|
||||
|
||||
### 更新
|
||||
|
||||
* `componentWillReceiveProps(object nextProps)` 当挂载的组件接收到新的props时被调用。此方法应该被用于比较`this.props` 和 `nextProps`以用于使用`this.setState()`执行状态转换。
|
||||
* `shouldComponentUpdate(object nextProps, object nextState): boolean` 当组件决定任何改变是否要更新到DOM时被调用。作为一个优化实现比较`this.props` 和 `nextProps` 、`this.state` 和 `nextState` ，如果React应该跳过更新，返回`false`。
|
||||
* `componentWillUpdate(object nextProps, object nextState)` 在更新发生前被立即调用。你不能在此调用`this.setState()`。
|
||||
* `componentDidUpdate(object prevProps, object prevState)` 在更新发生后被立即调用。
|
||||
|
||||
### 卸载
|
||||
|
||||
* `componentWillUnmount()` 在组件被卸载和摧毁前被立即调用。清理应该放在这里。
|
||||
|
||||
### 已挂载的方法
|
||||
|
||||
_Mounted_ 复合组件同样支持以下方法:
|
||||
|
||||
* `component.forceUpdate()` 可以在任何已挂载的组件上调用，在你知道某些深处的组件状态在未使用 `this.setState()` 就被改变了时。
|
||||
|
||||
## 浏览器支持
|
||||
|
||||
React 支持绝大多数流行的浏览器，包括 Internet Explorer 9 及以上。
|
||||
|
||||
（我们不支持那些不支持 ES5 methods 的更老的浏览器，但你可能发现如果你的页面包含了类似 [es5-shim and es5-sham](https://github.com/es-shims/es5-shim) 的填充物时是可以在更老的浏览器上运行的。是否做这一步取决于你自己。）
|
||||
@@ -1,141 +0,0 @@
|
||||
---
|
||||
id: more-about-refs-it-IT
|
||||
title: Riferimenti ai Componenti
|
||||
permalink: docs/more-about-refs-it-IT.html
|
||||
prev: working-with-the-browser-it-IT.html
|
||||
next: tooling-integration-it-IT.html
|
||||
---
|
||||
Dopo aver costruito il tuo componente, potresti trovarti nella situazione di volere invocare dei metodi sulle istanze di componenti restituite da `render()`. Nella maggior parte dei casi, questo non è necessario poiché il flusso di dati reattivo assicura sempre che le proprietà più recenti siano assegnate a ciascun figlio prodotto da `render()`. Tuttavia, esistono dei casi in cui potrebbe essere necessario o desiderabile, quindi React fornisce una via d'uscita conosciuta come `refs`. Queste `refs` (riferimenti) sono particolarmente utili quando vuoi: trovare il markup DOM prodotto da un componente (ad esempio, per posizionarlo in modo assoluto), usare componenti React in una più ampia applicazione non-React, oppure effettuare la transizione del tuo codice a React.
|
||||
|
||||
Vediamo come ottenere un ref, e quindi passiamo ad un esempio completo.
|
||||
|
||||
## Il ref restituito da ReactDOM.render
|
||||
|
||||
Da non confondersi con il metodo `render()` che definisci sul tuo componente (il quale restituisce un elemento DOM virtuale), [ReactDOM.render()](/react/docs/top-level-api-it-IT.html#reactdom.render) restituisce un riferimento all'**istanza di supporto** del tuo componente (o `null` per i [componenti privi di stato](/react/docs/reusable-components.html#stateless-functions)).
|
||||
|
||||
|
||||
```js
|
||||
var myComponent = ReactDOM.render(<MyComponent />, myContainer);
|
||||
```
|
||||
|
||||
Tieni a mente, tuttavia, che JSX non restituisce un'istanza di un componente! È solo un **ReactElement**: una rappresentazione leggera che istruisce React su come il componente montato debba apparire.
|
||||
|
||||
```js
|
||||
var myComponentElement = <MyComponent />; // Questo è un semplice ReactElement.
|
||||
|
||||
// Qui va del codice...
|
||||
|
||||
var myComponentInstance = ReactDOM.render(myComponentElement, myContainer);
|
||||
myComponentInstance.doSomething();
|
||||
```
|
||||
|
||||
> Nota:
|
||||
>
|
||||
> Questo deve essere usato soltanto al livello più alto. All'interno dei componenti, lascia che i tuoi `props` e `state` gestiscano la comunicazione con i componenti figli, oppure utilizza uno degli altri metodi per ottenere un ref (attributo stringa o callback).
|
||||
|
||||
|
||||
## L'Attributo ref Come Callback
|
||||
|
||||
React supporta un attributo speciale che puoi assegnare a qualsiasi componente. L'attributo `ref` può essere una funzione callback, che sarà eseguita immediatamente dopo che il componente viene montato. Il componente referenziato sarà passato come parametro, e la funzione callback può utilizzare il componente immediatamente, oppure conservarne un riferimento per un uso successivo, o entrambe.
|
||||
|
||||
È semplice come aggiungere un attributo `ref` a qualsiasi cosa restituita da `render` usando una funzione freccia di ES6:
|
||||
|
||||
```js
|
||||
render: function() {
|
||||
return (
|
||||
<TextInput
|
||||
ref={function(input) {
|
||||
if (input != null) {
|
||||
input.focus();
|
||||
}
|
||||
}} />
|
||||
);
|
||||
},
|
||||
```
|
||||
|
||||
oppure usando una funzione freccia ES6:
|
||||
|
||||
```js
|
||||
render: function() {
|
||||
return <TextInput ref={(c) => this._input = c} />;
|
||||
},
|
||||
componentDidMount: function() {
|
||||
this._input.focus();
|
||||
},
|
||||
```
|
||||
|
||||
Nota che quando il componente referenziato viene smontato e quando il valore di ref cambia, ref sarà chiamata con `null` come argomento. Ciò impedisce i memory leak nel caso in cui l'istanza venga conservata, come nel primo esempio. Nota che quando assegni il valore di ref a un'espressione di funzione in linea come negli esempi precedenti, React vede un oggetto funzione diverso ogni volta e pertanto in occasione di ciascun aggiornamento, ref verrà chiamata con `null` immediatamente prima di essere chiamata con l'istanza del componente.
|
||||
|
||||
Puoi accedere al nodo DOM del componente direttamente chiamando `ReactDOM.findDOMNode(argomentoDellaTuaCallback)`.
|
||||
|
||||
|
||||
## L'Attributo ref Come Stringa
|
||||
|
||||
React supporta anche l'uso di una stringa (anziché una callback) come proprietà ref su qualsiasi componente, sebbene allo stato attuale questo approccio sia quasi esclusivamente superato.
|
||||
|
||||
1. Assegna un attributo `ref` a qualsiasi cosa restituita da `render` come:
|
||||
|
||||
```html
|
||||
<input ref="myInput" />
|
||||
```
|
||||
|
||||
2. Altrove nel codice (tipicamente in un gestore di eventi), accedi all'**istanza di supporto** tramite `this.refs` come segue:
|
||||
|
||||
```javascript
|
||||
this.refs.myInput
|
||||
```
|
||||
|
||||
Puoi accedere direttamente al nodo DOM del componente chiamando `ReactDOM.findDOMNode(this.refs.myInput)`.
|
||||
|
||||
|
||||
## Un Esempio Completo
|
||||
Per ottenere un riferimento a un componente React, puoi usare `this` per ottenere il componente React attuale, oppure usare un ref per ottenere un riferimento a un componente di tua proprietà. Il funzionamento è il seguente:
|
||||
|
||||
```javascript
|
||||
var MyComponent = React.createClass({
|
||||
handleClick: function() {
|
||||
// Assegna il focus esplicitamente al campo di testo usando l'API DOM nativa.
|
||||
this.myTextInput.focus();
|
||||
},
|
||||
render: function() {
|
||||
// L'attributo ref aggiunge un riferimento al componente a this.refs quando
|
||||
// il componente viene montato
|
||||
return (
|
||||
<div>
|
||||
<input type="text" ref={(ref) => this.myTextInput = ref} />
|
||||
<input
|
||||
type="button"
|
||||
value="Assegna il focus al campo di testo"
|
||||
onClick={this.handleClick}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<MyComponent />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
In questo esempio, otteniamo un riferimento all'**istanza di supporto** del campo di testo e vi invochiamo il metodo `focus()` quando il bottone viene cliccato.
|
||||
|
||||
Per componenti compositi, il riferimento si riferisce a un'istanza della classe del componente, quindi puoi invocare ogni metodo definito in tale classe. Se devi accedere al nodo DOM sottostante per il componente, puoi usare [ReactDOM.findDOMNode](/react/docs/top-level-api-it-IT.html#reactdom.finddomnode).
|
||||
|
||||
## Riassunto
|
||||
|
||||
I riferimenti `ref` sono la maniera corretta di inviare un messaggio a una precisa istanza di un figlio in una maniera che sarebbe impraticabile attraverso le normali proprietà `props` e `state` di React. Tuttavia, esse non dovrebbero essere la tua astrazione principale per far fluire i dati attraverso la tua applicazione. In modo predefinito, usa il flusso dati di React e utilizza i `ref` per casi d'uso che sono intrinsecamente non reattivi.
|
||||
|
||||
### Benefici:
|
||||
|
||||
- Puoi definire ogni metodo pubblico nelle classi dei tuoi componenti (come un metodo per reimpostare un Typeahead) e chiamare tali metodi pubblici attraverso i riferimenti (come ad esempio `this.refs.myTypeahead.reset()`).
|
||||
- Effettuare misure sul DOM richiede quasi sempre l'accesso ad un componente "nativo" come `<input />` accedendo il suo nodo DOM sottostante attraverso `ReactDOM.findDOMNode(this.refs.myInput)`. I riferimenti sono uno degli unici metodi praticabili per fare ciò in maniera affidabile.
|
||||
- I riferimenti sono gestiti automaticamente per te! Se un figlio è distrutto, anche il suo riferimento è distrutto. Pertanto non preoccuparti del consumo di memoria (a meno che tu non faccia qualcosa di folle per conservare un riferimento).
|
||||
|
||||
### Precauzioni:
|
||||
|
||||
- *Non accedere mai* ai riferimenti dentro il metodo render di un componente - oppure mentre il metodo render di qualsiasi componente è in esecuzione ovunque nella pila di chiamate.
|
||||
- Se vuoi preservare la resilienza al Crushing del compilatore Google Closure Compiler, assicurati di non accedere mai come proprietà a ciò che è stato specificato come stringa. Ciò significa che devi accedere come `this.refs['myRefString']` se il tuo ref è stato definito come `ref="myRefString"`.
|
||||
- Se non hai ancora programmato parecchie applicazioni con React, la tua prima inclinazione è solitamente di provare a utilizzare i riferimenti per "fare succedere qualcosa" nella tua applicazione. Se questo è il tuo caso, fermati un momento e pensa in maniera critica al luogo corretto nella gerarchia dei componenti in cui lo `state` debba trovarsi. Spesso ti accorgerai che il luogo corretto per "possedere" lo stato si trova a un livello più alto nella gerarchia. Posizionare lì lo stato spesso elimina ogni necessità di usare i `ref` per "fare accadere qualcosa" – al contrario, il flusso dei dati solitamente otterrà lo scopo desiderato.
|
||||
- I ref non possono essere assegnati a [funzioni prive di stato](/react/docs/reusable-components-it-IT.html#stateless-functions), poiché il componente non possiede un'istanza di supporto. Puoi tuttavia racchiudere un componente privo di stato in un componente composito standard e assegnare il ref al componente composito.
|
||||
@@ -1,147 +0,0 @@
|
||||
---
|
||||
id: more-about-refs
|
||||
title: 参照についての詳細
|
||||
permalink: docs/more-about-refs-ja-JP.html
|
||||
prev: working-with-the-browser-ja-JP.html
|
||||
next: tooling-integration-ja-JP.html
|
||||
|
||||
---
|
||||
renderメソッドからUIの構成をリターンした後、あなたは「リーチアウト」を見て、renderから返ってきたコンポーネントのインスタンスの上でメソッドを実行するでしょう。多くの場合、アプリケーションにおいて、データフローを作成することは必要ではありません。リアクティブなデータフローは常に最新の `props` が `render()` から出力されたそれぞれの子要素に送られたことを保証するからです。しかし、まだ必要であったり、利益をもたらすケースもあります。
|
||||
|
||||
`''` という空の文字列でその値をアップデートした後にフォーカスするということを `<input />` 要素（インスタンスのサブ階層に存在します）に伝えたいという場合を考えましょう。
|
||||
|
||||
```javascript
|
||||
var App = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {userInput: ''};
|
||||
},
|
||||
handleChange: function(e) {
|
||||
this.setState({userInput: e.target.value});
|
||||
},
|
||||
clearAndFocusInput: function() {
|
||||
this.setState({userInput: ''}); // inputをクリアします
|
||||
// ここで、<input /> にフォーカスさせたいです！
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<div>
|
||||
<div onClick={this.clearAndFocusInput}>
|
||||
Click to Focus and Reset
|
||||
</div>
|
||||
<input
|
||||
value={this.state.userInput}
|
||||
onChange={this.handleChange}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
この例では、どうにかしてinputに何かを「伝え」たいということに着目してください。何かというのは、propsから推測できるものではありません。このケースでは、inputが今フォーカスされるべきであるということを「伝え」たいのです。しかし、いくつか問題があります。`render()` で返されるものは実際の「子供の」要素ではありません。しかし、特別なインスタンスにおいて子要素の *説明* を行うよりかは、スナップショットを見ていったほうがいいでしょう。
|
||||
|
||||
> 注意:
|
||||
> `render()` からリターンされるものは *実際に* レンダリングされた子要素のインスタンスではないと覚えておいてください。 `render()` からリターンされるものは、ある特定の時点においてのコンポーネントの副階層にある単なる子要素のインスタンスの *説明* に過ぎません。
|
||||
|
||||
これは、 `render()` からリターンされる何かを「保持し続ける」ことはできないことを意味します。そして、それは何かしら意味のあることであると予測できます。
|
||||
|
||||
```javascript
|
||||
// 反例: このようには記述しないでください！
|
||||
render: function() {
|
||||
var myInput = <input />; // このinputの上にあるメソッドを未来のいつかの
|
||||
this.rememberThisInput = myInput; // タイミングで呼ぼうとしています！いえいっ！
|
||||
return (
|
||||
<div>
|
||||
<div>...</div>
|
||||
{myInput}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
この反例では、 `<input />` は単に `<input />` の *説明* に過ぎず、この説明は `<input />` の *現実の* **バッキングインスタンス** を作るために使われます。
|
||||
|
||||
では、inputの *現実の* バッキングインスタンスについて、どのように話していきましょうか？
|
||||
|
||||
## 参照の文字列属性
|
||||
|
||||
Reactは `render()` からの出力であるコンポーネントであれば何でもアタッチできるとても特別なプロパティをサポートしています。この特別なプロパティは `render()` からのリターンである **バッキングインスタンス** に対応したものに参照することを許可します。これはどのタイミングにおいても、固有のインスタンスであることを保証されています。
|
||||
|
||||
これは以下のように単純です。
|
||||
|
||||
1. 以下のように、 `render` からのリターンであれば何でも `ref` 属性をアサインする。
|
||||
|
||||
```html
|
||||
<input ref="myInput" />
|
||||
```
|
||||
|
||||
2. いくつかの他のコードは（一般的にイベントハンドラのコード）、以下にあるように `this.refs` を通して **バッキングインスタンス** にアクセスします。
|
||||
|
||||
```javascript
|
||||
this.refs.myInput
|
||||
```
|
||||
|
||||
`ReactDOM.findDOMNode(this.refs.myInput)` を呼ぶことで、コンポーネントのDOMノードに直接アクセスできる。
|
||||
|
||||
## 参照のコールバック属性
|
||||
|
||||
`ref` 属性は名前の代わりのコールバック関数になり得ます。このコールバックはコンポーネントがマウントされた直後に実行されます。参照されたコンポーネントはパラメータとして渡され、コールバック関数はコンポーネントを即座に使用するか、または将来使用するために参照を保存します（またはその両方を行います）。
|
||||
|
||||
これは、以下のように、 `render` でリターンされてきたものに `ref` 属性をアサインするのと同じくらい簡単です。
|
||||
|
||||
```html
|
||||
<input ref={ function(component){ ReactDOM.findDOMNode(component).focus();} } />
|
||||
```
|
||||
|
||||
|
||||
## 完全な例
|
||||
|
||||
```javascript
|
||||
var App = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {userInput: ''};
|
||||
},
|
||||
handleChange: function(e) {
|
||||
this.setState({userInput: e.target.value});
|
||||
},
|
||||
clearAndFocusInput: function() {
|
||||
// inputをクリアする
|
||||
this.setState({userInput: ''}, function() {
|
||||
// このコードはコンポーネントが再度レンダリングされた後に実行されます。
|
||||
ReactDOM.findDOMNode(this.refs.theInput).focus(); // どーん！フォーカスされました！
|
||||
});
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<div>
|
||||
<div onClick={this.clearAndFocusInput}>
|
||||
Click to Focus and Reset
|
||||
</div>
|
||||
<input
|
||||
ref="theInput"
|
||||
value={this.state.userInput}
|
||||
onChange={this.handleChange}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
この例では、レンダリング関数は `<input />` インスタンスの説明をリターンします。しかし、実際のインスタンスは `this.refs.theInput` を通してアクセスされます。 `ref="theInput"` を持つ子要素のコンポーネントが `render` からリターンされる限り、 `this.refs.theInput` は固有のインスタンスにアクセスするでしょう。これは `<Typeahead ref="myTypeahead" />` のような高階層の（DOMでない）コンポーネントでも同様に動きます。
|
||||
|
||||
## 要約
|
||||
|
||||
リアクティブな `props` と `state` を通してのストリーミングのアクセスは便利とは言えないため、参照は特定の子要素のインスタンスにメッセージを送るための素晴らしい方法です。しかし、それらは、アプリケーションを通したデータフローの抽象化につながるわけではありません。デフォルトで、リアクティブなデータフローを使ってください。そして、ユースケースのために `ref` を保存するのは本質的にはリアクティブではありません。
|
||||
|
||||
### 利益:
|
||||
|
||||
- コンポーネントクラス（例えば、Typeaheadのリセットメソッドのようなもの）にパブリックなメソッドを定義できる。また、参照（例えば、 `this.refs.myTypeahead.reset()` のように）を通してそれらのパブリックなメソッドを呼べる。
|
||||
- DOMの計測を行うことは大体いつも `<input />` のような「ネイティブの」コンポーネントや `ReactDOM.findDOMNode(this.refs.myInput)` を通した根本のDOMノードにアクセスすることを必要とします。参照は、こういったことを期待通りに行う唯一の実用的な方法です。
|
||||
- 参照は自動的に管理されます！もし子要素が削除されたら、その参照もまた削除されます。メモリに関しての心配は要りません（あなた自身が参照を維持するために何かおかしなことを行っていなければ）。
|
||||
|
||||
### 警告:
|
||||
|
||||
- *決して* コンポーネントのレンダリングメソッドの中の参照にアクセスしてはいけません。たとえコンポーネントのレンダリングメソッドのいずれかがコールスタックの中のどこかで動いているとしても。
|
||||
- もしGoogle Closure Compilerのクラッシュからの回復を守りたいなら、文字列として指定されたプロパティとしてアクセスしてはいけないことに気をつけてください。これは、 `ref="myRefString"` として参照が定義されている場合は、 `this.refs['myRefString']` を使ってアクセスしなければいけないことを意味します。
|
||||
- まだReactでプログラムを書いたことがない場合は、アプリケーションで「何かを起こす」ために参照を使おうとするでしょう。もしそのケースだった場合は、時間をかけて `state` がコンポーネントの階層のどこで保持されるべきか批評的に考えてください。多くの場合は、そのstateを「保持する」ための固有の場所が階層の高いレベルにあることがクリアになります。そのstateをその場所に配置することはよく「何かを起こす」ために `ref` を使うための願望を排除します。代わりに、データフローは普通、目標を達成します。
|
||||
@@ -1,139 +0,0 @@
|
||||
---
|
||||
id: more-about-refs-ko-KR
|
||||
title: refs에서 컴포넌트로
|
||||
permalink: docs/more-about-refs-ko-KR.html
|
||||
prev: working-with-the-browser-ko-KR.html
|
||||
next: tooling-integration-ko-KR.html
|
||||
---
|
||||
컴포넌트를 빌드한 후에는 `render()`에서 반환된 컴포넌트 인스턴스에 접근하거나 메소드를 호출할 방법이 필요할 수도 있습니다. 반응적 데이터 플로우가 `render()`의 결과물에서 최신의 `props`가 각각의 자식으로 보내진 것을 항상 보장하기 때문에 애플리케이션의 데이터 플로우를 만드는데 대체로 이런 작업은 필요가 없지만, 여전히 이런 작업이 필요하거나 유리한 경우가 있긴 합니다. React는 이를 위해 `refs`라는 탈출구를 제공합니다. `refs`(레퍼런스)는 특히 다음과 같은 경우 유용합니다: 컴포넌트에 의해 렌더된 DOM 마크업을 찾을때 (인스턴스내의 절대적인 위치), 큰 프로젝트의 일부에 React 컴포넌트를 사용하는 경우 또는 기존의 코드베이스를 React로 변경하는 경우.
|
||||
|
||||
ref를 어떻게 얻는지 살펴보고, 예제를 완성해 봅시다.
|
||||
|
||||
## ReactDOM.render에서 반환된 ref
|
||||
|
||||
컴포넌트에서 정의한, 가상의 DOM 엘리먼트를 반환하는 `render()`와 헷갈리지 않도록 합니다. [ReactDOM.render()](/react/docs/top-level-api-ko-KR.html#reactdom.render)는 컴포넌트의 **지원 인스턴스(backing instance)**에 대한 참조를 반환 합니다. [상태를 가지지 않는 컴포넌트](/react/docs/reusable-components-ko-KR.html#상태를-가지지-않는-함수)에 대해선 `null`을 반환하죠.
|
||||
|
||||
|
||||
```js
|
||||
var myComponent = ReactDOM.render(<MyComponent />, myContainer);
|
||||
```
|
||||
|
||||
명심하세요. 위의 코드는 컴포넌트 인스턴스를 반환하지 않습니다! 이는 그저 **ReactElement**:React에 마운트된 컴포넌트가 어떻게 보여야 할지 알려주는 경량의 표상(representation) 입니다.
|
||||
|
||||
```js
|
||||
var myComponentElement = <MyComponent />; // 이건 그냥 ReactElement 입니다.
|
||||
|
||||
// 여기 코드가 위치합니다...
|
||||
|
||||
var myComponentInstance = ReactDOM.render(myComponentElement, myContainer);
|
||||
myComponentInstance.doSomething();
|
||||
```
|
||||
|
||||
> 주의:
|
||||
>
|
||||
> 이는 오직 최상위 레벨에서만 사용되어야 합니다. 컴포넌트의 내부에서는 `props`와 `state`가 자식 컴포넌트와 통신하도록 하거나 문자열이나 콜백 어트리뷰트 등 ref를 얻어오는 다른 방법을 사용하도록 하세요.
|
||||
|
||||
## ref 콜백 어트리뷰트
|
||||
|
||||
React는 어떤 컴포넌트에든 추가할 수 있는 특별한 어트리뷰트를 제공합니다. `ref` 어트리뷰트는 콜백 함수일 수 있으며 이는 컴포넌트가 마운트 된 후 즉시 실행됩니다. 참조된 컴포넌트는 파라미터로 전달될 것이며 콜백 함수는 즉시, 혹은 미래에 사용하기 위해 컴포넌트의 참조를 저장합니다.
|
||||
|
||||
`render`에서 반환되는 무엇에든 `ref` 어트리뷰트를 추가하는 것은 간단합니다:
|
||||
|
||||
```js
|
||||
render: function() {
|
||||
return (
|
||||
<TextInput
|
||||
ref={function(input) {
|
||||
if (input != null) {
|
||||
input.focus();
|
||||
}
|
||||
}} />
|
||||
);
|
||||
},
|
||||
```
|
||||
ES6 화살표 함수를 사용한다면 다음과 같습니다:
|
||||
|
||||
```js
|
||||
render: function() {
|
||||
return <TextInput ref={(c) => this._input = c} />;
|
||||
},
|
||||
componentDidMount: function() {
|
||||
this._input.focus();
|
||||
},
|
||||
```
|
||||
|
||||
`<div />` 같은 DOM 컴포넌트에 ref를 추가하면 DOM 노드를 얻게 됩니다; `<TextInput />` 같은 합성 컴포넌트에 ref를 추가하면 React 클래스 인스턴스를 얻게 됩니다. 후자의 경우, 클래스에 정의되어 있는 노출된 메소드를 호출할 수 있습니다.
|
||||
|
||||
참조된 컴포넌트가 언마운트되고 ref가 변경되면 이전의 ref는 `null`을 인수로 호출됨을 주의 하세요. 이는 첫번째 예제에서처럼 인스턴트가 저장된 경우의 메모리 누수를 방지합니다. 또한 예제와 같이 ref를 인라인 함수 표현식으로 서술하게되면 React는 모든 업데이트에 대해 다른 함수 객체를 참조하게 됩니다. ref는 컴포넌트의 인스턴스의 호출 이전에 `null` 객체와 함께 즉시 호출될 것입니다.
|
||||
|
||||
## ref 문자열 어트리뷰트
|
||||
|
||||
React는 ref에 콜백 대신 문자열도 지원합니다 이런 접근은 이제 과거의 것이긴 합니다.
|
||||
|
||||
|
||||
1. `render`에서 반환된 값을 `ref` 어트리뷰트에 할당합니다:
|
||||
|
||||
```html
|
||||
<input ref="myInput" />
|
||||
```
|
||||
|
||||
2. 다른 코드(일반적으로는 이벤트 핸들러 코드)에서 `this.refs`를 통해 **지원 인스턴스**에 접근 합니다:
|
||||
|
||||
```javascript
|
||||
var input = this.refs.myInput;
|
||||
var inputValue = input.value;
|
||||
var inputRect = input.getBoundingClientRect();
|
||||
```
|
||||
|
||||
## 최종 예제
|
||||
React 컴포넌트의 참조를 얻기 위해서, 현재의 React 컴포넌트를 위해서는 `this`를, 소유한 컴포넌트에 대해서는 ref를 사용할 수 있습니다. 다음과 같이 작동 합니다:
|
||||
|
||||
```javascript
|
||||
var MyComponent = React.createClass({
|
||||
handleClick: function() {
|
||||
// 명시적으로 텍스트 인풋에 포커스하기 위해 raw DOM API를 사용합니다.
|
||||
this.myTextInput.focus();
|
||||
},
|
||||
render: function() {
|
||||
// ref 어트리뷰트는 컴포넌트가 마운트되면
|
||||
// this.refs에 컴포넌트에 대한 참조를 추가합니다.
|
||||
return (
|
||||
<div>
|
||||
<input type="text" ref={(ref) => this.myTextInput = ref} />
|
||||
<input
|
||||
type="button"
|
||||
value="Focus the text input"
|
||||
onClick={this.handleClick}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<MyComponent />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
이 예제에서, 텍스트 인풋의 **지원 인스턴스**에 대한 참조를 얻었으며 버튼이 클릭되었을때 `focus()`를 호출했습니다.
|
||||
|
||||
합성 컴포넌트에서는 참조는 컴포넌트 클래스의 인스턴스를 가리키기 때문에 클래스에 정의된 어떤 메소드도 호출할 수 있습니다. 컴포넌트의 기저에 있는 DOM 노드에 접근하기 위해서는 [ReactDOM.findDOMNode](/react/docs/top-level-api-ko-KR.html#reactdom.finddomnode)를 "탈출구"로 사용할 수 있습니다. 하지만 이는 캡슐화를 깨며, 대부분의 경우 React 모델을 이용해 더 명확한 방법으로 구조를 짤 수 있기 때문에 추천하지 않습니다.
|
||||
|
||||
|
||||
## 요약
|
||||
|
||||
Refs는 반응적인 `props`와 `state` 스트리밍을 통해서는 불편했던 특정한 자식 인스턴스에 메시지 보내기를 수행하는 좋은 방법입니다. 하지만 애플리케이션의 데이터 플로우 전반에 사용해도 되는 go-to 같은 개념은 아닙니다. 기본적으로는 반응적인 데이터 플로우를 사용하고, `ref`는 근본적으로 반응적이지 않은 경우에만 사용하세요.
|
||||
|
||||
### 이점:
|
||||
|
||||
- 컴포넌트 클래스에 public 메소드(ex. Typeahead의 reset)를 선언할 수 있으며 refs를 통해 그를 호출할 수 있습니다. (ex. `this.refs.myTypeahead.reset()`) 대부분, 이는 선언적으로 refs를 사용하는 것보다 내장 React 데이터 흐름을 명확하게 합니다.
|
||||
- DOM을 측정하기 위해서는 거의 항상 `<input />` 같은 "기본" 컴포넌트를 다루고 ref를 통해 그 기저의 DOM 노드에 접근해야 합니다. Refs는 이 일을 확실하게 수행하는 몇 안 되는 실용적인 방법의 하나입니다.
|
||||
- Refs는 자동으로 관리합니다! 자식이 파괴되면, 그의 ref도 마찬가지로 파괴됩니다. 참조를 유지하기 위해 뭔가 미친 짓을 하지 않는 한, 메모리 걱정은 하지 않아도 됩니다.
|
||||
|
||||
### 주의:
|
||||
|
||||
- 컴포넌트의 렌더 메소드에서는, 혹은 컴포넌트의 렌더 메소드가 콜스택 어디에서든 실행되는 동안에는 절대 접근하지 마세요.
|
||||
- Google Closure Compiler에서의 어드벤스드 모드 분쇄 복원력 유지(to preserve advanced-mode crushing resilience)를 위해서는 문자열로 정의한 것을 절대 프로퍼티로 접근하지 마세요. ref가 ref="myRefString"으로 정의되어 있다면 this.refs['myRefString']으로만 접근해야 한다는 이야기 입니다.
|
||||
- React로 앱을 여럿 만들어 본 경험이 없다면, 보통은 처음엔 앱에서 "무언가 일어나도록" 하는데 refs를 사용하게 될 것입니다. 이 경우, 잠시 시간을 내어 `state`가 컴포넌트 계층구조의 어느 부분에서 관리되어야 할지 비판적으로 생각해 봅시다. 대개는 state가 계층구조의 더 높은 레벨에서 "소유"하는 것이 타당함이 명확해집니다. 그렇게 함으로써 `ref`를 사용해 "무언가 일어나도록" 하려는 욕망이 대부분 제거됩니다. - 대신에 데이터 플로우를 통해 대개 원하는 바를 달성하게 될 것입니다.
|
||||
- Refs는 [상태를 가지지 않는 함수](/react/docs/reusable-components-ko-KR.html#상태를-가지지-않는-함수)에 붙일 수 없습니다. 왜냐하면 컴포넌트가 내부 인스턴스를 가지지 않기 때문입니다. 상태를 가지지 않는 컴포넌트는 항상 일반 컴포넌트로 감싸 ref를 조합 컴포넌트에 붙일 수 있습니다.
|
||||
@@ -1,143 +0,0 @@
|
||||
---
|
||||
id: more-about-refs
|
||||
title: Refs to Components
|
||||
permalink: docs/more-about-refs.html
|
||||
prev: working-with-the-browser.html
|
||||
next: tooling-integration.html
|
||||
---
|
||||
After building your component, you may find yourself wanting to "reach out" and invoke methods on component instances returned from `render()`. In most cases, this should be unnecessary because the reactive data flow always ensures that the most recent props are sent to each child that is output from `render()`. However, there are a few cases where it still might be necessary or beneficial, so React provides an escape hatch known as `refs`. These `refs` (references) are especially useful when you need to find the DOM markup rendered by a component (for instance, to position it absolutely), use React components in a larger non-React application, or transition your existing codebase to React.
|
||||
|
||||
Let's look at how to get a ref, and then dive into a complete example.
|
||||
|
||||
## The ref returned from ReactDOM.render
|
||||
|
||||
Not to be confused with the `render()` function that you define on your component (and which returns a virtual DOM element), [ReactDOM.render()](/react/docs/top-level-api.html#reactdom.render) will return a reference to your component's **backing instance** (or `null` for [stateless components](/react/docs/reusable-components.html#stateless-functions)).
|
||||
|
||||
|
||||
```js
|
||||
var myComponent = ReactDOM.render(<MyComponent />, myContainer);
|
||||
```
|
||||
|
||||
Keep in mind, however, that the JSX doesn't return a component instance! It's just a **ReactElement**: a lightweight representation that tells React what the mounted component should look like.
|
||||
|
||||
```js
|
||||
var myComponentElement = <MyComponent />; // This is just a ReactElement.
|
||||
|
||||
// Some code here...
|
||||
|
||||
var myComponentInstance = ReactDOM.render(myComponentElement, myContainer);
|
||||
myComponentInstance.doSomething();
|
||||
```
|
||||
|
||||
> Note:
|
||||
>
|
||||
> This should only ever be used at the top level. Inside components, let your `props` and `state` handle communication with child components, or use one of the other methods of getting a ref (string attribute or callbacks).
|
||||
|
||||
## The ref Callback Attribute
|
||||
|
||||
React supports a special attribute that you can attach to any component. The `ref` attribute can be a callback function, and this callback will be executed immediately after the component is mounted. The referenced component will be passed in as a parameter, and the callback function may use the component immediately, or save the reference for future use (or both).
|
||||
|
||||
It's as simple as adding a `ref` attribute to anything returned from `render`:
|
||||
|
||||
```js
|
||||
render: function() {
|
||||
return (
|
||||
<TextInput
|
||||
ref={function(input) {
|
||||
if (input != null) {
|
||||
input.focus();
|
||||
}
|
||||
}} />
|
||||
);
|
||||
},
|
||||
```
|
||||
or using an ES6 arrow function:
|
||||
|
||||
```js
|
||||
render: function() {
|
||||
return <TextInput ref={(c) => this._input = c} />;
|
||||
},
|
||||
componentDidMount: function() {
|
||||
this._input.focus();
|
||||
},
|
||||
```
|
||||
|
||||
When attaching a ref to a DOM component like `<div />`, you get the DOM node back; when attaching a ref to a composite component like `<TextInput />`, you'll get the React class instance. In the latter case, you can call methods on that component if any are exposed in its class definition.
|
||||
|
||||
Note that when the referenced component is unmounted and whenever the ref changes, the old ref will be called with `null` as an argument. This prevents memory leaks in the case that the instance is stored, as in the second example. Also note that when writing refs with inline function expressions as in the examples here, React sees a different function object each time so on every update, ref will be called with `null` immediately before it's called with the component instance.
|
||||
|
||||
## The ref String Attribute
|
||||
|
||||
> Note:
|
||||
>
|
||||
> Although string refs are not deprecated, they are considered legacy, and will likely be deprecated at some point in the future. Callback refs are preferred.
|
||||
|
||||
React also supports using a string (instead of a callback) as a ref prop on any component.
|
||||
|
||||
1. Assign a `ref` attribute to anything returned from `render` such as:
|
||||
|
||||
```html
|
||||
<input ref="myInput" />
|
||||
```
|
||||
|
||||
2. In some other code (typically event handler code), access the **backing instance** via `this.refs` as in:
|
||||
|
||||
```javascript
|
||||
var input = this.refs.myInput;
|
||||
var inputValue = input.value;
|
||||
var inputRect = input.getBoundingClientRect();
|
||||
```
|
||||
|
||||
## A Complete Example
|
||||
In order to get a reference to a React component, you can either use `this` to get the current React component, or you can use a ref to get a reference to a component you own. They work like this:
|
||||
|
||||
```javascript
|
||||
var MyComponent = React.createClass({
|
||||
handleClick: function() {
|
||||
// Explicitly focus the text input using the raw DOM API.
|
||||
if (this.myTextInput !== null) {
|
||||
this.myTextInput.focus();
|
||||
}
|
||||
},
|
||||
render: function() {
|
||||
// The ref attribute is a callback that saves a reference to the
|
||||
// component to this.myTextInput when the component is mounted.
|
||||
return (
|
||||
<div>
|
||||
<input type="text" ref={(ref) => this.myTextInput = ref} />
|
||||
<input
|
||||
type="button"
|
||||
value="Focus the text input"
|
||||
onClick={this.handleClick}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<MyComponent />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
In this example, we get a reference to the text input **backing instance** and we call `focus()` when the button is clicked.
|
||||
|
||||
For composite components, the reference will refer to an instance of the component class so you can invoke any methods that are defined on that class. If you need access to the underlying DOM node for that component, you can use [ReactDOM.findDOMNode](/react/docs/top-level-api.html#reactdom.finddomnode) as an "escape hatch" but we don't recommend it since it breaks encapsulation and in almost every case there's a clearer way to structure your code within the React model.
|
||||
|
||||
## Summary
|
||||
|
||||
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 `props` and `state`. They should, however, not be your go-to abstraction for flowing data through your application. By default, use the Reactive data flow and save `ref`s for use cases that are inherently non-reactive.
|
||||
|
||||
### Benefits:
|
||||
|
||||
- You can define any public method on your component classes (such as a reset method on a Typeahead) and call those public methods through refs (such as `this.refs.myTypeahead.reset()`). In most cases, it's clearer to use the built-in React data flow instead of using refs imperatively.
|
||||
- Performing DOM measurements almost always requires reaching out to a "native" component such as `<input />` and accessing its underlying DOM node using a ref. Refs are one of the only practical ways of doing this reliably.
|
||||
- Refs are automatically managed for you! If that child is destroyed, its ref is also destroyed for you. No worrying about memory here (unless you do something crazy to retain a reference yourself).
|
||||
|
||||
### Cautions:
|
||||
|
||||
- *Never* access refs inside of any component's render method – or while any component's render method is even running anywhere in the call stack.
|
||||
- If you want to preserve Google Closure Compiler advanced-mode crushing resilience, make sure to never access as a property that was specified as a string. This means you must access using `this.refs['myRefString']` if your ref was defined as `ref="myRefString"`.
|
||||
- If you have not programmed several apps with React, your first inclination is usually going to be to try to use refs to "make things happen" in your app. If this is the case, take a moment and think more critically about where state should be owned in the component hierarchy. Often, it becomes clear that the proper place to "own" that state is at a higher level in the hierarchy. Placing the state there often eliminates any desire to use `ref`s to "make things happen" – instead, the data flow will usually accomplish your goal.
|
||||
- Refs may not be attached to a [stateless function](/react/docs/reusable-components.html#stateless-functions), because the component does not have a backing instance. You can always wrap a stateless component in a standard composite component and attach a ref to the composite component.
|
||||
@@ -1,137 +0,0 @@
|
||||
---
|
||||
id: more-about-refs-zh-CN
|
||||
title: 对组件的refs
|
||||
permalink: docs/more-about-refs-zh-CN.html
|
||||
prev: working-with-the-browser-zh-CN.html
|
||||
next: tooling-integration-zh-CN.html
|
||||
---
|
||||
在建立你的组件以后，你也许发现你想“接触”并且调用从 `render()`返回的组件实例上的方法。大部分情况下，这是不必要的因为响应式的数据流总是确保最近的 props 被送到每一个从 `render()` 输出的子级。然而，有一些情况下它仍旧是必要或者有益的，所以 React 提供了一个被称为 `refs` 的安全舱口。这些 `refs` （引用） 在你需要时特别有用 如：查找被组件绘制的 DOM 标记（例如，绝对定位它），使用 React 组件在一个大的非React组件里，或者转换你已有的代码库到React。
|
||||
|
||||
让我们来看看怎样取得一个ref，然后深入完整的例子。
|
||||
|
||||
## 从 ReactDOM.render 返回的 ref
|
||||
|
||||
不要被你在你的组件（它返回一个虚拟的DOM元素）里定义的 `render()` 迷惑了， [ReactDOM.render()](/react/docs/top-level-api.html#reactdom.render) 会返回一个对你的组件的 **backing instance** 的引用（[无状态组件](/react/docs/reusable-components.html#stateless-functions) 返回 `null`).
|
||||
|
||||
```js
|
||||
var myComponent = ReactDOM.render(<MyComponent />, myContainer);
|
||||
```
|
||||
|
||||
记住，不管怎样，JSX不会返回一个组件的实例！它只是一个 **ReactElement**: 一个轻量级的表达，告诉React被挂载的组件应该长什么样。
|
||||
|
||||
```js
|
||||
var myComponentElement = <MyComponent />; // 这只是一个 ReactElement.
|
||||
|
||||
// 省略一些代码 ...
|
||||
|
||||
var myComponentInstance = ReactDOM.render(myComponentElement, myContainer);
|
||||
myComponentInstance.doSomething();
|
||||
```
|
||||
|
||||
> 注意:
|
||||
>
|
||||
> 这只应该用在顶层上。在组件内部，让你的 `props` 和 `state` 来处理和子组件的通信，或者使用其他获取ref的方法（string attribute or callbacks）。
|
||||
|
||||
## ref Callback 属性
|
||||
|
||||
React支持一种非常特殊的属性，你可以附加到任何的组件上。 `ref` 属性可以是一个回调函数，这个回调函数会在组件被挂载后立即执行。被引用的组件会被作为参数传递，回调函数可以用立即使用这个组件，或者保存引用以后使用（或者二者皆是）。
|
||||
|
||||
简单的说就是添加一个 `ref` 属性到任何从 `render` 返回的东西上：
|
||||
|
||||
```js
|
||||
render: function() {
|
||||
return (
|
||||
<TextInput
|
||||
ref={function(input) {
|
||||
if (input != null) {
|
||||
input.focus();
|
||||
}
|
||||
}} />
|
||||
);
|
||||
},
|
||||
```
|
||||
或者使用ES6的箭头函数:
|
||||
|
||||
```js
|
||||
render: function() {
|
||||
return <TextInput ref={(c) => this._input = c} />;
|
||||
},
|
||||
componentDidMount: function() {
|
||||
this._input.focus();
|
||||
},
|
||||
```
|
||||
|
||||
当连接一个ref到一个DOM组件如 `<div />`，你取回DOM节点;当连接一个ref到一个复合组件如 `<TextInput />`，你会得到React类的实例。在后一种情况下，你可以调用任何那个组件的类暴露的方法。
|
||||
|
||||
注意当被引用的组件卸载和每当ref变动，旧的ref将会被以`null`做参数调用。这阻止了在实例被保存的情况下的内存泄露，如第二个例子。注意当像在这里的例子，使用内联函数表达式写refs，React在每次更新都看到不同的函数对象，ref将会被以`null` 立即调用在它被以组件实例调用前。
|
||||
|
||||
## ref String 属性
|
||||
|
||||
React同样支持使用一个字符串（代替回调函数）在任意组件上作为一个 ref prop，尽管这个方法在这点上主要是遗留物。
|
||||
|
||||
1. 赋值`ref`属性为任何从`render` 返回的东西，比如：
|
||||
|
||||
```html
|
||||
<input ref="myInput" />
|
||||
```
|
||||
|
||||
2. 在其他一些代码中（典型的如事件处理的代码），通过`this.refs`访问 **支持实例(backing instance)**，如：
|
||||
|
||||
```javascript
|
||||
var input = this.refs.myInput;
|
||||
var inputValue = input.value;
|
||||
var inputRect = input.getBoundingClientRect();
|
||||
```
|
||||
|
||||
## 完整的示例
|
||||
|
||||
为了获取一个React组件的引用，你既可以使用 `this` 来获取当前的React组件，也可以使用一个 ref 来获取一个你拥有的组件的引用。他们像这样工作：
|
||||
|
||||
```javascript
|
||||
var MyComponent = React.createClass({
|
||||
handleClick: function() {
|
||||
// Explicitly focus the text input using the raw DOM API.
|
||||
this.myTextInput.focus();
|
||||
},
|
||||
render: function() {
|
||||
// The ref attribute adds a reference to the component to
|
||||
// this.refs when the component is mounted.
|
||||
return (
|
||||
<div>
|
||||
<input type="text" ref={(ref) => this.myTextInput = ref} />
|
||||
<input
|
||||
type="button"
|
||||
value="Focus the text input"
|
||||
onClick={this.handleClick}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<MyComponent />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
在这个例子中，我们获得一个对 text input **backing instance** 的引用 并且当按钮被点击时我们调用 `focus()`。
|
||||
|
||||
对于复合组件，引用会指向一个组件类的实例所以你可以调用那个类定义的任何方法。如果你需要访问那个组件的底层的DOM节点，你可以使用 [ReactDOM.findDOMNode](/react/docs/top-level-api.html#reactdom.finddomnode) 作为一个 `安全舱口` 但是我们不推荐这样，因为它打破了封装，在大多数情况下都有一个清晰的方法来以React模式构建你的代码.
|
||||
|
||||
## 总结
|
||||
|
||||
Refs是一种很好的发送消息给特定子实例(通过流式的Reactive `props` 和 `state`来做会不方便)的方式。它们应该，不论怎样，不是你的应用中数据流通的首选。默认情况下，使用响应式数据流，并为本身不是reactive的用例保存`ref`。
|
||||
|
||||
### 优点:
|
||||
|
||||
- 你可以在你的组件类里定义任何的公开方法（比如在一个Typeahead的重置方法）然后通过refs调用那些公开方法（比如`this.refs.myTypeahead.reset()`）。在大多数情况下，使用内建的React数据流更清晰，而不是使用强制的ref。
|
||||
- 实行DOM测量几乎总是需要接触到 "原生" 组件比如 `<input />` 并且通过 ref 访问它的底层DOM节点。 Refs 是唯一一个可靠的完成这件事的实际方式。
|
||||
- Refs 是为你自动管理的！如果子级被销毁了，它的ref也同样为你销毁了。这里不用担心内存（除非你做了一些疯狂的事情来自己保持一份引用）。
|
||||
|
||||
### 注意事项:
|
||||
|
||||
- *绝不* 在任何组件的 render 方法中访问 refs - 或者当任何组件的render方法还在调用栈上的任何地方运行时。
|
||||
- 如果你想要保留Google Closure Compiler advanced-mode crushing resilience，务必不要以属性的方式访问指明为字符串的属性。这意味这你必须用`this.refs['myRefString']`访问，如果你的ref被定义为`ref="myRefString"`。
|
||||
- 如果你没有用React写过数个程序，你的第一反应通常是打算试着用refs来在你的应用里"让事情发生"。如果是这样，花一些时间并且更精密的思考`state`应该属于组件层级的哪个位置。常常，这会变得清晰：正确的"拥有"那个属性的地方应该在层级的更高层上。把state放在那里 往往消除了任何使用`ref`s 来 "让事情发生"的渴望 - 作为替代，数据流通常将完成你的目标。
|
||||
- Refs 不能连接到一个 [stateless function（无状态函数）](/react/docs/reusable-components.html#stateless-functions)，因为这些组件没有支持实例。你总是可以包装一个无状态组件在一个标准复合组件里并且连接一个ref到这个复合组件。
|
||||
@@ -1,74 +0,0 @@
|
||||
---
|
||||
id: tooling-integration-it-IT
|
||||
title: Integrazione con Strumenti
|
||||
permalink: docs/tooling-integration-it-IT.html
|
||||
prev: more-about-refs-it-IT.html
|
||||
next: addons-it-IT.html
|
||||
---
|
||||
|
||||
Ciascun progetto utilizza un sistema differente per la build e il deploy di JavaScript. Abbiamo provato a rendere React il più possibile indipendente dall'ambiente di sviluppo.
|
||||
|
||||
## React
|
||||
|
||||
### React hosted su un CDN
|
||||
|
||||
Offriamo versioni di React su CDN [nella nostra pagina dei download](/react/downloads.html). Questi file precompilati usano il formato dei moduli UMD. Inserirli con un semplice tag `<script>` inietterà una variabile globale `React` nel tuo ambiente. Questo approccio dovrebbe funzionare senza alcuna configurazione in ambienti CommonJS ed AMD.
|
||||
|
||||
|
||||
### Usare il ramo master
|
||||
|
||||
Abbiamo istruzioni per compilare dal ramo `master` [nel nostro repositorio GitHub](https://github.com/facebook/react). Costruiamo un albero di moduli CommonJS sotto `build/modules` che puoi inserire in ogni ambiente o strumento di packaging che supporta CommonJS.
|
||||
|
||||
## JSX
|
||||
|
||||
### Trasformazione di JSX nel browser
|
||||
|
||||
Se preferisci usare JSX, Babel fornisce un [trasformatore ES6 e JSX nel browser per lo sviluppo](http://babeljs.io/docs/usage/browser/) chiamato browser.js che può essere incluso da una release npm `babel-core` oppure da [CDNJS](http://cdnjs.com/libraries/babel-core). Includi un tag `<script type="text/babel">` per scatenare il trasformatore JSX.
|
||||
|
||||
> Nota:
|
||||
>
|
||||
> Il trasformatore JSX nel browser è piuttosto grande e risulta in calcoli aggiuntivi lato client che possono essere evitati. Non utilizzare in produzione — vedi la sezione successiva.
|
||||
|
||||
|
||||
### In Produzione: JSX Precompilato
|
||||
|
||||
Se hai [npm](https://www.npmjs.com/), puoi eseguire `npm install -g babel`. Babel include il supporto per React v0.12 e v0.13. I tag sono automaticamente trasformati negli equivalenti `React.createElement(...)`, `displayName` è automaticamente desunto e aggiunto a tutte le classi React.createClass.
|
||||
|
||||
Questo strumento tradurrà i file che usano la sintassi JSX a file in semplice JavaScript che possono essere eseguiti direttamente dal browser. Inoltre, osserverà le directory per te e trasformerà automaticamente i file quando vengono modificati; ad esempio: `babel --watch src/ --out-dir lib/`.
|
||||
|
||||
In maniera predefinita, vengono trasformati i file JSX con un'estensione `.js`. Esegui `babel --help` per maggiori informazioni su come usare Babel.
|
||||
|
||||
Output di esempio:
|
||||
|
||||
```
|
||||
$ cat test.jsx
|
||||
var HelloMessage = React.createClass({
|
||||
render: function() {
|
||||
return <div>Ciao {this.props.name}</div>;
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(<HelloMessage name="John" />, mountNode);
|
||||
$ babel test.jsx
|
||||
"use strict";
|
||||
|
||||
var HelloMessage = React.createClass({
|
||||
displayName: "HelloMessage",
|
||||
|
||||
render: function render() {
|
||||
return React.createElement(
|
||||
"div",
|
||||
null,
|
||||
"Hello ",
|
||||
this.props.name
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode);
|
||||
```
|
||||
|
||||
|
||||
### Progetti Open Source Utili
|
||||
|
||||
La comunità open source ha creato strumenti che integrano JSX con diversi editor e sistemi di build. Consulta [integrazioni JSX ](https://github.com/facebook/react/wiki/Complementary-Tools#jsx-integrations) per una lista completa.
|
||||
@@ -1,41 +0,0 @@
|
||||
---
|
||||
id: tooling-integration
|
||||
title: インテグレーションツール
|
||||
permalink: docs/tooling-integration-ja-JP.html
|
||||
prev: more-about-refs-ja-JP.html
|
||||
next: addons-ja-JP.html
|
||||
---
|
||||
|
||||
全てのプロジェクトがJavaScriptをビルドしたりデプロイするのに様々なシステムを使用しています。私たちはReactをできるだけ環境不問にしようとしています。
|
||||
|
||||
## React
|
||||
|
||||
### CDNにホストされたReact
|
||||
|
||||
[ダウンロードページ](/react/downloads.html)でCDNにホストされたバージョンのReactが提供されています。それらの、事前にビルドされたファイルはUMDモジュールフォーマットを使用しています。簡単な `<script>` タグを使ってそれらを導入することで、あなたの環境でグローバルに `React` を使うことができます。CommonJSの外や、AMDの環境でも、それは動作するでしょう。
|
||||
|
||||
### masterを使う
|
||||
|
||||
[GitHubリポジトリに](https://github.com/facebook/react) `master` からビルドする説明が書いてあります。`build/modules` の下にCommonJSモジュールのツリーをビルドします。それらは、どんな環境やCommonJSがサポートされているパッケージングツールでも導入できます。
|
||||
|
||||
## JSX
|
||||
|
||||
### ブラウザ上でのJSXの変換
|
||||
|
||||
JSXを使用したい場合、[ダウンロードページに](/react/downloads.html)開発のためにブラウザ上でのJSXトランスフォーマーを提供しています。単純に `<script type="text/jsx">` をインクルードすることでJSXトランスフォーマーを使用できます。
|
||||
|
||||
> 注意:
|
||||
> ブラウザ上でのJSXトランスフォーマーをとても大きく、避けることのできるクライアントサイドの計算になりかねません。プロダクションでは使わないでください。詳細は次のセクションをご覧ください。
|
||||
|
||||
### プロダクションで使う場合:事前にコンパイルされたJSX
|
||||
|
||||
[npm](https://www.npmjs.com/)がインストールされている場合、コマンドラインの `jsx` ツールは単純に `npm install -g react-tools` コマンドを流せばインストールできます。このツールはJSXを使用しているファイルを直接ブラウザ上で動く生のJavaScriptファイルに変換します。また、ディレクトリをウォッチして、ファイルが変更されたら自動的に変換を行います。例えば、次のようなコマンドで。 `jsx --watch src/ build/`
|
||||
|
||||
デフォルトで、拡張子が `.js` のJSXファイルは変換されます。拡張子が `.jsx` のファイルを変換するには `jsx --extension jsx src/ build/` コマンドを使用してください。
|
||||
|
||||
このツールの使用方法についての詳細の情報については、 `jsx --help` コマンドを使用してください。
|
||||
|
||||
|
||||
### 役に立つオープンソースのプロジェクト
|
||||
|
||||
オープンソースコミュニティがJSXをいくつかのエディタやビルドシステムで使用するためのツールを作成しました。一覧は[JSXのインテグレーション](https://github.com/facebook/react/wiki/Complementary-Tools#jsx-integrations)を参照してください。
|
||||
@@ -1,80 +0,0 @@
|
||||
---
|
||||
id: tooling-integration-ko-KR
|
||||
title: 툴 통합
|
||||
permalink: docs/tooling-integration-ko-KR.html
|
||||
prev: more-about-refs-ko-KR.html
|
||||
next: addons-ko-KR.html
|
||||
---
|
||||
|
||||
모든 프로젝트는 JavaScript를 빌드, 배포할 때 다른 시스템을 사용합니다. 우리는 가능한 한 React를 환경에 구속받지 않도록 하려 노력했습니다.
|
||||
|
||||
## React
|
||||
|
||||
### CDN-호스트 React
|
||||
|
||||
[다운로드 페이지](/react/downloads.html)에서 React의 CDN 호스트 버전을 제공합니다. 이 미리 빌드된 파일들은 UMD 모듈 포맷을 사용합니다. 간단한 `<script>` 태그로 넣어보면 `React` 글로벌이 환경으로 주입(inject)될 것입니다. CommonJS와 AMD환경에서 별도의 작업 없이도 동작해야 합니다.
|
||||
|
||||
|
||||
### master 사용하기
|
||||
|
||||
[GitHub 저장소](https://github.com/facebook/react)의 `master`에 빌드 방법이 있습니다. 이는 `build/modules`에 CommonJS 모듈 트리를 빌드합니다. 이는 CommonJS를 지원하는 어떤 환경이나 패키징 툴에도 넣을 수 있습니다.
|
||||
|
||||
## JSX
|
||||
|
||||
### 브라우저에서 JSX 변환
|
||||
|
||||
JSX를 사용하신다면, Babel에서 browser.js라는 [개발용 브라우저 ES6, JSX 변환기](http://babeljs.io/docs/usage/browser/)를 제공합니다. 이는 `babel-core`의 npm 릴리스나 [CDNJS](http://cdnjs.com/libraries/babel-core)로 넣을 수 있습니다. `<script type="text/babel">`를 넣으면 JSX 변환기가 작동합니다.
|
||||
|
||||
> 주의:
|
||||
>
|
||||
> 브라우저 JSX 변환기는 꽤 크고 안 할 수도 있는 클라이언트 측 연산을 하게 됩니다. 프로덕션 환경에서 사용하지 마시고, 다음 단락을 보세요.
|
||||
|
||||
|
||||
### 상용화하기: 미리 컴파일된 JSX
|
||||
|
||||
[npm](https://www.npmjs.com/) 모듈을 가지고 있다면, `npm install -g babel-cli`를 실행할 수 있습니다. Babel은 React v0.12이상을 내장 지원합니다. 태그는 자동적으로 동등한 `React.createElement(...)`로 변환되며, `displayName`은 모든 `React.createClass` 호출에 자동으로 추론, 추가됩니다.
|
||||
|
||||
이 툴은 JSX 구문을 일반적인 JavaScript파일로 변환해 브라우져에서 바로 실행할 수 있도록 합니다. 디렉터리를 감시해 파일이 변경되었을 때 자동으로 변환하도록 할 수도 있습니다. 예를 들면 `babel --watch src/ --out-dir lib/` 이렇게요.
|
||||
|
||||
Babel 6부터 기본값으로 변환기가 포함되지 않게 되었습니다. 이는 `babel` 명령을 실행할 때나 `.babelrc`에 반드시 옵션을 지정해야 한다는 뜻입니다. React를 사용할 때 가장 일반적인 방법은 `es2015`, `react` 프리셋을 사용하는 것입니다. Babel의 변경에 대한 좀 더 자세한 정보는 [블로그에 올라온 Babel 6 공지 글](http://babeljs.io/blog/2015/10/29/6.0.0/)을 읽어보세요.
|
||||
|
||||
ES2015 문법과 React를 사용하려 할 경우의 예제입니다.
|
||||
|
||||
```
|
||||
npm install babel-preset-es2015 babel-preset-react
|
||||
babel --presets es2015,react --watch src/ --out-dir lib/
|
||||
```
|
||||
|
||||
기본적으로는 JSX 파일들은 `.js` 확장자로 변환됩니다. 바벨을 어떻게 사용하는지 더 자세하게 알고싶으시면 `babel --help`를 실행해 보세요.
|
||||
|
||||
출력 예:
|
||||
|
||||
```
|
||||
$ cat test.jsx
|
||||
var HelloMessage = React.createClass({
|
||||
render: function() {
|
||||
return <div>Hello {this.props.name}</div>;
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(<HelloMessage name="John" />, mountNode);
|
||||
$ babel test.jsx
|
||||
"use strict";
|
||||
var HelloMessage = React.createClass({
|
||||
displayName: "HelloMessage",
|
||||
render: function render() {
|
||||
return React.createElement(
|
||||
"div",
|
||||
null,
|
||||
"Hello ",
|
||||
this.props.name
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode);
|
||||
```
|
||||
|
||||
### 도움되는 오픈소스 프로젝트들
|
||||
|
||||
오픈 소스 커뮤니티는 JSX와 연동하는 여러 에디터와 빌드 시스템을 만들었습니다. 전 목록은 [JSX 연동](https://github.com/facebook/react/wiki/Complementary-Tools#jsx-integrations)에서 보세요.
|
||||
@@ -1,13 +0,0 @@
|
||||
---
|
||||
id: tooling-integration
|
||||
title: Tooling Integration
|
||||
permalink: docs/tooling-integration.html
|
||||
prev: more-about-refs.html
|
||||
next: language-tooling.html
|
||||
---
|
||||
|
||||
We've tried to make React as environment-agnostic as possible. People use React in a variety of languages (JavaScript, TypeScript, ClojureScript, etc) and in a variety of environments (web, iOS, Android, NodeJS, Nashorn, etc). There are many tools to help you build great applications. In these sections we introduce some of the tools that are most commonly used together with React.
|
||||
|
||||
* [Language Tooling](/react/docs/language-tooling.html) describes how to set up tools like Babel to transpile JSX for a better development experience.
|
||||
* [Package Management](/react/docs/package-management.html) describes how to configure React as a dependency of your project.
|
||||
* [Server-side Environments](/react/docs/environments.html) describes how to configure your environment for server-side rendering with React.
|
||||
@@ -1,13 +0,0 @@
|
||||
---
|
||||
id: tooling-integration-zh-CN
|
||||
title: 工具集成
|
||||
permalink: docs/tooling-integration-zh-CN.html
|
||||
prev: more-about-refs-zh-CN.html
|
||||
next: addons-zh-CN.html
|
||||
---
|
||||
|
||||
我们尽可能使 React 与环境无关。大家可以在各种语言（JavaScript, TypeScript, ClojureScript, etc）与各种环境(web, iOS, Android, NodeJS, Nashorn, etc)中使用 React。这里有很多工具来帮助你创建优秀的应用。在这一节中我们介绍一些在 React 中最流行的工具。
|
||||
|
||||
* [语言工具](/react/docs/language-tooling.html) 描述如何设置例如 Babel 的工具来编译 JSX。
|
||||
* [包管理](/react/docs/package-management.html) 讲述如何设置将 React 配置为项目中的依赖。
|
||||
* [服务端环境](/react/docs/environments.html) 讲述如何为 React 配置服务端渲染环境。
|
||||
@@ -1,77 +0,0 @@
|
||||
---
|
||||
id: language-tooling
|
||||
title: Language Tooling
|
||||
permalink: docs/language-tooling.html
|
||||
prev: tooling-integration.html
|
||||
next: package-management.html
|
||||
---
|
||||
|
||||
## ES2015 with JSX
|
||||
|
||||
### In-browser JSX Transform
|
||||
|
||||
If you like using JSX, Babel 5 provided an in-browser ES2015 and JSX transformer for development called browser.js that can be included from [CDNJS](https://cdnjs.com/libraries/babel-core/5.8.34). Include a `<script type="text/babel">` tag to engage the JSX transformer.
|
||||
|
||||
> Note:
|
||||
>
|
||||
> The in-browser JSX transformer is fairly large and results in extraneous computation client-side that can be avoided. Do not use it in production — see the next section.
|
||||
|
||||
### Productionizing: Precompiled JSX
|
||||
|
||||
If you have [npm](https://www.npmjs.com/), you can run `npm install -g babel-cli`. Babel has built-in support for React v0.12+. Tags are automatically transformed to their equivalent `React.createElement(...)`, `displayName` is automatically inferred and added to all `React.createClass` calls.
|
||||
|
||||
This tool will translate files that use JSX syntax to plain JavaScript files that can run directly in the browser. It will also watch directories for you and automatically transform files when they are changed; for example: `babel --watch src/ --out-dir lib/`.
|
||||
|
||||
Beginning with Babel 6, there are no transforms included by default. This means that options must be specified when running the `babel` command, or a `.babelrc` must specify options. Additional packages must also be installed which bundle together a number of transforms, called presets. The most common use when working with React will be to include the `es2015` and `react` presets. More information about the changes to Babel can be found in [their blog post announcing Babel 6](http://babeljs.io/blog/2015/10/29/6.0.0).
|
||||
|
||||
Here is an example of what you will do if using ES2015 syntax and React:
|
||||
|
||||
```
|
||||
npm install babel-preset-es2015 babel-preset-react
|
||||
babel --presets es2015,react --watch src/ --out-dir lib/
|
||||
```
|
||||
|
||||
By default JSX files with a `.js` extension are transformed. Run `babel --help` for more information on how to use Babel.
|
||||
|
||||
Example output:
|
||||
|
||||
```
|
||||
$ cat test.js
|
||||
function HelloMessage(props) {
|
||||
return <div>Hello {props.name}</div>;
|
||||
}
|
||||
|
||||
ReactDOM.render(<HelloMessage name="John" />, mountNode);
|
||||
|
||||
$ babel test.js
|
||||
"use strict";
|
||||
|
||||
function HelloMessage(props) {
|
||||
return React.createElement(
|
||||
"div",
|
||||
null,
|
||||
"Hello ",
|
||||
props.name
|
||||
);
|
||||
}
|
||||
|
||||
ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode);
|
||||
```
|
||||
|
||||
### Helpful Open-Source Projects
|
||||
|
||||
The open-source community has built tools that integrate JSX with several editors and build systems. See [JSX integrations](https://github.com/facebook/react/wiki/Complementary-Tools#jsx-integrations) for the full list.
|
||||
|
||||
## Flow
|
||||
|
||||
Flow is a JavaScript type checker released by Facebook, and it supports JSX. For more info, checkout the [Flow homepage](http://flowtype.org/).
|
||||
|
||||
|
||||
## TypeScript
|
||||
|
||||
TypeScript is a type-checker and transpiler that supports type-checking React and JSX.
|
||||
For more info, check out their guide on [getting started with React and Webpack](https://www.typescriptlang.org/docs/handbook/react-&-webpack.html), or learn more about [TypeScript's JSX support](https://www.typescriptlang.org/docs/handbook/jsx.html).
|
||||
|
||||
To learn more about TypeScript in general, visit the [TypeScript homepage](https://www.typescriptlang.org/).
|
||||
|
||||
|
||||
@@ -1,119 +0,0 @@
|
||||
---
|
||||
id: package-management
|
||||
title: Package Management
|
||||
permalink: docs/package-management.html
|
||||
prev: language-tooling.html
|
||||
next: environments.html
|
||||
---
|
||||
|
||||
## CDN-hosted React
|
||||
|
||||
We provide CDN-hosted versions of React [on our download page](/react/downloads.html). These pre-built files use the UMD module format. Dropping them in with a simple `<script>` tag will inject the `React` and `ReactDOM` globals into your environment. It should also work out-of-the-box in CommonJS and AMD environments.
|
||||
|
||||
|
||||
## Using React from npm
|
||||
|
||||
You can use React with a CommonJS module system like [browserify](http://browserify.org/) or [webpack](https://webpack.github.io/). Use the [`react`](https://www.npmjs.com/package/react) and [`react-dom`](https://www.npmjs.com/package/react-dom) npm packages.
|
||||
|
||||
```js
|
||||
// main.js
|
||||
var React = require('react');
|
||||
var ReactDOM = require('react-dom');
|
||||
|
||||
ReactDOM.render(
|
||||
<h1>Hello, world!</h1>,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
Configure [babel](https://babeljs.io/) with a `.babelrc` file:
|
||||
|
||||
```json
|
||||
{ "presets": ["react"] }
|
||||
```
|
||||
|
||||
> Note:
|
||||
>
|
||||
> If you are using ES2015, you will want to also use the `babel-preset-es2015` package.
|
||||
|
||||
|
||||
To install React DOM and build your bundle with browserify:
|
||||
|
||||
```sh
|
||||
$ npm install --save react react-dom babelify babel-preset-react
|
||||
$ browserify -t [ babelify ] main.js -o bundle.js
|
||||
```
|
||||
|
||||
To install React DOM and build your bundle with webpack:
|
||||
|
||||
```sh
|
||||
$ npm install --save react react-dom babel-preset-react babel-loader babel-core
|
||||
$ webpack main.js bundle.js --module-bind 'js=babel-loader'
|
||||
```
|
||||
|
||||
> Note:
|
||||
>
|
||||
> If you are using ES2015, you will want to also use the `babel-preset-es2015` package.
|
||||
|
||||
**Note:** by default, React will be in development mode, which is slower, and not advised for production. To use React in production mode, set the environment variable `NODE_ENV` to `production` (using envify or webpack's DefinePlugin). For example:
|
||||
|
||||
```js
|
||||
new webpack.DefinePlugin({
|
||||
"process.env": {
|
||||
NODE_ENV: JSON.stringify("production")
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
Update your HTML file as below:
|
||||
|
||||
```html{9}
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Hello React!</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="example"></div>
|
||||
<script src="bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Using React from Bower
|
||||
|
||||
Bower is a package manager optimized for the front-end development. If multiple packages depend on a package - jQuery for example - Bower will download jQuery just once. This is known as a flat dependency graph and it helps reduce page load. For more info, visit [http://bower.io/](http://bower.io/).
|
||||
|
||||
If you'd like to use bower, it's as easy as:
|
||||
|
||||
```
|
||||
bower install --save react
|
||||
```
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Hello React!</title>
|
||||
<script src="bower_components/react/react.js"></script>
|
||||
<script src="bower_components/react/react-dom.js"></script>
|
||||
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="example"></div>
|
||||
<script type="text/babel">
|
||||
ReactDOM.render(
|
||||
<h1>Hello, world!</h1>,
|
||||
document.getElementById('example')
|
||||
);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
## Using master
|
||||
|
||||
We have instructions for building from `master` [in our GitHub repository](https://github.com/facebook/react).
|
||||
@@ -1,80 +0,0 @@
|
||||
---
|
||||
id: environments
|
||||
title: Server-side Environments
|
||||
permalink: docs/environments.html
|
||||
prev: package-management.html
|
||||
next: addons.html
|
||||
---
|
||||
|
||||
One of the great things about React is that it doesn't require the DOM as a dependency, which means it is possible to render a React application on the server and send the HTML markup down to the client. There are a few things that React expects, so this guide will help you get started in your preferred environment.
|
||||
|
||||
|
||||
## Node.js
|
||||
|
||||
[Node.js](http://nodejs.org/) is a popular JavaScript runtime that comes with an extensive core library and support for installing packages from npm to expand on the basic functionality. As we've described elsewhere in the documentation, you can install `react` and `react-dom` from npm.
|
||||
|
||||
Example:
|
||||
|
||||
```js
|
||||
var React = require('react');
|
||||
var ReactDOMServer = require('react-dom/server');
|
||||
|
||||
var element = React.createElement('div', null, 'Hello World!');
|
||||
console.log(ReactDOMServer.renderToString(element));
|
||||
```
|
||||
|
||||
If you use JSX, you may want to pre-compile your components. Alternatively you may want to consider using [Babel's require hook](https://babeljs.io/docs/usage/require/) or [`babel-node`](https://babeljs.io/docs/usage/cli/#babel-node).
|
||||
|
||||
> Note:
|
||||
>
|
||||
> Some versions of Node.js have an `Object.assign` implementation that does not preserve key order. This can cause errors when validating the markup, creating a warning that says "React attempted to reuse markup in a container but the checksum was invalid". If you run into this issue, you can override `Object.assign` to use a polyfill that preserves key order. For more details, see [Issue #6451](https://github.com/facebook/react/issues/6451).
|
||||
|
||||
C#
|
||||
==
|
||||
|
||||
Support for server-side component rendering and JSX compilation (via Babel) in a .NET Framework / ASP.NET environment is provided through our [ReactJS.NET](http://reactjs.net/) project.
|
||||
|
||||
|
||||
## Nashorn
|
||||
|
||||
Nashorn is a lightweight high-performance JavaScript runtime that runs within the JVM. React should run out of the box in Java 8+.
|
||||
|
||||
Example:
|
||||
|
||||
```java
|
||||
import java.io.IOException;
|
||||
import java.io.InputStream;
|
||||
import java.io.FileReader;
|
||||
|
||||
import javax.script.ScriptEngine;
|
||||
import javax.script.ScriptEngineManager;
|
||||
import javax.script.ScriptException;
|
||||
|
||||
public class ReactRender
|
||||
{
|
||||
public static void main(String[] args) throws ScriptException, IOException {
|
||||
ScriptEngine nashorn = new ScriptEngineManager().getEngineByName("nashorn");
|
||||
|
||||
// These files can be downloaded as a part of the starter kit
|
||||
// from https://facebook.github.io/react
|
||||
nashorn.eval(new FileReader("path/to/react.js"));
|
||||
nashorn.eval(new FileReader("path/to/react-dom-server.js"));
|
||||
|
||||
System.out.println(nashorn.eval(
|
||||
"ReactDOMServer.renderToString(" +
|
||||
"React.createElement('div', null, 'Hello World!')" +
|
||||
");"
|
||||
));
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
If your application uses npm packages, or you want to transform JSX in Nashorn, you will need to do some additional environment setup. The following resources may be helpful in getting you started:
|
||||
|
||||
* [http://winterbe.com/posts/2015/02/16/isomorphic-react-webapps-on-the-jvm/](http://winterbe.com/posts/2015/02/16/isomorphic-react-webapps-on-the-jvm/)
|
||||
* [https://github.com/nodyn/jvm-npm](https://github.com/nodyn/jvm-npm)
|
||||
* [https://gist.github.com/aesteve/883e0fd33390451cb8eb](https://gist.github.com/aesteve/883e0fd33390451cb8eb)
|
||||
|
||||
> Note:
|
||||
>
|
||||
> Using Babel within Nashorn will require Java 8u72+, as update 72 fixed [JDK-8135190](https://bugs.openjdk.java.net/browse/JDK-8135190).
|
||||
@@ -1,25 +0,0 @@
|
||||
---
|
||||
id: addons-it-IT
|
||||
title: Add-ons
|
||||
permalink: docs/addons-it-IT.html
|
||||
prev: tooling-integration-it-IT.html
|
||||
next: animation-it-IT.html
|
||||
---
|
||||
|
||||
`React.addons` è il luogo in cui parcheggiamo utili strumenti per costruire applicazioni React. **Questi strumenti devono essere considerati sperimentali** ma saranno eventualmente inclusi nel nucleo o una libreria ufficiale di utilities:
|
||||
|
||||
- [`TransitionGroup` e `CSSTransitionGroup`](animation-it-IT.html), per gestire animazioni e transizioni che sono solitamente difficili da implementare, come ad esempio prima della rimozione di un componente.
|
||||
- [`LinkedStateMixin`](two-way-binding-helpers-it-IT.html), per semplificare la coordinazione tra lo stato del componente e l'input dell'utente in un modulo.
|
||||
- [`cloneWithProps`](clone-with-props-it-IT.html), per eseguire una copia superficiale di componenti React e cambiare le loro proprietà.
|
||||
- [`createFragment`](create-fragment-it-IT.html), per creare un insieme di figli con chiavi esterne.
|
||||
- [`update`](update-it-IT.html), una funzione di utilità che semplifica la gestione di dati immutabili in JavaScript.
|
||||
- [`PureRenderMixin`](pure-render-mixin-it-IT.html), un aiuto per incrementare le prestazioni in certe situazioni.
|
||||
|
||||
Gli add-ons elencati di seguito si trovano esclusivamente nella versione di sviluppo (non minificata) di React:
|
||||
|
||||
- [`TestUtils`](test-utils-it-IT.html), semplici helper per scrivere dei test case (soltanto nella build non minificata).
|
||||
- [`Perf`](perf-it-IT.html), per misurare le prestazioni e fornirti suggerimenti per l'ottimizzazione.
|
||||
|
||||
Per ottenere gli add-on, usa `react-with-addons.js` (e la sua controparte non minificata) anziché il solito `react.js`.
|
||||
|
||||
Quandi si usa il pacchetto react di npm, richiedi semplicemente `require('react/addons')` anziché `require('react')` per ottenere React con tutti gli add-on.
|
||||
@@ -1,24 +0,0 @@
|
||||
---
|
||||
id: addons
|
||||
title: アドオン
|
||||
permalink: docs/addons-ja-JP.html
|
||||
prev: tooling-integration-ja-JP.html
|
||||
next: animation-ja-JP.html
|
||||
---
|
||||
|
||||
`React.addons` はReactのアプリケーションを作成する上で便利なユーティリティを置いておくための場所です。 **それらは実験的なものであると考えられるべきです。** しかし、ゆくゆくはコアに入ってくるか、以下のような承認されたユーティリティとなるでしょう。
|
||||
|
||||
- アニメーションや推移を扱う[`TransitionGroup` や `CSSTransitionGroup`](animation-ja-JP.html)は多くの場合実行するのが簡単ではありません。例えば、コンポーネントの削除の前などは。
|
||||
- [`LinkedStateMixin`](two-way-binding-helpers-ja-JP.html)はユーザのフォームの入力データとコンポーネントのstateの間の調整を単純化します。
|
||||
- [`cloneWithProps`](clone-with-props-ja-JP.html)はReactのコンポーネントのシャローコピーを作成したり、それらのpropsを変更したりします。
|
||||
- [`createFragment`](create-fragment-ja-JP.html)は外部のキー化された子要素のセットを作成します。
|
||||
- [`update`](update-ja-JP.html)はJavaScriptでイミュータブルなデータを扱うことを簡単にするヘルパーの関数です。
|
||||
- [`PureRenderMixin`](pure-render-mixin-ja-JP.html)は特定のシチュエーションでパフォーマンスを改善します。
|
||||
以下のアドオンはReactだけの開発版（縮小されていない版）です。
|
||||
|
||||
- [`TestUtils`](test-utils-ja-JP.html)はテストケースを記述する単純なヘルパーです（縮小されていないビルドのみ）。
|
||||
- [`Perf`](perf-ja-JP.html)はパフォーマンスを測り、どこを最適化するかのヒントを与えます。
|
||||
|
||||
アドオンを使うには、共通の `react.js` を使うよりも `react-with-addons.js` （とその縮小されたもの）を使ってください。
|
||||
|
||||
npmからReactのパッケージを使う際には、Reactと全てのアドオンを使うために `require('react')` を使う代わりに、単純に `require('react/addons')` を使ってください。
|
||||
@@ -1,23 +0,0 @@
|
||||
---
|
||||
id: addons-ko-KR
|
||||
title: 애드온
|
||||
permalink: docs/addons-ko-KR.html
|
||||
prev: tooling-integration-ko-KR.html
|
||||
next: animation-ko-KR.html
|
||||
---
|
||||
|
||||
React 애드온은 React 앱을 만드는 데 유용한 유틸리티의 모음입니다. **실험적인 기능으로 취급해야 하고** 코어보다 더 자주 변경될 수 있습니다.
|
||||
|
||||
- [`TransitionGroup` 과 `CSSTransitionGroup`](animation-ko-KR.html)은 예를 들면 컴포넌트 삭제 직전의 트랜지션 처럼, 구현하기 까다로운 애니메이션과 트랜지션을 다룹니다.
|
||||
- [`LinkedStateMixin`](two-way-binding-helpers-ko-KR.html)는 사용자 입력과 컴포넌트의 state사이의 조정(coordination)을 단순화 합니다.
|
||||
- [`cloneWithProps`](clone-with-props-ko-KR.html)는 React 컴포넌트를 얕은 복사를 하고 props를 변경합니다.
|
||||
- [`createFragment`](create-fragment-ko-KR.html)는 외부에서 키가 할당된 자식들의 모음을 만듭니다.
|
||||
- [`update`](update-ko-KR.html)는 JavaScript안에서 불변 데이터를 다루기 쉽게하는 헬퍼 함수입니다.
|
||||
- [`PureRenderMixin`](pure-render-mixin-ko-KR.html)는 특정 상황에서 성능을 향상시켜 줍니다.
|
||||
|
||||
밑에 있는 애드온은 React 개발 (압축되지 않은) 버전에서만 사용가능 합니다.
|
||||
|
||||
- [`TestUtils`](test-utils-ko-KR.html)는 테스트 케이스를 적기 위한 간단한 헬퍼입니다. (압축되지 않은 빌드에서만 사용가능)
|
||||
- [`Perf`](perf-ko-KR.html)는 성능을 측정하고, 최적화를 위한 힌트를 제공합니다.
|
||||
|
||||
애드온을 쓰려면, npm에서 각각 설치하세요.(예를 들면, `npm install react-addons-pure-render-mixin`) npm을 사용하지 않는 애드온 사용법에 대한 지원은 없습니다.
|
||||
@@ -1,24 +0,0 @@
|
||||
---
|
||||
id: addons
|
||||
title: Add-ons
|
||||
permalink: docs/addons.html
|
||||
prev: environments.html
|
||||
next: animation.html
|
||||
---
|
||||
|
||||
The React add-ons are a collection of useful utility modules for building React apps. **These should be considered experimental** and tend to change more often than the core.
|
||||
|
||||
- [`TransitionGroup` and `CSSTransitionGroup`](animation.html), for dealing with animations and transitions that are usually not simple to implement, such as before a component's removal.
|
||||
- [`LinkedStateMixin`](two-way-binding-helpers.html), to simplify the coordination between user's form input data and the component's state.
|
||||
- [`cloneWithProps`](clone-with-props.html), to make shallow copies of React components and change their props.
|
||||
- [`createFragment`](create-fragment.html), to create a set of externally-keyed children.
|
||||
- [`update`](update.html), a helper function that makes dealing with immutable data in JavaScript easier.
|
||||
- [`PureRenderMixin`](pure-render-mixin.html), a performance booster under certain situations.
|
||||
- [`shallowCompare`](shallow-compare.html), a helper function that performs a shallow comparison for props and state in a component to decide if a component should update.
|
||||
|
||||
The add-ons below are in the development (unminified) version of React only:
|
||||
|
||||
- [`TestUtils`](test-utils.html), simple helpers for writing test cases.
|
||||
- [`Perf`](perf.html), a performance profiling tool for finding optimization opportunities.
|
||||
|
||||
To get the add-ons, install them individually from npm (e.g., `npm install react-addons-pure-render-mixin`). We don't support using the addons if you're not using npm.
|
||||
@@ -1,24 +0,0 @@
|
||||
---
|
||||
id: addons-zh-CN
|
||||
title: 插件
|
||||
permalink: docs/addons-zh-CN.html
|
||||
prev: tooling-integration-zh-CN.html
|
||||
next: animation-zh-CN.html
|
||||
---
|
||||
|
||||
React插件是一系列的用来构建 React app的有用模块。 **这些应该被认为是实验性的** 并趋向于比core变动更频繁。
|
||||
|
||||
- [`TransitionGroup` 和 `CSSTransitionGroup`](animation.html), 用来处理通常不能简单实现的动画和转换，比如在组件移除之前。
|
||||
- [`LinkedStateMixin`](two-way-binding-helpers.html), 简化用户的表单输入数据与组件状态的协调。
|
||||
- [`cloneWithProps`](clone-with-props.html), 创建React组件的浅拷贝并改变它们的props。
|
||||
- [`createFragment`](create-fragment.html), 创建一组外键的子级。
|
||||
- [`update`](update.html), 一个使不可变数据在JavaScript里更易处理的辅助函数。
|
||||
- [`PureRenderMixin`](pure-render-mixin.html), 一个特定情况下的性能优化器。
|
||||
- [`shallowCompare`](shallow-compare.html), 一个辅助函数，用来对 props 和 state在组件里 执行浅比较 以决定一个组件是否应该更新。
|
||||
|
||||
下面的插件只存在开发版(未压缩)React中：
|
||||
|
||||
- [`TestUtils`](test-utils.html), 用于写测试用例的简单的辅助工具。
|
||||
- [`Perf`](perf.html), 一个用于查找优化机会的性能分析工具。
|
||||
|
||||
要获取插件，单独从npm安装他们(例如 `npm install react-addons-pure-render-mixin`).我们不支持使用插件如果你没有用npm.
|
||||
@@ -1,261 +0,0 @@
|
||||
---
|
||||
id: animation-it-IT
|
||||
title: Animazioni
|
||||
permalink: docs/animation-it-IT.html
|
||||
prev: addons-it-IT.html
|
||||
next: two-way-binding-helpers-it-IT.html
|
||||
---
|
||||
|
||||
React offre un componente addon `ReactTransitionGroup` come una API di basso livello per le animazioni, e un `ReactCSSTransitionGroup` per implementare facilmente animazioni e transizioni CSS di base.
|
||||
|
||||
## API di Alto Livello: `ReactCSSTransitionGroup`
|
||||
|
||||
`ReactCSSTransitionGroup` è basato su `ReactTransitionGroup` ed è una maniera semplice di effettuare transizioni e animazioni CSS quando un componente React viene aggiunto o rimosso dal DOM. È ispirato all'eccellente libreria [ng-animate](http://www.nganimate.org/).
|
||||
|
||||
### Per Cominciare
|
||||
|
||||
`ReactCSSTransitionGroup` è l'interfaccia a `ReactTransitions`. Questo è un semplice elemento che racchiude tutti i componenti che desideri animare. Ecco un esempio in cui facciamo apparire e scomparire gli elementi di una lista.
|
||||
|
||||
```javascript{28-30}
|
||||
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
|
||||
|
||||
var TodoList = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {items: ['ciao', 'mondo', 'clicca', 'qui']};
|
||||
},
|
||||
handleAdd: function() {
|
||||
var newItems =
|
||||
this.state.items.concat([prompt('Scrivi del testo')]);
|
||||
this.setState({items: newItems});
|
||||
},
|
||||
handleRemove: function(i) {
|
||||
var newItems = this.state.items;
|
||||
newItems.splice(i, 1);
|
||||
this.setState({items: newItems});
|
||||
},
|
||||
render: function() {
|
||||
var items = this.state.items.map(function(item, i) {
|
||||
return (
|
||||
<div key={item} onClick={this.handleRemove.bind(this, i)}>
|
||||
{item}
|
||||
</div>
|
||||
);
|
||||
}.bind(this));
|
||||
return (
|
||||
<div>
|
||||
<button onClick={this.handleAdd}>Aggiungi Elemento</button>
|
||||
<ReactCSSTransitionGroup
|
||||
transitionName="example"
|
||||
transitionEnterTimeout={500}
|
||||
transitionLeaveTimeout={300}>
|
||||
{items}
|
||||
</ReactCSSTransitionGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
```
|
||||
> Nota:
|
||||
>
|
||||
> Devi fornire [l'attributo `key`](/react/docs/multiple-components.html#dynamic-children) per tutti i figli di `ReactCSSTransitionGroup`, anche quando stai visualizzando un singolo elemento. Questo è il modo in cui React determina quali figli sono stati aggiunti, rimossi, o sono rimasti.
|
||||
|
||||
In questo componente, quando un nuovo elemento viene aggiunto a `ReactCSSTransitionGroup` riceverà la classe CSS `example-enter` e la classe CSS `example-enter-active` allo scatto successivo. Questa è una convenzione basata sul valore della proprietà `transitionName`.
|
||||
|
||||
Puoi usare queste classi per scatenare una animazione o transizione CSS. Ad esempio, prova ad aggiungere questo CSS e aggiungere un nuovo elemento alla lista:
|
||||
|
||||
```css
|
||||
.example-enter {
|
||||
opacity: 0.01;
|
||||
}
|
||||
|
||||
.example-enter.example-enter-active {
|
||||
opacity: 1;
|
||||
transition: opacity 500ms ease-in;
|
||||
}
|
||||
|
||||
.example-leave {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.example-leave.example-leave-active {
|
||||
opacity: 0.01;
|
||||
transition: opacity 300ms ease-in;
|
||||
}
|
||||
```
|
||||
|
||||
Ti accorgerai che la durata delle animazioni devono essere specificate sia nel CSS che nel metodo render; questo suggerisce a React quando rimuovere le classi di animazione dall'elemento e -- se sta venendo rimosso -- quando rimuovere l'elemento dal DOM.
|
||||
|
||||
### Animare il Montaggio Iniziale
|
||||
|
||||
`ReactCSSTransitionGroup` fornisce la proprietà opzionale `transitionAppear`, per aggiungere una fase aggiuntiva di transizione al montaggio iniziale del componente. In genere non c'è alcuna fase di transizione al montaggio iniziale in quanto il valore predefinito di `transitionAppear` è `false`. L'esempio seguente passa la proprietà `transitionAppear` con il valore `true`.
|
||||
|
||||
```javascript{3-5}
|
||||
render: function() {
|
||||
return (
|
||||
<ReactCSSTransitionGroup
|
||||
transitionName="example"
|
||||
transitionAppear={true}
|
||||
transitionAppearTimeout={500}>
|
||||
<h1>Dissolvenza al Montaggio Iniziale</h1>
|
||||
</ReactCSSTransitionGroup>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
Durante il montaggio iniziale `ReactCSSTransitionGroup` otterrà la classe CSS `example-appear` e la classe CSS `example-appear-active` allo scatto successivo.
|
||||
|
||||
```css
|
||||
.example-appear {
|
||||
opacity: 0.01;
|
||||
}
|
||||
|
||||
.example-appear.example-appear-active {
|
||||
opacity: 1;
|
||||
transition: opacity .5s ease-in;
|
||||
}
|
||||
```
|
||||
|
||||
Al montaggio iniziale, tutti i figli di `ReactCSSTransitionGroup` saranno marcati come `appear` ma non `enter`. Tuttavia, tutti i figli aggiunti in seguito ad un `ReactCSSTransitionGroup` esistente saranno marcati come `enter` ma non `appear`.
|
||||
|
||||
> Nota:
|
||||
>
|
||||
> La proprietà `transitionAppear` è stata aggiunta a `ReactCSSTransitionGroup` nella versione `0.13`. Per mantenere la compatibilità con le versioni precedenti, il valore predefinito è impostato a `false`.
|
||||
|
||||
### Classi Personalizzate
|
||||
|
||||
È anche possibile usare nomi di classi personalizzate per ciascuna delle fasi delle tue transizioni. Anziché passare una stringa come valore di `transitionName` puoi assegnare un oggetto che contiene i nomi delle classi `enter` o `leave`, oppure un oggetto contenente i nomi delle classi per `enter`, `enter-active`, `leave-active`e `leave`. Se vengono forniti soltanto i nomi delle classi enter e leave, le classi per enter-active e leave-active saranno determinate aggiungendo il suffisso '-active' ai rispettivi nomi delle classi. Ecco due esempi che usano le classi personalizzate:
|
||||
|
||||
```javascript
|
||||
...
|
||||
<ReactCSSTransitionGroup
|
||||
transitionName={ {
|
||||
enter: 'enter',
|
||||
enterActive: 'enterActive',
|
||||
leave: 'leave',
|
||||
leaveActive: 'leaveActive',
|
||||
appear: 'appear',
|
||||
appearActive: 'appearActive'
|
||||
} }>
|
||||
{item}
|
||||
</ReactCSSTransitionGroup>
|
||||
|
||||
<ReactCSSTransitionGroup
|
||||
transitionName={ {
|
||||
enter: 'enter',
|
||||
leave: 'leave',
|
||||
appear: 'appear'
|
||||
} }>
|
||||
{item2}
|
||||
</ReactCSSTransitionGroup>
|
||||
...
|
||||
```
|
||||
|
||||
### I Gruppi di Animazioni Devono Essere Montati per Funzionare
|
||||
|
||||
Per applicare le transizioni ai suoi figli, il `ReactCSSTransitionGroup` deve già essere montato nel DOM oppure la proprietà `transitionAppear` deve essere impostata a `true`. L'esempio seguente non funziona, poiché `ReactCSSTransitionGroup` sta venendo montato assieme al nuovo elemento, anziché il nuovo elemento venire montato dentro di esso. Confronta questo esempio con la sezione precedente [Per Cominciare](#getting-started) per notare la differenza.
|
||||
|
||||
```javascript{12-15}
|
||||
render: function() {
|
||||
var items = this.state.items.map(function(item, i) {
|
||||
return (
|
||||
<div key={item} onClick={this.handleRemove.bind(this, i)}>
|
||||
<ReactCSSTransitionGroup transitionName="example">
|
||||
{item}
|
||||
</ReactCSSTransitionGroup>
|
||||
</div>
|
||||
);
|
||||
}, this);
|
||||
return (
|
||||
<div>
|
||||
<button onClick={this.handleAdd}>Aggiungi Elemento</button>
|
||||
{items}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Animare Uno o Nessun Elemento
|
||||
|
||||
Nell'esempio precedente, abbiamo visualizzato una lista di elementi in `ReactCSSTransitionGroup`. Tuttavia, i figli di `ReactCSSTransitionGroup` possono anche essere un solo o nessun elemento. Questo rende possibile animare un singolo elemento che viene aggiunto o rimosso. Similarmente, puoi animare un nuovo elemento che sistituisce l'elemento corrente. Ad esempio, possiamo implementare un semplice carosello di immagini come segue:
|
||||
|
||||
```javascript{10-12}
|
||||
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
|
||||
|
||||
var ImageCarousel = React.createClass({
|
||||
propTypes: {
|
||||
imageSrc: React.PropTypes.string.isRequired
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<div>
|
||||
<ReactCSSTransitionGroup
|
||||
transitionName="carousel"
|
||||
transitionEnterTimeout={300}
|
||||
transitionLeaveTimeout={300}>
|
||||
<img src={this.props.imageSrc} key={this.props.imageSrc} />
|
||||
</ReactCSSTransitionGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### Disattivare le Animazioni
|
||||
|
||||
Se lo desideri, puoi disattivare le animazioni `enter` o `leave`. Ad esempio, a volte potresti volere un'animazione per `enter` ma non una per `leave`, ma `ReactCSSTransitionGroup` attende che l'animazione sia completata prima di rimuovere il tuo nodo DOM. Puoi aggiungere le proprietà `transitionEnter={false}` o `transitionLeave={false}` a `ReactCSSTransitionGroup` per disattivare le rispettive animazioni.
|
||||
|
||||
> Nota:
|
||||
>
|
||||
> Quando si usa `ReactCSSTransitionGroup`, non c'è alcun modo per cui i tuoi componenti vengano avvisati quando la transizione è terminata o per effettuare una logica complessa durante l'animazione. Se vuoi un controllo più fine, puoi usare la API di basso livello `ReactTransitionGroup` che fornisce degli hook che puoi utilizzare per effettuare transizioni personalizzate.
|
||||
|
||||
## API di Basso Livello: `ReactTransitionGroup`
|
||||
|
||||
`ReactTransitionGroup` è la base per le animazioni. È accessibile come `React.addons.TransitionGroup`. Quando vi sono aggiunti o rimossi dichiarativamente dei figli (come negli esempi precedenti) degli speciali hook del ciclo di vita sono invocati su di essi.
|
||||
|
||||
### `componentWillAppear(callback)`
|
||||
|
||||
Viene chiamato allo stesso momento di `componentDidMount()` per i componenti inizialmente montati in un `TransitionGroup`. Bloccherà l'esecuzione di altre animazioni finché `callback` non viene chiamata. Viene chiamata solo durante il rendering iniziale di un `TransitionGroup`.
|
||||
|
||||
### `componentDidAppear()`
|
||||
|
||||
Viene chiamato dopo che la funzione `callback` passata a `componentWillAppear` è stata chiamata.
|
||||
|
||||
### `componentWillEnter(callback)`
|
||||
|
||||
Viene chiamato allo stesso momento di `componentDidMount()` per i componenti aggiunti ad un `TransitionGroup` esistente. Bloccherà l'esecuzione di altre animazioni finché `callback` non viene chiamata. Non viene chiamata durante il rendering iniziale di un `TransitionGroup`.
|
||||
|
||||
### `componentDidEnter()`
|
||||
|
||||
Viene chiamato dopo che la funzione `callback` passata a `componentWillEnter` è stata chiamata.
|
||||
|
||||
### `componentWillLeave(callback)`
|
||||
|
||||
Viene chiamato quando il figlio è stato rimosso dal `ReactTransitionGroup`. Nonostante il figlio sia stato rimosso, `ReactTransitionGroup` lo manterrà nel DOM finché `callback` non viene chiamata.
|
||||
|
||||
### `componentDidLeave()`
|
||||
|
||||
Viene chiamato quando la `callback` `willLeave` viene chiamata (contemporaneamente a `componentWillUnmount`).
|
||||
|
||||
### Rendering di un Componente Diverso
|
||||
|
||||
In maniera predefinita, `ReactTransitionGroup` viene visualizzato come uno `span`. Puoi cambiare questo comportamento fornento una proprietà `component`. Ad esempio, ecco come puoi visualizzare un `<ul>`:
|
||||
|
||||
```javascript{1}
|
||||
<ReactTransitionGroup component="ul">
|
||||
...
|
||||
</ReactTransitionGroup>
|
||||
```
|
||||
|
||||
È possibile utilizzare ciascun componente DOM che React può visualizzare. Tuttavia, `component` non deve necessariamente essere un componente DOM. Può infatti essere qualunque componente React; anche componenti scritti da te!
|
||||
|
||||
> Nota:
|
||||
>
|
||||
> Prima della v0.12, quando venivano usati componenti DOM, la proprietà `component` doveva essere un riferimento a `React.DOM.*`. Dal momento che il componente è semplicemente passato a `React.createElement`, deve ora essere una stringa. Per componenti compositi si deve passare il metodo factory.
|
||||
|
||||
Ciascuna proprietà aggiuntiva definita dall'utente diverrà una proprietà del componente visualizzato. Ad esempio, ecco come visualizzeresti un `<ul>` con una classe CSS:
|
||||
|
||||
```javascript{1}
|
||||
<ReactTransitionGroup component="ul" className="animated-list">
|
||||
...
|
||||
</ReactTransitionGroup>
|
||||
```
|
||||
@@ -1,230 +0,0 @@
|
||||
---
|
||||
id: animation
|
||||
title: アニメーション
|
||||
permalink: docs/animation-ja-JP.html
|
||||
prev: addons-ja-JP.html
|
||||
next: two-way-binding-helpers-ja-JP.html
|
||||
---
|
||||
|
||||
ReactはアニメーションのためにローレベルAPIとして `ReactTransitionGroup` アドオンコンポーネントと、基本的なCSSアニメーションとトランジションを簡単に実行するために `ReactCSSTransitionGroup` を提供しています。
|
||||
|
||||
## ハイレベルAPI: `ReactCSSTransitionGroup`
|
||||
|
||||
`ReactCSSTransitionGroup` は `ReactTransitionGroup` に基づいており、ReactコンポーネントがDOMを作成したり、削除したりする際に、CSSのトランジションとアニメーションを行う簡単な方法です。これは、素晴らしい[ng-animate](http://www.nganimate.org/)ライブラリにインスパイアされています。
|
||||
|
||||
### はじめに
|
||||
|
||||
`ReactCSSTransitionGroup` は `ReactTransitions` のインターフェースです。アニメーションに関心がある全てのコンポーネントをラップする単純な要素です。以下が、リストのアイテムをフェードインやフェードアウトさせる例です。
|
||||
|
||||
```javascript{28-30}
|
||||
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
|
||||
|
||||
var TodoList = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {items: ['hello', 'world', 'click', 'me']};
|
||||
},
|
||||
handleAdd: function() {
|
||||
var newItems =
|
||||
this.state.items.concat([prompt('Enter some text')]);
|
||||
this.setState({items: newItems});
|
||||
},
|
||||
handleRemove: function(i) {
|
||||
var newItems = this.state.items;
|
||||
newItems.splice(i, 1);
|
||||
this.setState({items: newItems});
|
||||
},
|
||||
render: function() {
|
||||
var items = this.state.items.map(function(item, i) {
|
||||
return (
|
||||
<div key={item} onClick={this.handleRemove.bind(this, i)}>
|
||||
{item}
|
||||
</div>
|
||||
);
|
||||
}.bind(this));
|
||||
return (
|
||||
<div>
|
||||
<button onClick={this.handleAdd}>Add Item</button>
|
||||
<ReactCSSTransitionGroup
|
||||
transitionName="example"
|
||||
transitionEnterTimeout={500}
|
||||
transitionLeaveTimeout={300}>
|
||||
{items}
|
||||
</ReactCSSTransitionGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
```
|
||||
> 注意:
|
||||
> もし子要素を1つだけレンダリングするとしても、 `ReactCSSTransitionGroup` の全ての子要素に提供しなければなりません。これが、Reactが、子要素が作成されているか、削除されたか、あるいはそのままであるか判断する方法です。
|
||||
|
||||
このコンポーネントでは、 `ReactCSSTransitionGroup` に新しいアイテムが追加された次の瞬間に、 `example-enter` CSSクラスと `example-enter-active` CSSクラスを得ます。これは、 `transitionName` propに基づく習慣です。
|
||||
|
||||
これらのクラスはCSSアニメーションやトランジションのトリガーとして使うことができます。例えば、以下のようにして、このCSSを加え、新しいリストアイテムを加えてみましょう。
|
||||
|
||||
```css
|
||||
.example-enter {
|
||||
opacity: 0.01;
|
||||
transition: opacity .5s ease-in;
|
||||
}
|
||||
|
||||
.example-enter.example-enter-active {
|
||||
opacity: 1;
|
||||
}
|
||||
```
|
||||
|
||||
アイテムを削除しようとしたときに、 `ReactCSSTransitionGroup` がDOMの中にそれを保持していることに気づくでしょう。縮小化されていないReactのビルドとアドオンを使っているならば、Reactがアニメーションやトランジションが起こることを予期しているという警告が出るでしょう。これは、 `ReactCSSTransitionGroup` がアニメーションが終わるまでDOM要素をページに保持し続けるからです。以下のCSSを加えてみましょう。
|
||||
|
||||
```css
|
||||
.example-leave {
|
||||
opacity: 1;
|
||||
transition: opacity .5s ease-in;
|
||||
}
|
||||
|
||||
.example-leave.example-leave-active {
|
||||
opacity: 0.01;
|
||||
}
|
||||
```
|
||||
|
||||
### 最初のマウントにおけるアニメーション
|
||||
|
||||
`ReactCSSTransitionGroup` は `transitionAppear` というオプションのプロパティを提供します。コンポーネントの最初のマウントの際に、更なるトランジションのフェーズを加えるためです。一般的には、 `transitionAppear` が `false` である最初のマウントの際にはトランジションのフェーズはありません。 `transitionAppear` プロパティを値が `true` である状態で渡す以下の例を見てみましょう。
|
||||
|
||||
```javascript{3-5}
|
||||
render: function() {
|
||||
return (
|
||||
<ReactCSSTransitionGroup
|
||||
transitionName="example"
|
||||
transitionAppear={true}
|
||||
transitionAppearTimeout={500}>
|
||||
<h1>Fading at Initial Mount</h1>
|
||||
</ReactCSSTransitionGroup>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
最初のマウントの間、 `ReactCSSTransitionGroup` は `example-appear` CSSクラスを得て、次の瞬間に `example-appear-active` CSSクラスを加えます。
|
||||
|
||||
```css
|
||||
.example-appear {
|
||||
opacity: 0.01;
|
||||
transition: opacity .5s ease-in;
|
||||
}
|
||||
|
||||
.example-appear.example-appear-active {
|
||||
opacity: 1;
|
||||
}
|
||||
```
|
||||
|
||||
最初のマウントの際には、 `ReactCSSTransitionGroup` の全ての子要素は `appear` しますが、 `enter` はしません。一方、存在する `ReactCSSTransitionGroup` に後から加えられた子要素は全て `enter` しますが、 `appear` はしません。
|
||||
|
||||
> 注意:
|
||||
> `transitionAppear` プロパティはバージョン `0.13` で `ReactCSSTransitionGroup` に加えられました。後方互換性を維持するために、デフォルトの値は `false` に指定されています。
|
||||
|
||||
### アニメーショングループを動かすためには、マウントされている必要があります
|
||||
|
||||
子要素にトランジションを適用するためには、 `ReactCSSTransitionGroup` はすでにDOMにマウントされているか、 `transitionAppear` プロパティに `true` がセットされている必要があります。以下の例は動きません。 `ReactCSSTransitionGroup` が新しいアイテムとともにマウントされており、新しいマウントがマウントされていないからです。これと上の[はじめに](#はじめに) とで違いを比較してみてください。
|
||||
|
||||
```javascript{12-15}
|
||||
render: function() {
|
||||
var items = this.state.items.map(function(item, i) {
|
||||
return (
|
||||
<div key={item} onClick={this.handleRemove.bind(this, i)}>
|
||||
<ReactCSSTransitionGroup transitionName="example">
|
||||
{item}
|
||||
</ReactCSSTransitionGroup>
|
||||
</div>
|
||||
);
|
||||
}, this);
|
||||
return (
|
||||
<div>
|
||||
<button onClick={this.handleAdd}>Add Item</button>
|
||||
{items}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 1個か0個のアイテムをアニメーションする
|
||||
|
||||
上の例では、 `ReactCSSTransitionGroup` にアイテムのリストをレンダリングしました。しかし、 `ReactCSSTransitionGroup` の子要素は1個や0個のアイテムになり得ます。単一の要素が作成や削除のアニメーションを可能にします。同様に、現在の要素を置き換える新しい要素をアニメーションできます。例えば、以下のように、1つの画像でカルーセルを実行できます。
|
||||
|
||||
```javascript{10-12}
|
||||
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
|
||||
|
||||
var ImageCarousel = React.createClass({
|
||||
propTypes: {
|
||||
imageSrc: React.PropTypes.string.isRequired
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<div>
|
||||
<ReactCSSTransitionGroup
|
||||
transitionName="carousel"
|
||||
transitionEnterTimeout={300}
|
||||
transitionLeaveTimeout={300}>
|
||||
<img src={this.props.imageSrc} key={this.props.imageSrc} />
|
||||
</ReactCSSTransitionGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### アニメーションを作動させないようにする
|
||||
|
||||
もししたいならば、 `enter` や `leave` のアニメーションを無効にすることもできます。例えば、 `enter` アニメーションは行いたいが、 `leave` のアニメーションは行いたくない場合があるでしょう。しかし、 `ReactCSSTransitionGroup` はDOMのノードが削除される前にアニメーションが終わるのを待ちます。`ReactCSSTransitionGroup` がそれらのアニメーションを無効化するために、 `transitionEnter={false}` や `transitionLeave={false}` といったプロパティを追加することができます。
|
||||
|
||||
> 注意:
|
||||
> `ReactCSSTransitionGroup` を使う際には、コンポーネントがトランジションが終わったことを検知したり、アニメーション関連でさらに複雑なロジックを実行するといったことはできません。更に細かな制御を求める場合は、トランジションをカスタムするために必要なフックを提供するローレベルの `ReactTransitionGroup` APIを使用できます。
|
||||
|
||||
## ローレベルAPI: `ReactTransitionGroup`
|
||||
|
||||
`ReactTransitionGroup` はアニメーションの基盤です。 `React.addons.TransitionGroup` と同じくらい簡単に使用できます。これによって（上記の例のように）、宣言的に子要素が追加されたり削除されたりするときに、それらの上で特別なライフサイクルのフックが呼ばれます。
|
||||
|
||||
### `componentWillAppear(callback)`
|
||||
|
||||
このメソッドは `TransitionGroup` の中で最初にマウントされるコンポーネントのために `componentDidMount()` と同時に呼ばれます。これは、 `callback` が呼ばれるまで、他のアニメーションが発生するのをブロックします。これは、 `TransitionGroup` の最初のレンダリングのときにのみ呼ばれます。
|
||||
|
||||
### `componentDidAppear()`
|
||||
|
||||
`componentWillAppear` が呼ばれて渡される `callback` 関数の後に呼ばれます。
|
||||
|
||||
### `componentWillEnter(callback)`
|
||||
|
||||
これは、存在する `TransitionGroup` に追加されるコンポーネントのために、 `componentDidMount()` と同時に呼ばれます。これは、 `callback` が呼ばれるまで、他のアニメーションが発生するのをブロックします。これは、 `TransitionGroup` の最初のレンダリングのときには呼ばれません。
|
||||
|
||||
### `componentDidEnter()`
|
||||
|
||||
`componentWillEnter` が呼ばれて渡される `callback` 関数の後に呼ばれます。
|
||||
|
||||
### `componentWillLeave(callback)`
|
||||
|
||||
これは、 `ReactTransitionGroup` から子要素が削除されたときに呼ばれます。子要素が削除されても、 `ReactTransitionGroup` は `callback` が呼ばれるまでDOMの中に子要素を保持し続けます。
|
||||
|
||||
### `componentDidLeave()`
|
||||
|
||||
これは、 `willLeave` の `callback` が呼ばれた際に呼ばれます（ `componentWillUnmount` と同時です）。
|
||||
|
||||
### 異なるコンポーネントをレンダリングする
|
||||
|
||||
デフォルトで、 `ReactTransitionGroup` は `span` としてレンダリングされます。この動きは、 `component` プロパティによって変更できます。例えば、 `<ul>` をレンダリングしたい場合は以下のようになります。
|
||||
|
||||
```javascript{1}
|
||||
<ReactTransitionGroup component="ul">
|
||||
...
|
||||
</ReactTransitionGroup>
|
||||
```
|
||||
|
||||
Reactがレンダリングできる全てのDOMコンポーネントが使用できます。しかし、 `component` はDOMコンポーネントである必要はありません。あなたが求めているどんなReactのコンポーネントにもなり得ます。あなた自身が記述したものにもです！
|
||||
|
||||
> 注意:
|
||||
> v0.12以前では、DOMのコンポーネントを使用する際には、 `component` プロパティが `React.DOM.*` を参照している必要がありました。コンポーネントが単純に `React.createElement`から渡されていたからです。これは今は文字列である必要があります。複合的なコンポーネントは複合的なものを渡す必要があります。
|
||||
|
||||
全ての付加的な、ユーザー定義のプロパティはレンダリングされたコンポーネントのプロパティになります。例えば、以下はCSSクラスとともに `<ul>` をレンダリングする方法です。
|
||||
|
||||
```javascript{1}
|
||||
<ReactTransitionGroup component="ul" className="animated-list">
|
||||
...
|
||||
</ReactTransitionGroup>
|
||||
```
|
||||
@@ -1,258 +0,0 @@
|
||||
---
|
||||
id: animation-ko-KR
|
||||
title: 애니메이션
|
||||
permalink: docs/animation-ko-KR.html
|
||||
prev: addons-ko-KR.html
|
||||
next: two-way-binding-helpers-ko-KR.html
|
||||
---
|
||||
|
||||
React에는 애니메이션을 위한 저 수준 API로 `ReactTransitionGroup` 애드온 컴포넌트가 있고 간단히 기초 CSS 애니메이션과 트랜지션을 구현할 수 있는 `ReactCSSTransitionGroup`가 있습니다.
|
||||
|
||||
## 고 레벨 API: `ReactCSSTransitionGroup`
|
||||
|
||||
`ReactCSSTransitionGroup`는 `ReactTransitionGroup`를 기반으로 React 컴포넌트가 DOM에 들어가거나 나올때의 CSS의 트랜지션과 애니메이션을 구현하기 쉽게합니다. 이는 [ng-animate](http://www.nganimate.org/) 라이브러리에 영향을 받았습니다.
|
||||
|
||||
### 시작하기
|
||||
|
||||
`ReactCSSTransitionGroup`은 `ReactTransitions`을 위한 인터페이스입니다. 이는 애니메이션을 제어할 모든 컴포넌트를 감싸는 하나의 엘리먼트 입니다. 아래는 목록의 아이템을 페이드 인/아웃하는 간단한 예제입니다.
|
||||
|
||||
```javascript{28-30}
|
||||
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
|
||||
|
||||
var TodoList = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {items: ['hello', 'world', 'click', 'me']};
|
||||
},
|
||||
handleAdd: function() {
|
||||
var newItems =
|
||||
this.state.items.concat([prompt('Enter some text')]);
|
||||
this.setState({items: newItems});
|
||||
},
|
||||
handleRemove: function(i) {
|
||||
var newItems = this.state.items;
|
||||
newItems.splice(i, 1);
|
||||
this.setState({items: newItems});
|
||||
},
|
||||
render: function() {
|
||||
var items = this.state.items.map(function(item, i) {
|
||||
return (
|
||||
<div key={item} onClick={this.handleRemove.bind(this, i)}>
|
||||
{item}
|
||||
</div>
|
||||
);
|
||||
}.bind(this));
|
||||
return (
|
||||
<div>
|
||||
<button onClick={this.handleAdd}>Add Item</button>
|
||||
<ReactCSSTransitionGroup
|
||||
transitionName="example"
|
||||
transitionEnterTimeout={500}
|
||||
transitionLeaveTimeout={300}>
|
||||
{items}
|
||||
</ReactCSSTransitionGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
> 주의:
|
||||
>
|
||||
> `ReactCSSTransitionGroup`의 모든 자식은 [`key` 어트리뷰트](/react/docs/multiple-components-ko-KR.html#동적-자식)를 반드시 만들어야 합니다. 한 아이템을 렌더할 때도 예외는 아닙니다. 키는 React가 어떤 자식이 들어오고, 나가고, 머무르는지 파악할 때 사용합니다.
|
||||
|
||||
이 컴포넌트에서 새로운 아이템이 `ReactCSSTransitionGroup`에 추가되면 `example-enter` 아이템은 CSS 클래스를 가지게 되고 다음 순간에 `example-enter-active` CSS 클래스가 추가됩니다. 이는 `transitionName` prop을 기반으로 한 관례입니다.
|
||||
|
||||
이 클래스들은 CSS 애니메이션이나 트랜지션을 일으키는데 사용할 수 있습니다. 예를 들어, 이 CSS를 넣은 후 아이템을 추가해 보세요.
|
||||
|
||||
```css
|
||||
.example-enter {
|
||||
opacity: 0.01;
|
||||
}
|
||||
|
||||
.example-enter.example-enter-active {
|
||||
opacity: 1;
|
||||
transition: opacity 500ms ease-in;
|
||||
}
|
||||
|
||||
.example-leave {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.example-leave.example-leave-active {
|
||||
opacity: 0.01;
|
||||
transition: opacity 300ms ease-in;
|
||||
}
|
||||
```
|
||||
|
||||
에니메이션 기간이 CSS와 렌더 메소드 양쪽에 지정될 필요가 있다는 것에 주의하셔야 합니다. 이는 엘리먼트에서 애니메이션 클래스를 제거할 때 (만약 남아있다면) DOM에서 엘리먼트를 제거할 때 React에 알려줍니다.
|
||||
|
||||
### 처음 마운트에서 애니메이션 하기
|
||||
|
||||
`ReactCSSTransitionGroup`은 컴포넌트를 처음 마운트할 때 추가 트렌지션 단계를 추가하기 위해, 선택적인 prop `transitionAppear`를 제공합니다. 일반적으로 처음 마운트할 때 트렌지션 단계를 넣지 않기 때문에 `transitionAppear`의 기본 값은 `false`입니다. 뒤의 예제는 `transitionAppear` prop에 `true` 값을 넘기고 있습니다.
|
||||
|
||||
```javascript{3-5}
|
||||
render: function() {
|
||||
return (
|
||||
<ReactCSSTransitionGroup
|
||||
transitionName="example"
|
||||
transitionAppear={true}
|
||||
transitionAppearTimeout={500}>
|
||||
<h1>Fading at Initial Mount</h1>
|
||||
</ReactCSSTransitionGroup>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
처음 마운트할 때 `ReactCSSTransitionGroup`은 `example-appear` CSS 클래스를 받고 그 다음에 `example-appear-active` CSS 클래스가 추가됩니다.
|
||||
|
||||
```css
|
||||
.example-appear {
|
||||
opacity: 0.01;
|
||||
}
|
||||
|
||||
.example-appear.example-appear-active {
|
||||
opacity: 1;
|
||||
transition: opacity .5s ease-in;
|
||||
}
|
||||
```
|
||||
|
||||
처음 마운트할 때, `ReactCSSTransitionGroup`의 모든 자식은 `appear`하지만 `enter`하지 않습니다. 하지만, 존재하는 `ReactCSSTransitionGroup`에 추가되는 모든 자식은 `enter`하지만 `appear`하지 않습니다.
|
||||
|
||||
> 주의:
|
||||
>
|
||||
> `transitionAppear` prop은 버전 `0.13`에서 `ReactCSSTransitionGroup`에 추가되었습니다. 하위 호환성을 생각해서, 기본 값은 `false`로 설정되어 있습니다.
|
||||
|
||||
### 커스텀 클래스
|
||||
|
||||
트렌지션의 각 단계에서 커스텀 클래스 이름을 사용할 수도 있습니다. transitionName에 문자열을 넘기는 대신 `enter`, `leave` 같은 클래스 이름의 객체나 `enter`, `enter-active`, `leave-active`, `leave`같은 클래스 이름의 객체를 넘길 수 있습니다. enter, leave 클래스만 있다면, enter-active, leave-active 클래스는 클래스 이름 뒤에 '-active'를 붙여서 정할 수 있습니다. 커스텀 클래스를 사용한 예제입니다.
|
||||
|
||||
```javascript
|
||||
...
|
||||
<ReactCSSTransitionGroup
|
||||
transitionName={ {
|
||||
enter: 'enter',
|
||||
enterActive: 'enterActive',
|
||||
leave: 'leave',
|
||||
leaveActive: 'leaveActive',
|
||||
appear: 'appear',
|
||||
appearActive: 'appearActive'
|
||||
} }>
|
||||
{item}
|
||||
</ReactCSSTransitionGroup>
|
||||
|
||||
<ReactCSSTransitionGroup
|
||||
transitionName={ {
|
||||
enter: 'enter',
|
||||
leave: 'leave',
|
||||
appear: 'appear'
|
||||
} }>
|
||||
{item2}
|
||||
</ReactCSSTransitionGroup>
|
||||
...
|
||||
```
|
||||
|
||||
### 애니메이션 그룹이 작동하려면 마운트가 필요
|
||||
|
||||
자식들에게 트랜지션을 적용하려면 `ReactCSSTransitionGroup`은 이미 DOM에 마운트되어 있거나 prop `transitionAppear`가 `true`로 설정되어야만 합니다. 예를 들어, 밑의 코드는 동작하지 않을 것입니다. 왜냐하면 `ReactCSSTransitionGroup` 안에서 새 아이템을 마운트하는 대신 새 아이템과 같이 `ReactCSSTransitionGroup`를 마운트했기 때문입니다. 이 것을 위에 있는 [시작하기](#시작하기) 항목과 비교해보세요.
|
||||
|
||||
```javascript{12-15}
|
||||
render: function() {
|
||||
var items = this.state.items.map(function(item, i) {
|
||||
return (
|
||||
<div key={item} onClick={this.handleRemove.bind(this, i)}>
|
||||
<ReactCSSTransitionGroup transitionName="example">
|
||||
{item}
|
||||
</ReactCSSTransitionGroup>
|
||||
</div>
|
||||
);
|
||||
}, this);
|
||||
return (
|
||||
<div>
|
||||
<button onClick={this.handleAdd}>Add Item</button>
|
||||
{items}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 아이템 하나이거나 없을 때의 애니메이션
|
||||
|
||||
위의 예제에서 `ReactCSSTransitionGroup`에 아이템 목록을 렌더했지만, `ReactCSSTransitionGroup`의 자식은 하나이거나 없을 수도 있습니다. 이는 한 엘리먼트가 들어오고 나가는 것의 애니메이션을 가능하게 합니다. 비슷하게, 현재 엘리먼트가 나가는 동안 새 앨리먼트의 애니메이션을 하면, 새 엘리먼트가 현재 엘리먼트를 교체하는 애니메이션을 만들 수 있습니다. 예를 들어 이렇게 간단한 이미지 회전 베너(carousel)를 구현할 수 있습니다.
|
||||
|
||||
```javascript{10-12}
|
||||
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
|
||||
|
||||
var ImageCarousel = React.createClass({
|
||||
propTypes: {
|
||||
imageSrc: React.PropTypes.string.isRequired
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<div>
|
||||
<ReactCSSTransitionGroup
|
||||
transitionName="carousel"
|
||||
transitionEnterTimeout={300}
|
||||
transitionLeaveTimeout={300}>
|
||||
<img src={this.props.imageSrc} key={this.props.imageSrc} />
|
||||
</ReactCSSTransitionGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### 애니메이션 비활성화
|
||||
|
||||
원한다면 `enter`나 `leave` 애니메이션을 비활성화 할 수 있습니다. 예를 들어, `enter` 애니메이션만 필요하고 `leave` 애니메이션은 필요없지만, `ReactCSSTransitionGroup`이 DOM 노드를 없애기 전 애니메이션이 완료되길 기다리고 있는 경우에 사용할 수 있습니다. `ReactCSSTransitionGroup`에 `transitionEnter={false}`나 `transitionLeave={false}` props를 추가하면 그 애니메이션을 비활성화 할 수 있습니다.
|
||||
|
||||
> 주의:
|
||||
>
|
||||
> `ReactCSSTransitionGroup`를 사용할 때는, 트랜지션이 종료되었을 때나 애니메이션 근처에서 더 복잡한 로직을 실행할 때 컴포넌트에 통지할 방법이 없습니다. 보다 세밀하게 제어하고 싶다면, 커스텀 트랜지션에 필요한 훅을 제공하는 저수준 `ReactTransitionGroup` API를 이용할 수 있습니다.
|
||||
|
||||
## 저수준 API: `ReactTransitionGroup`
|
||||
|
||||
`ReactTransitionGroup`은 애니메이션의 기초입니다. 이는 `require('react-addons-transition-group')`으로 접근할 수 있습니다. 위의 예제처럼 자식들이 선언적으로 여기에 추가되거나 삭제되는 경우, 특별한 훅이 이 생명주기에서 호출됩니다.
|
||||
|
||||
### `componentWillAppear(callback)`
|
||||
|
||||
이미 있는 `TransitionGroup`에 컴포넌트를 추가할 때 호출되는 `componentDidMount()`와 같이 호출됩니다. 이는 `callback`이 호출될 때까지 다른 애니메이션을 막습니다. `TransitionGroup`의 최초 렌더에서만 호출됩니다.
|
||||
|
||||
### `componentDidAppear()`
|
||||
|
||||
이는 `componentWillAppear`에 넘겨졌던 `callback` 함수가 호출된 다음에 호출됩니다.
|
||||
|
||||
### `componentWillEnter(callback)`
|
||||
|
||||
이미 있는 `TransitionGroup`에 컴포넌트를 추가할 때 호출되는 `componentDidMount()`와 같이 호출됩니다. 이는 `callback`이 호출될 때까지 다른 애니메이션을 막습니다. `TransitionGroup`의 최조 렌더에서는 불려지지 않습니다.
|
||||
|
||||
### `componentDidEnter()`
|
||||
|
||||
이는 `componentWillEnter`에 넘겨주었던 `callback` 함수가 호출된 다음에 호출됩니다.
|
||||
|
||||
### `componentWillLeave(callback)`
|
||||
|
||||
이는 `ReactTransitionGroup`에서 자식이 제거되었을 때 호출됩니다. 자식이 제거되었다고 해도 `ReactTransitionGroup`는 `callback`이 호출될 때까지 DOM에 자식을 남겨둡니다.
|
||||
|
||||
### `componentDidLeave()`
|
||||
|
||||
이는 `willLeave` `callback`이 호출될 때 호출됩니다. (`componentWillUnmount`와 같은 타이밍)
|
||||
|
||||
### 다른 컴포넌트 렌더하기
|
||||
|
||||
기본적으로 `ReactTransitionGroup`은 `span`으로 렌더합니다. `component` prop으로 이 행동을 바꿀 수 있습니다. 예를 들어, `<ul>`을 렌더하고 싶다면 이렇게 하면 됩니다.
|
||||
|
||||
```javascript{1}
|
||||
<ReactTransitionGroup component="ul">
|
||||
...
|
||||
</ReactTransitionGroup>
|
||||
```
|
||||
|
||||
React가 렌더할 수 있는 DOM 컴포넌트는 전부 사용할 수 있습니다. 하지만 `component`가 DOM 컴포넌트일 필요는 없습니다. React 컴포넌트라면 무엇이든 넣을 수 있습니다. 직접 구현한 컴포넌트여도 됩니다! 그냥 `component={List}`를 적으면 컴포넌트는 `this.props.children`로 받을 수 있습니다.
|
||||
|
||||
사용자 정의를 포함한 어떤 프로퍼티도 렌더된 컴포넌트의 프로퍼티가 됩니다. 예를 들어, `<ul>`에 CSS 클래스를 넣어서 렌더하려면 이렇게 하면 됩니다.
|
||||
|
||||
```javascript{1}
|
||||
<ReactTransitionGroup component="ul" className="animated-list">
|
||||
...
|
||||
</ReactTransitionGroup>
|
||||
```
|
||||
@@ -1,258 +0,0 @@
|
||||
---
|
||||
id: animation-zh-CN
|
||||
title: 动画
|
||||
permalink: docs/animation-zh-CN.html
|
||||
prev: addons-zh-CN.html
|
||||
next: two-way-binding-helpers-zh-CN.html
|
||||
---
|
||||
|
||||
React 提供了一个 `ReactTransitionGroup` 插件作为动画的底层API,和一个 `ReactCSSTransitionGroup` 用于轻松实现基础的CSS动画和过渡。
|
||||
|
||||
## 高级 API: `ReactCSSTransitionGroup`
|
||||
|
||||
`ReactCSSTransitionGroup` 基于 `ReactTransitionGroup` 是一个当React组件进入或离开DOM时，执行CSS动画和过渡的简单方法。它的灵感来自于杰出的 [ng-animate](http://www.nganimate.org/) 库。
|
||||
|
||||
### 入门指南
|
||||
|
||||
`ReactCSSTransitionGroup` 是 `ReactTransitions` 的接口。这是一个简单的元素，包裹了所有你感兴趣的动画组件。这里是一个淡入和淡出列表项目的例子。
|
||||
|
||||
```javascript{28-30}
|
||||
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
|
||||
|
||||
var TodoList = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {items: ['hello', 'world', 'click', 'me']};
|
||||
},
|
||||
handleAdd: function() {
|
||||
var newItems =
|
||||
this.state.items.concat([prompt('Enter some text')]);
|
||||
this.setState({items: newItems});
|
||||
},
|
||||
handleRemove: function(i) {
|
||||
var newItems = this.state.items.slice();
|
||||
newItems.splice(i, 1);
|
||||
this.setState({items: newItems});
|
||||
},
|
||||
render: function() {
|
||||
var items = this.state.items.map(function(item, i) {
|
||||
return (
|
||||
<div key={item} onClick={this.handleRemove.bind(this, i)}>
|
||||
{item}
|
||||
</div>
|
||||
);
|
||||
}.bind(this));
|
||||
return (
|
||||
<div>
|
||||
<button onClick={this.handleAdd}>Add Item</button>
|
||||
<ReactCSSTransitionGroup
|
||||
transitionName="example"
|
||||
transitionEnterTimeout={500}
|
||||
transitionLeaveTimeout={300}>
|
||||
{items}
|
||||
</ReactCSSTransitionGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
```
|
||||
> 注意:
|
||||
>
|
||||
> 你必须为`ReactCSSTransitionGroup`的所有子级提供 [ `key` 属性](/react/docs/multiple-components.html#dynamic-children)，即使只渲染一个项目。这就是React将决定哪一个子级进入，离开，或者停留
|
||||
|
||||
在这个组件，当一个新的项目被添加到 `ReactCSSTransitionGroup` ,他将得到`example-enter` CSS类 并且在下一刻`example-enter-active` CSS类被添加。这是一个基于`transitionName` prop 的约定。
|
||||
|
||||
你可以使用这些类来触发CSS动画和过渡。比如，尝试添加这个CSS和添加一个新的列表项：
|
||||
|
||||
```css
|
||||
.example-enter {
|
||||
opacity: 0.01;
|
||||
}
|
||||
|
||||
.example-enter.example-enter-active {
|
||||
opacity: 1;
|
||||
transition: opacity 500ms ease-in;
|
||||
}
|
||||
|
||||
.example-leave {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.example-leave.example-leave-active {
|
||||
opacity: 0.01;
|
||||
transition: opacity 300ms ease-in;
|
||||
}
|
||||
```
|
||||
|
||||
你会注意到动画持续时间需要被同时在CSS和渲染方法里被指定;这告诉React什么时候从元素中移除动画类，并且 -- 如果它正在离开 -- 何时从DOM移除元素。
|
||||
|
||||
### 让初始化挂载动画
|
||||
|
||||
`ReactCSSTransitionGroup` 提供了可选的prop `transitionAppear`，来为在组件初始挂载添加一个额外的过渡阶段。 通常在初始化挂载时没有过渡阶段因为`transitionAppear` 的默认值为`false`。下面是一个传递`transitionAppear` 为值`true`的例子。
|
||||
|
||||
```javascript{3-5}
|
||||
render: function() {
|
||||
return (
|
||||
<ReactCSSTransitionGroup
|
||||
transitionName="example"
|
||||
transitionAppear={true}
|
||||
transitionAppearTimeout={500}>
|
||||
<h1>Fading at Initial Mount</h1>
|
||||
</ReactCSSTransitionGroup>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
在初始化挂载时 `ReactCSSTransitionGroup` 将获得`example-appear` CSS类 并且`example-appear-active` CSS 类在下一刻被添加。
|
||||
|
||||
```css
|
||||
.example-appear {
|
||||
opacity: 0.01;
|
||||
}
|
||||
|
||||
.example-appear.example-appear-active {
|
||||
opacity: 1;
|
||||
transition: opacity .5s ease-in;
|
||||
}
|
||||
```
|
||||
|
||||
在初始化挂载，所有的 `ReactCSSTransitionGroup` 子级将会 `appear` 但不 `enter`。然而，所有后来添加到已存在的 `ReactCSSTransitionGroup` 的子级将 `enter` 但不 `appear`。
|
||||
|
||||
> 注意:
|
||||
>
|
||||
> prop `transitionAppear` 在版本 `0.13` 被添加到 `ReactCSSTransitionGroup`。为了保持向后兼容，默认值被设置为 `false`。
|
||||
|
||||
### 制定类
|
||||
|
||||
可以为你的每一步过渡使用制定类名字。代理传递一个字符串到transitionName，你可以传递一个含有`enter` 或者`leave` 类名的对象，或者一个含有 `enter`, `enter-active`, `leave-active`, 和 `leave` 类名的对象。只要提供了enter 和 leave 的类，enter-active 和 leave-active 类会被决定为后缀'-active' 到类名的尾部。这里是两个使用制定类的例子：
|
||||
|
||||
```javascript
|
||||
...
|
||||
<ReactCSSTransitionGroup
|
||||
transitionName={ {
|
||||
enter: 'enter',
|
||||
enterActive: 'enterActive',
|
||||
leave: 'leave',
|
||||
leaveActive: 'leaveActive',
|
||||
appear: 'appear',
|
||||
appearActive: 'appearActive'
|
||||
} }>
|
||||
{item}
|
||||
</ReactCSSTransitionGroup>
|
||||
|
||||
<ReactCSSTransitionGroup
|
||||
transitionName={ {
|
||||
enter: 'enter',
|
||||
leave: 'leave',
|
||||
appear: 'appear'
|
||||
} }>
|
||||
{item2}
|
||||
</ReactCSSTransitionGroup>
|
||||
...
|
||||
```
|
||||
|
||||
### 动画组必须挂载才工作
|
||||
|
||||
为了使过渡效果应用到子级上，`ReactCSSTransitionGroup`必须已经挂载到了DOM或者 prop `transitionAppear` 必须被设置为 `true`。下面的例子不会工作，因为 `ReactCSSTransitionGroup` 随同新项目被挂载，而不是新项目在它内部被挂载。将这与上面的[入门指南](#入门指南)部分比较一下，看看不同。
|
||||
|
||||
```javascript{12-15}
|
||||
render: function() {
|
||||
var items = this.state.items.map(function(item, i) {
|
||||
return (
|
||||
<div key={item} onClick={this.handleRemove.bind(this, i)}>
|
||||
<ReactCSSTransitionGroup transitionName="example">
|
||||
{item}
|
||||
</ReactCSSTransitionGroup>
|
||||
</div>
|
||||
);
|
||||
}, this);
|
||||
return (
|
||||
<div>
|
||||
<button onClick={this.handleAdd}>Add Item</button>
|
||||
{items}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 动画一个或者零个项目 Animating One or Zero Items
|
||||
|
||||
在上面的例子中，我们渲染了一系列的项目到`ReactCSSTransitionGroup`里。然而 `ReactCSSTransitionGroup` 的子级同样可以是一个或零个项目。这使它能够动画化单个元素的进入和离开。同样，你可以动画化一个新的元素替换当前元素。例如，我们可以像这样实现一个简单的图片轮播器：
|
||||
|
||||
```javascript{10-12}
|
||||
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
|
||||
|
||||
var ImageCarousel = React.createClass({
|
||||
propTypes: {
|
||||
imageSrc: React.PropTypes.string.isRequired
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<div>
|
||||
<ReactCSSTransitionGroup
|
||||
transitionName="carousel"
|
||||
transitionEnterTimeout={300}
|
||||
transitionLeaveTimeout={300}>
|
||||
<img src={this.props.imageSrc} key={this.props.imageSrc} />
|
||||
</ReactCSSTransitionGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### 禁用动画
|
||||
|
||||
如果你想,你可以禁用 `enter` 或者 `leave` 动画。例如，有时你可能想要一个 `enter` 动画，不要 `leave` 动画，但是 `ReactCSSTransitionGroup` 会在移除你的DOM节点之前等待一个动画完成。你可以添加`transitionEnter={false}` 或者 `transitionLeave={false}` props 到 `ReactCSSTransitionGroup` 来禁用这些动画。
|
||||
|
||||
> 注意：
|
||||
>
|
||||
> 当使用 `ReactCSSTransitionGroup` 时，没有办法通知你的组件何时过渡效果结束或者在动画时执行任何复杂的逻辑运算。如果你想要更多细粒度的控制，你可以使用底层的 `ReactTransitionGroup` API，它提供了你自定义过渡效果所需要的挂钩。
|
||||
|
||||
## 底层 API: `ReactTransitionGroup`
|
||||
|
||||
`ReactTransitionGroup`是动画的基础。它通过 `require('react-addons-transition-group')` 访问。当子级被声明式的从其中添加或移除（就像上面的例子）时，特殊的生命周期挂钩会在它们上面被调用。
|
||||
|
||||
### `componentWillAppear(callback)`
|
||||
|
||||
对于被初始化挂载到 `TransitionGroup` 的组件，它和 `componentDidMount()` 在相同时间被调用 。它将会阻塞其它动画发生，直到`callback`被调用。它只会在 `TransitionGroup` 初始化渲染时被调用。
|
||||
|
||||
### `componentDidAppear()`
|
||||
|
||||
在 传给`componentWillAppear` 的 `回调` 函数被调用后调用。
|
||||
|
||||
### `componentWillEnter(callback)`
|
||||
|
||||
对于被添加到已存在的 `TransitionGroup` 的组件，它和 `componentDidMount()` 在相同时间被调用 。它将会阻塞其它动画发生，直到`callback`被调用。它不会在 `TransitionGroup` 初始化渲染时被调用。
|
||||
|
||||
### `componentDidEnter()`
|
||||
|
||||
在传给 `componentWillEnter` 的`回调`函数被调用之后调用。
|
||||
|
||||
### `componentWillLeave(callback)`
|
||||
|
||||
在子级从 `ReactTransitionGroup` 中移除时调用。虽然子级被移除了，`ReactTransitionGroup` 将会保持它在DOM中，直到`callback`被调用。
|
||||
|
||||
### `componentDidLeave()`
|
||||
|
||||
在`willLeave` `callback` 被调用的时候调用（与 `componentWillUnmount` 同一时间）。
|
||||
|
||||
### 渲染一个不同的组件
|
||||
|
||||
默认情况下 `ReactTransitionGroup` 渲染为一个 `span`。你可以通过提供一个 `component` prop 来改变这种行为。例如，下面是你将如何渲染一个`<ul>`：
|
||||
|
||||
```javascript{1}
|
||||
<ReactTransitionGroup component="ul">
|
||||
...
|
||||
</ReactTransitionGroup>
|
||||
```
|
||||
|
||||
每一个React能渲染的DOM组件都是可用的。然而，`组件`不需要是一个DOM组件。它可以是任何你想要的React组件；甚至是你自己已经写好的！只要写 `component={List}` 你的组件会收到 `this.props.children`
|
||||
|
||||
|
||||
任何额外的、用户定义的属性将会成为已渲染的组件的属性。例如，以下是你将如何渲染一个带有css类的 `<ul>`：
|
||||
|
||||
```javascript{1}
|
||||
<ReactTransitionGroup component="ul" className="animated-list">
|
||||
...
|
||||
</ReactTransitionGroup>
|
||||
```
|
||||
@@ -1,32 +0,0 @@
|
||||
---
|
||||
id: shallow-compare-zh-CN
|
||||
title: 浅比较
|
||||
permalink: docs/shallow-compare-zh-CN.html
|
||||
prev: perf-zh-CN.html
|
||||
next: advanced-performance-zh-CN.html
|
||||
---
|
||||
|
||||
`shallowCompare` 是一个辅助函数 在以ES6类使用React时，完成和 `PureRenderMixin` 相同的功能。
|
||||
|
||||
如果你的React组件的绘制函数是 “干净的” （换句话说，它在给定的 props 和 state 下绘制相同的结果）,你可以使用这个辅助函数以在某些情况下提升性能。
|
||||
|
||||
例如:
|
||||
|
||||
```js
|
||||
var shallowCompare = require('react-addons-shallow-compare');
|
||||
export class SampleComponent extends React.Component {
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
return shallowCompare(this, nextProps, nextState);
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div className={this.props.className}>foo</div>;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
`shallowCompare` 对当前的 `props` 和 `nextProps`对象 执行一个浅的相等检查，同样对于 `state` 和 `nextState`对象。
|
||||
它 通过迭代比较对象的keys 并在 对象的key值不严格相等时返回false 实现此功能.
|
||||
|
||||
`shallowCompare` 返回 `true` 如果对 props 或 state的浅比较失败，因此组件应该更新。
|
||||
`shallowCompare` 返回 `false` 如果对 props 或 state的浅比较都通过了，因此组件不应该更新。
|
||||
@@ -1,114 +0,0 @@
|
||||
---
|
||||
id: two-way-binding-helpers-it-IT
|
||||
title: Helper Per Binding Bidirezionali
|
||||
permalink: docs/two-way-binding-helpers-it-IT.html
|
||||
prev: animation-it-IT.html
|
||||
next: test-utils-it-IT.html
|
||||
---
|
||||
|
||||
`ReactLink` è una maniera semplice di esprimere binding bidirezionali con React.
|
||||
|
||||
> Nota:
|
||||
>
|
||||
> Se hai poca esperienza del framework, nota che `ReactLink` non è necessario per molte applicazioni e dovrebbe essere utilizzato con cautela.
|
||||
|
||||
In React, i dati fluiscono in una direzione: dal proprietario ai figli. Questo poiché i dati fluiscono in una sola direzione nel [modello di computazione di Von Neumann](https://en.wikipedia.org/wiki/Von_Neumann_architecture). Puoi pensare ad esso come "binding unidirezionale dei dati."
|
||||
|
||||
Tuttavia, esistono parecchie applicazioni che richiedono di leggere dati e farli fluire nuovamente nel tuo programma. Ad esempio, quando sviluppi dei moduli, vorrai spesso aggiornare uno `state` di React quando ricevi un input dall'utente. O forse vuoi effettuare il layout in JavaScript e reagire ai cambiamenti nelle dimensioni di alcuni elementi DOM.
|
||||
|
||||
In React, questo verrebbe implementato ascoltando un evento "change", leggendo la tua fonte di dati (solitamente il DOM) e chiamando `setState()` su uno dei tuoi componenti. "Chiudere il ciclo del flusso dei dati" esplicitamente conduce a programmi più comprensibili e mantenibili. Consulta [la nostra documentazione sui moduli](/react/docs/forms.html) per maggiori informazioni.
|
||||
|
||||
Il binding bidirezionale -- assicurarsi implicitamente che alcuni valori nel DOM siano sempre consistenti con degli `state` in React -- è più conciso e supporta un'ampia varietà di applicazioni. Abbiamo fornito `ReactLink`: zucchero sintattico per impostare il pattern del ciclo del flusso di dati descritto in predecenza, ovvero "collegare" una fonte di dati con lo `state` di React.
|
||||
|
||||
> Nota:
|
||||
>
|
||||
> `ReactLink` è soltanto uno strato di astrazione e convenzioni attorno al pattern `onChange`/`setState()`. Non cambia fondamentalmente la maniera in cui i dati fluiscono all'interno della tua applicazione React.
|
||||
|
||||
## ReactLink: Prima e Dopo
|
||||
|
||||
Ecco un semplice esempio di modulo che non utilizza `ReactLink`:
|
||||
|
||||
```javascript
|
||||
var NoLink = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {message: 'Ciao!'};
|
||||
},
|
||||
handleChange: function(event) {
|
||||
this.setState({message: event.target.value});
|
||||
},
|
||||
render: function() {
|
||||
var message = this.state.message;
|
||||
return <input type="text" value={message} onChange={this.handleChange} />;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
Ciò funziona molto bene e il flusso di dati è molto chiaro. Tuttavia, in presenza di un gran numero di campi del modulo può risultare assai prolisso. Utilizziamo `ReactLink` per risparmiarci la scrittura di un po' di codice:
|
||||
|
||||
```javascript{2,7}
|
||||
var WithLink = React.createClass({
|
||||
mixins: [React.addons.LinkedStateMixin],
|
||||
getInitialState: function() {
|
||||
return {message: 'Ciao!'};
|
||||
},
|
||||
render: function() {
|
||||
return <input type="text" valueLink={this.linkState('message')} />;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
`LinkedStateMixin` aggiunge un metodo chiamato `linkState()` al tuo componente React. `linkState()` restituisce un oggetto `ReactLink` contenente il valore attuae dello stato React e una callback per cambiarlo.
|
||||
|
||||
Gli oggetti `ReactLink` possono essere passati su e giù nell'albero come proprietà, quindi è facile (ed esplicito) impostare un binding bidirezionale tra un componente in profondità nella gerarchia e dello stato che si trova più in alto nella gerarchia.
|
||||
|
||||
Nota che i checkbox hanno un comportamento speciale riguardo il loro attributo `value`, che è il valore che sarà inviato all'inoltro del modulo se il checkbox è spuntato (il valore predefinito è `on`). L'attributo `value` non è aggiornato quando il checkbox viene spuntato o deselezionato. Per i checkbox occorre usare `checkedLink` anziché `valueLink`:
|
||||
```
|
||||
<input type="checkbox" checkedLink={this.linkState('booleanValue')} />
|
||||
```
|
||||
|
||||
|
||||
## Dietro le Quinte
|
||||
|
||||
Ci sono due ambiti in `ReactLink`: il posto in cui crei l'istanza di `ReactLink` e il posto in cui la utilizzi. Per dimostrare quanto sia semplice usare `ReactLink`, riscriviamo ciascun ambito separatamente perché sia più esplicito.
|
||||
|
||||
### ReactLink Senza LinkedStateMixin
|
||||
|
||||
```javascript{5-7,9-12}
|
||||
var WithoutMixin = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {message: 'Ciao!'};
|
||||
},
|
||||
handleChange: function(newValue) {
|
||||
this.setState({message: newValue});
|
||||
},
|
||||
render: function() {
|
||||
var valueLink = {
|
||||
value: this.state.message,
|
||||
requestChange: this.handleChange
|
||||
};
|
||||
return <input type="text" valueLink={valueLink} />;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
Come puoi vedere, gli oggetti `ReactLink` sono semplici oggetti che hanno due proprietà: `value` e `requestChange`. `LinkedStateMixin` è altrettanto semplice: popola semplicemente questi campi con un valore da `this.state` e una callback che invoca `this.setState()`.
|
||||
|
||||
### ReactLink Senza valueLink
|
||||
|
||||
```javascript
|
||||
var WithoutLink = React.createClass({
|
||||
mixins: [React.addons.LinkedStateMixin],
|
||||
getInitialState: function() {
|
||||
return {message: 'Ciao!'};
|
||||
},
|
||||
render: function() {
|
||||
var valueLink = this.linkState('message');
|
||||
var handleChange = function(e) {
|
||||
valueLink.requestChange(e.target.value);
|
||||
};
|
||||
return <input type="text" value={valueLink.value} onChange={handleChange} />;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
La proprietà `valueLink` è anche abbastanza semplice. Gestisce semplicemente l'evento `onChange` e invoca `this.props.valueLink.requestChange()`, e inoltre utilizza `this.props.valueLink.value` anziché `this.props.value`. Tutto qua!
|
||||
@@ -1,114 +0,0 @@
|
||||
---
|
||||
id: two-way-binding-helpers
|
||||
title: 2ウェイバインディングのヘルパ
|
||||
permalink: docs/two-way-binding-helpers-ja-JP.html
|
||||
prev: animation-ja-JP.html
|
||||
next: test-utils-ja-JP.html
|
||||
---
|
||||
|
||||
`ReactLink` はReactで2ウェイバインディングを表現する簡単な方法です。
|
||||
|
||||
> 注意:
|
||||
> もしあなたがフレームワークについてあまりよく知らないのであれば、 `ReactLink` は多くのアプリケーションには必要なく、慎重に使うべきであることに注意してください。
|
||||
|
||||
Reactでは所有者から子要素へと、データの流れは一方向です。これはデータが[Von Neumannのコンピューティングモデル](https://en.wikipedia.org/wiki/Von_Neumann_architecture)によって一方向にのみ流れるからです。これを「1ウェイデータバインディング」だと考えることができます。
|
||||
|
||||
しかし、データやプログラムに戻る流れを読む必要が有るアプリケーションもたくさんあります。例えば、フォームを作る際に、ユーザのインプットを受け取った時には、Reactの `state` を更新したいと思うことはよくあるでしょう。または、JavaScriptでレイアウトを形作ったり、DOM要素のサイズの変化に反応したいと思うでしょう。
|
||||
|
||||
Reactでは、「変更」のイベントを検知し、データソース（普通はDOMです）を読み、コンポーネントのうちの1つの上で `setState()` を呼ぶことでこの要求を満たすことができます。「データフローのループを止めること」は理解しやすく、維持しやすいプログラムを明確に導きます。詳細な情報については、[フォームのドキュメント](/react/docs/forms-ja-JP.html)をご覧ください。
|
||||
|
||||
2ウェイバインディングはDOMの値が常にReactの `state` と一致していることを暗黙に強制しますが、簡潔で、多くの種類のアプリケーションをサポートします。上で説明されているような共通のデータフローループパターンのセットアップや、データソースをReactの `state` に「接続する」ための糖衣構文である `ReactLink` が提供されています。
|
||||
|
||||
> 注意:
|
||||
> `ReactLink` は薄いラッパーであり、 `onChange`/`setState()` パターンにおける習慣です。Reactアプリケーションのデータフローの方法を根本から変えるようなものではありません。
|
||||
|
||||
## ReactLink: ビフォーアフター
|
||||
|
||||
以下が、 `ReactLink` を使用しない単純なフォームの例です。
|
||||
|
||||
```javascript
|
||||
var NoLink = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {message: 'Hello!'};
|
||||
},
|
||||
handleChange: function(event) {
|
||||
this.setState({message: event.target.value});
|
||||
},
|
||||
render: function() {
|
||||
var message = this.state.message;
|
||||
return <input type="text" value={message} onChange={this.handleChange} />;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
これはとてもよく動き、データがどう流れているかとても明確です。しかし、たくさんのフォームのフィールドがあった場合、少し冗長になります。以下のように、 `ReactLink` を使うことでタイピング量が少なくて済みます。
|
||||
|
||||
```javascript{2,7}
|
||||
var WithLink = React.createClass({
|
||||
mixins: [React.addons.LinkedStateMixin],
|
||||
getInitialState: function() {
|
||||
return {message: 'Hello!'};
|
||||
},
|
||||
render: function() {
|
||||
return <input type="text" valueLink={this.linkState('message')} />;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
`LinkedStateMixin` は `linkState()` と呼ばれるReactコンポーネントにメソッドを追加します。
|
||||
`linkState()` はReactのステータスの現在の値と、それを変更するコールバックを持った `ReactLink` オブジェクトを返します。
|
||||
|
||||
`ReactLink` オブジェクトはプロパティとして、木構造の上や下に渡される可能性があります。だから、階層の深い位置にいるコンポーネントと階層の高い位置にいるステータスの間の2ウェイバインディングをセットアップすることは簡単（で、明確）です。
|
||||
|
||||
チェックボックスはその `value` 属性に対しての特別な態度を持っていることに注意してください。それは、チェックボックスがチェックされている（デフォルトで `on` ）場合にフォームのサブミットで送信される値です。 `value` 属性はチェックボックスがチェックされていても、チェックされていなくても、更新されません。チェックボックスについては、`valueLink` の代わりに、 `checkedLink` を使うべきです。以下のように。
|
||||
|
||||
```
|
||||
<input type="checkbox" checkedLink={this.linkState('booleanValue')} />
|
||||
```
|
||||
|
||||
|
||||
## フードの下
|
||||
|
||||
`ReactLink` には2つの側面があります。 `ReactLink` のインスタンスを作成する場所と、それを使う場所です。 `ReactLink` がどれだけ単純か証明するために、それぞれの側面を分けて、明確に再度記述してみましょう。
|
||||
|
||||
### LinkedStateMixinを使わないReactLink
|
||||
|
||||
```javascript{5-7,9-12}
|
||||
var WithoutMixin = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {message: 'Hello!'};
|
||||
},
|
||||
handleChange: function(newValue) {
|
||||
this.setState({message: newValue});
|
||||
},
|
||||
render: function() {
|
||||
var valueLink = {
|
||||
value: this.state.message,
|
||||
requestChange: this.handleChange
|
||||
};
|
||||
return <input type="text" valueLink={valueLink} />;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
今まで見てきたように `ReactLink` オブジェクトは `value` と `requestChange` プロパティだけを持ったとても単純なオブジェクトです。そして、 `LinkedStateMixin` も同様に単純です。それらのフィールドを `this.state` の値と、 `this.setState()` を呼ぶコールバックで満たします。
|
||||
|
||||
### valueLinkを使わないReactLink
|
||||
|
||||
```javascript
|
||||
var WithoutLink = React.createClass({
|
||||
mixins: [React.addons.LinkedStateMixin],
|
||||
getInitialState: function() {
|
||||
return {message: 'Hello!'};
|
||||
},
|
||||
render: function() {
|
||||
var valueLink = this.linkState('message');
|
||||
var handleChange = function(e) {
|
||||
valueLink.requestChange(e.target.value);
|
||||
};
|
||||
return <input type="text" value={valueLink.value} onChange={handleChange} />;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
`valueLink` プロパティも同様にとても単純です。単純に `onChange` イベントをハンドルし、 `this.props.valueLink.requestChange()` を呼び、 `this.props.value` の代わりに `this.props.valueLink.value` を使用します。それだけです！
|
||||
@@ -1,117 +0,0 @@
|
||||
---
|
||||
id: two-way-binding-helpers-ko-KR
|
||||
title: 양방향 바인딩 핼퍼
|
||||
permalink: docs/two-way-binding-helpers-ko-KR.html
|
||||
prev: animation-ko-KR.html
|
||||
next: test-utils-ko-KR.html
|
||||
---
|
||||
|
||||
`ReactLink`는 React에서 양방향 바인딩을 표현하는 쉬운 방법입니다.
|
||||
|
||||
> 주의:
|
||||
>
|
||||
> 프레임워크를 새로 접하신다면, 대부분의 애플리케이션에서 `ReactLink`는 필요없고 신중히 사용하셔야 함을 알려드립니다.
|
||||
|
||||
React에서 데이터 흐름은 소유주에서 자식으로의 단방향입니다. 이는 [폰 노이만 컴퓨팅 모델](http://ko.wikipedia.org/wiki/%ED%8F%B0_%EB%85%B8%EC%9D%B4%EB%A7%8C_%EA%B5%AC%EC%A1%B0)의 데이터가 단방향으로 흐르기 때문입니다. 이것을 "단방향 데이터 바인딩"으로 생각하셔도 됩니다.
|
||||
|
||||
하지만 많은 애플리케이션에서 데이터를 요청해서 프로그램으로 돌려줍니다. 예를 들어, 폼을 개발한다면, 사용자 입력을 받았을 때 `state`를 바꾸거나, JavaScript안에서 레이아웃을 바꾸고 그에 따라 어떤 DOM 엘리먼트의 크기를 바꾸게 하고 싶을 수도 있습니다.
|
||||
|
||||
React에서 이는 "change" 이벤트를 감시하고 데이터 소스(보통 DOM)에서 읽어 컴포넌트에서 `setState()`를 호출하는 식으로 할 수 있습니다. "데이터 흐름 반복을 제한"하면 더 이해하기 편하고, 쉽게 유지보수할 수 있는 프로그램이 만들어지는 것은 명확합니다. 더 자세한 내용은 [폼 문서](/react/docs/forms-ko-KR.html)를 확인하세요.
|
||||
|
||||
양방향 바인딩(묵시적으로 DOM의 어떤 값은 React `state`와 일치하도록 강제하는 것)은 간결하기도 하고 다양한 애플리케이션을 지원 할 수 있습니다. React는 `ReactLink`를 제공합니다. 이는 위에서 설명한 일반적인 데이터 흐름 반복 패턴을 설정하거나, 어떤 데이터 소스를 React `state`로 "링크하는" 편의 문법입니다.
|
||||
|
||||
> 주의:
|
||||
>
|
||||
> `ReactLink`는 얇은 레퍼고 `onChange`/`setState()`패턴 부분의 관례일 뿐입니다. React 애플리케이션에서의 데이터 흐름을 근본적으로 바꾸지는 않습니다.
|
||||
|
||||
## ReactLink: 적용 전후
|
||||
|
||||
`ReactLink`를 사용하지 않는 간단한 폼 예제입니다.
|
||||
|
||||
```javascript
|
||||
var NoLink = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {message: '안녕!'};
|
||||
},
|
||||
handleChange: function(event) {
|
||||
this.setState({message: event.target.value});
|
||||
},
|
||||
render: function() {
|
||||
var message = this.state.message;
|
||||
return <input type="text" value={message} onChange={this.handleChange} />;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
이것은 정말 잘 동작하고, 데이터가 어떻게 흐르는지 매우 명확하게 보여지지만, 폼필드가 많을 경우 약간 장황해 질 수 있습니다. 타이핑을 줄이기 위해 `ReactLink`를 사용해 보겠습니다.
|
||||
|
||||
```javascript{4,9}
|
||||
var LinkedStateMixin = require('react-addons-linked-state-mixin');
|
||||
|
||||
var WithLink = React.createClass({
|
||||
mixins: [LinkedStateMixin],
|
||||
getInitialState: function() {
|
||||
return {message: 'Hello!'};
|
||||
},
|
||||
render: function() {
|
||||
return <input type="text" valueLink={this.linkState('message')} />;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
`LinkedStateMixin`는 React 컴포넌트에 `linkState()`라는 메서드를 추가합니다. `linkState()`는 React state의 현재 값과 그것을 변경할 때의 콜백을 가지는 `ReactLink` 객체를 리턴합니다.
|
||||
|
||||
`ReactLink` 객체는 props로 트리의 위나 아래로 넘길 수 있어서, 쉽고 명확하게 계층구조에서 깊이 있는 컴포넌트와 높이 있는 state 사이의 양방향 바인딩을 설정할 수 있습니다.
|
||||
|
||||
checkbox의 `value` 어트리뷰트는 다른 것과 다르게 checkbox가 체크되었을 때 폼 submit에 값이 전달되는 것에 주의하세요.(기본값 `on`) 그래서 `value` 어트리뷰트는 checkbox가 체크되거나 해제될 때 업데이트되지 않습니다. checkbox에서는 `valueLink`대신 `checkedLink`를 사용하셔야 합니다.
|
||||
```
|
||||
<input type="checkbox" checkedLink={this.linkState('booleanValue')} />
|
||||
```
|
||||
|
||||
## 내부 구조
|
||||
|
||||
`ReactLink`에는 크게 인스턴스를 생성하는 면과 사용하는 면이 있습니다. `ReactLink`가 얼마나 간단한지 확인하기 위해, 이 부분들을 보다 명시적으로 고쳐 봅시다.
|
||||
|
||||
### LinkedStateMixin 없이 ReactLink 쓰기
|
||||
|
||||
```javascript{5-7,9-12}
|
||||
var WithoutMixin = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {message: 'Hello!'};
|
||||
},
|
||||
handleChange: function(newValue) {
|
||||
this.setState({message: newValue});
|
||||
},
|
||||
render: function() {
|
||||
var valueLink = {
|
||||
value: this.state.message,
|
||||
requestChange: this.handleChange
|
||||
};
|
||||
return <input type="text" valueLink={valueLink} />;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
보시다시피, `ReactLink` 객체는 `value`와 `requestChange` prop만 가지는 매우 간단한 객체입니다. `LinkedStateMixin`도 간단합니다. 그냥 `this.state`의 값과 `this.setState()`에서 호출되는 콜백을 필드로 가질 뿐입니다.
|
||||
|
||||
### valueLink 없이 ReactLink 쓰기
|
||||
|
||||
```javascript
|
||||
var LinkedStateMixin = require('react-addons-linked-state-mixin');
|
||||
|
||||
var WithoutLink = React.createClass({
|
||||
mixins: [LinkedStateMixin],
|
||||
getInitialState: function() {
|
||||
return {message: 'Hello!'};
|
||||
},
|
||||
render: function() {
|
||||
var valueLink = this.linkState('message');
|
||||
var handleChange = function(e) {
|
||||
valueLink.requestChange(e.target.value);
|
||||
};
|
||||
return <input type="text" value={valueLink.value} onChange={handleChange} />;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
`valueLink` prop도 간단합니다. 단순히 `onChange` 이벤트를 처리하고 `this.props.valueLink.requestChange()`를 호출하고 `this.props.value`대신 `this.props.valueLink.value`를 사용합니다. 그게 다에요!
|
||||
@@ -1,117 +0,0 @@
|
||||
---
|
||||
id: two-way-binding-helpers-zh-CN
|
||||
title: 双向绑定辅助
|
||||
permalink: docs/two-way-binding-helpers-zh-CN.html
|
||||
prev: animation-zh-CN.html
|
||||
next: test-utils-zh-CN.html
|
||||
---
|
||||
|
||||
`ReactLink` 是一个用React表达双向绑定的简单方法。
|
||||
|
||||
> 注意：
|
||||
>
|
||||
> 在 React v15 中 ReactLink 被弃用了。推荐明确的设置值和变动的处理，而不是使用 ReactLink。
|
||||
|
||||
在React里，数据单向流动： 从拥有者到子级。这是因为数据只单向流动[the Von Neumann model of computing](https://en.wikipedia.org/wiki/Von_Neumann_architecture)。你可以把它想象为 “单向数据绑定”。
|
||||
|
||||
然而，有很多应用需要你去读某些数据并回流他们到你的程序。例如，当开发forms，你会常常想更新一些React `state` 当你收到用户输入的时候。或者也许你想在JavaScript完成布局并相应一些DOM元素大小的变化。
|
||||
|
||||
在React里，你可以用监听 "change" 事件来实现它，从你的数据源（通常是DOM）读取并在你的某个组件调用 `setState()` 。明确的"Closing the data flow loop" 致使了更容易理解和维护的程序。更多信息见[our forms documentation](/react/docs/forms.html).
|
||||
|
||||
双向绑定 -- 隐含的强迫DOM里的某些值总是和某些React `state` 同步 -- 简洁并支持大量多样的应用。 我们提供了 `ReactLink`：设置如上描述的通用数据回流模式的语法糖，或者 "linking" 某些数据结构到 React `state`.
|
||||
|
||||
> 注意:
|
||||
>
|
||||
> `ReactLink` 只是一层对 `onChange`/`setState()` 模式的薄包装。它没有根本性的改变你的React应用里数据如何流动。
|
||||
|
||||
## ReactLink: 之前和之后
|
||||
|
||||
这里有一个简单的 不用 `ReactLink` 的 form 例子：
|
||||
|
||||
```javascript
|
||||
var NoLink = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {message: 'Hello!'};
|
||||
},
|
||||
handleChange: function(event) {
|
||||
this.setState({message: event.target.value});
|
||||
},
|
||||
render: function() {
|
||||
var message = this.state.message;
|
||||
return <input type="text" value={message} onChange={this.handleChange} />;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
这个工作的很好并且数据如何流动很清晰，然而，当有大量的 form fields时，可能会有些冗长。让我们使用 `ReactLink` 来节省我们的输入：
|
||||
|
||||
```javascript{4,9}
|
||||
var LinkedStateMixin = require('react-addons-linked-state-mixin');
|
||||
|
||||
var WithLink = React.createClass({
|
||||
mixins: [LinkedStateMixin],
|
||||
getInitialState: function() {
|
||||
return {message: 'Hello!'};
|
||||
},
|
||||
render: function() {
|
||||
return <input type="text" valueLink={this.linkState('message')} />;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
`LinkedStateMixin` 添加了一个 `linkState()` 方法到你的React组件。`linkState()` 返回一个 `ReactLink` 包含当前React state值的对象和一个改变它的回调函数。
|
||||
|
||||
`ReactLink` 对象可以作为props在树中上下传递，所以很容易（显示的）在深层次的组件和高层次的state之间 设置双向绑定。
|
||||
|
||||
注意 checkboxes 有一个关于他们 `value` 属性的特殊行为，这个行为是 如果checkbox被选中 值会在表单提交时被发送。 `value` 不会 checkbox 选中或是不选中时更新。对于checkboxes，你应该用`checkedLink` 代替 `valueLink`:
|
||||
```
|
||||
<input type="checkbox" checkedLink={this.linkState('booleanValue')} />
|
||||
```
|
||||
|
||||
## 引擎盖下
|
||||
|
||||
这里对 `ReactLink`有两方面：创建`ReactLink`的实例以及使用它的地方。为了证明`ReactLink`有多简单，让我们重写两方面一边更好的理解。
|
||||
|
||||
### ReactLink Without LinkedStateMixin
|
||||
|
||||
```javascript{5-7,9-12}
|
||||
var WithoutMixin = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {message: 'Hello!'};
|
||||
},
|
||||
handleChange: function(newValue) {
|
||||
this.setState({message: newValue});
|
||||
},
|
||||
render: function() {
|
||||
var valueLink = {
|
||||
value: this.state.message,
|
||||
requestChange: this.handleChange
|
||||
};
|
||||
return <input type="text" valueLink={valueLink} />;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
正如你所见，`ReactLink`对象是非常简单,只有`value`和`requestChange`属性.并且`LinkStateMixin`也很简单:它只是作用(populates)于`this.state`的元素值并且回调名为`this.setState()`的函数.
|
||||
|
||||
### ReactLink Without valueLink
|
||||
|
||||
```javascript
|
||||
var LinkedStateMixin = require('react-addons-linked-state-mixin');
|
||||
|
||||
var WithoutLink = React.createClass({
|
||||
mixins: [LinkedStateMixin],
|
||||
getInitialState: function() {
|
||||
return {message: 'Hello!'};
|
||||
},
|
||||
render: function() {
|
||||
var valueLink = this.linkState('message');
|
||||
var handleChange = function(e) {
|
||||
valueLink.requestChange(e.target.value);
|
||||
};
|
||||
return <input type="text" value={valueLink.value} onChange={handleChange} />;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
对于`valueLink`的属性同样也很简单,它只是简单的处理`onChange`事件,调用`this.props.valueLink.requestChange()`的时候也使用`this.props.valueLink.requestChange()`代替`this.props.value`.这就是双向绑定!
|
||||
@@ -1,62 +0,0 @@
|
||||
---
|
||||
id: class-name-manipulation-it-IT
|
||||
title: Manipolazione del Nome di Classe
|
||||
permalink: docs/class-name-manipulation-it-IT.html
|
||||
prev: two-way-binding-helpers-it-IT.html
|
||||
next: test-utils-it-IT.html
|
||||
---
|
||||
|
||||
> NOTA:
|
||||
>
|
||||
> Questo modulo esiste adesso in forma separata come [JedWatson/classnames](https://github.com/JedWatson/classnames) ed è indipendente da React. Questo add-on verrà quindi rimosso nell'immediato futuro.
|
||||
|
||||
`classSet()` è una elegante utility per manipolare facilmente la stringa dell'attributo `class` del DOM.
|
||||
|
||||
Ecco uno scenario comune e la sua soluzione senza `classSet()`:
|
||||
|
||||
```javascript
|
||||
// all'interno di un componente React `<Message />`
|
||||
render: function() {
|
||||
var classString = 'message';
|
||||
if (this.props.isImportant) {
|
||||
classString += ' message-important';
|
||||
}
|
||||
if (this.props.isRead) {
|
||||
classString += ' message-read';
|
||||
}
|
||||
// 'message message-important message-read'
|
||||
return <div className={classString}>Fantastico, vediamoci lì.</div>;
|
||||
}
|
||||
```
|
||||
|
||||
Questo può facilmente diventare noioso, in quanto assegnare stringhe per nomi di classi può essere difficile da leggere e soggetto ad errori. `classSet()` risolve questo problema:
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
var cx = React.addons.classSet;
|
||||
var classes = cx({
|
||||
'message': true,
|
||||
'message-important': this.props.isImportant,
|
||||
'message-read': this.props.isRead
|
||||
});
|
||||
// same final string, but much cleaner
|
||||
return <div className={classes}>Fantastico, vediamoci lì.</div>;
|
||||
}
|
||||
```
|
||||
|
||||
Quando usi `classSet()`, passa un oggetto le cui chiavi sono i nomi di classe CSS di cui potresti o meno avere bisogno. Valori di verità risulteranno nell'inclusione della chiave nella stringa risultante.
|
||||
|
||||
`classSet()` ti permette inoltre di passare nomi di classe che devono essere concatenati come argomenti:
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
var cx = React.addons.classSet;
|
||||
var importantModifier = 'message-important';
|
||||
var readModifier = 'message-read';
|
||||
var classes = cx('message', importantModifier, readModifier);
|
||||
// Final string is 'message message-important message-read'
|
||||
return <div className={classes}>Fantastico, vediamoci lì.</div>;
|
||||
}
|
||||
```
|
||||
|
||||
Niente più hack per concatenare le stringhe!
|
||||
@@ -1,61 +0,0 @@
|
||||
---
|
||||
id: class-name-manipulation
|
||||
title: クラス名の操作
|
||||
permalink: docs/class-name-manipulation-ja-JP.html
|
||||
prev: two-way-binding-helpers-ja-JP.html
|
||||
next: test-utils-ja-JP.html
|
||||
---
|
||||
|
||||
> 注意:
|
||||
> このモジュールは現在[JedWatson/classnames](https://github.com/JedWatson/classnames)に独立して存在しており、Reactは変更を検知していません。したがって、こちらは将来削除される予定です。
|
||||
|
||||
`classSet()` はDOMの `class` 文字列を簡単に操作するすっきりとしたユーティリティです。
|
||||
|
||||
以下は、 `classSet()` を使用しない共通なシナリオと解決策です。
|
||||
|
||||
```javascript
|
||||
// `<Message />` などの中のReactコンポーネント
|
||||
render: function() {
|
||||
var classString = 'message';
|
||||
if (this.props.isImportant) {
|
||||
classString += ' message-important';
|
||||
}
|
||||
if (this.props.isRead) {
|
||||
classString += ' message-read';
|
||||
}
|
||||
// 'message message-important message-read'
|
||||
return <div className={classString}>Great, I'll be there.</div>;
|
||||
}
|
||||
```
|
||||
|
||||
上記は、クラス名を文字列として渡しているので、面倒で、読みにくく、エラーが発生しやすくなります。以下のように、 `classSet()` を使用するとこの問題が解決します。
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
var cx = React.addons.classSet;
|
||||
var classes = cx({
|
||||
'message': true,
|
||||
'message-important': this.props.isImportant,
|
||||
'message-read': this.props.isRead
|
||||
});
|
||||
// 同様に最終的には文字列になりますが、クリアにはなります
|
||||
return <div className={classes}>Great, I'll be there.</div>;
|
||||
}
|
||||
```
|
||||
|
||||
`classSet()` を使用する際には、キーと、必要であったり、必要でないCSSのクラス名をオブジェクトとして渡してください。値が真であるものはキーとなり、最終的には文字列の一部になります。
|
||||
|
||||
`classSet()` もまた、以下のように連結した文字列の引数としてクラス名を渡します。
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
var cx = React.addons.classSet;
|
||||
var importantModifier = 'message-important';
|
||||
var readModifier = 'message-read';
|
||||
var classes = cx('message', importantModifier, readModifier);
|
||||
// 最終的な文字列は 'message message-important message-read'
|
||||
return <div className={classes}>Great, I'll be there.</div>;
|
||||
}
|
||||
```
|
||||
|
||||
文字列の連結を手で書くのはやめましょう！
|
||||
@@ -1,62 +0,0 @@
|
||||
---
|
||||
id: class-name-manipulation-ko-KR
|
||||
title: 클래스 이름 조작
|
||||
permalink: docs/class-name-manipulation-ko-KR.html
|
||||
prev: two-way-binding-helpers-ko-KR.html
|
||||
next: test-utils-ko-KR.html
|
||||
---
|
||||
|
||||
> 주의:
|
||||
>
|
||||
> 이 모듈은 폐기예정입니다. 대신 [JedWatson/classnames](https://github.com/JedWatson/classnames)를 사용하세요.
|
||||
|
||||
`classSet()`은 간단히 DOM `class` 문자열을 조작하는 편리한 도구입니다.
|
||||
|
||||
일반적으로 있을법한 경우와 `classSet()`을 사용하지 않았을 때의 처리법을 보시죠.
|
||||
|
||||
```javascript
|
||||
// 어떤 `<Message />` React 컴포넌트의 안쪽
|
||||
render: function() {
|
||||
var classString = 'message';
|
||||
if (this.props.isImportant) {
|
||||
classString += ' message-important';
|
||||
}
|
||||
if (this.props.isRead) {
|
||||
classString += ' message-read';
|
||||
}
|
||||
// 'message message-important message-read'
|
||||
return <div className={classString}>좋아요, 거기서 봅시다.</div>;
|
||||
}
|
||||
```
|
||||
|
||||
이것은 순식간에 장황해질 수 있습니다. 클래스 이름 문자열은 읽기 어렵고 에러가 발생하기도 쉽죠. `classSet()`가 이 문제를 해결할 수 있습니다.
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
var cx = React.addons.classSet;
|
||||
var classes = cx({
|
||||
'message': true,
|
||||
'message-important': this.props.isImportant,
|
||||
'message-read': this.props.isRead
|
||||
});
|
||||
// 최종 문자열은 동일하지만, 훨씬 깔끔함
|
||||
return <div className={classes}>좋아요, 거기서 봅시다.</div>;
|
||||
}
|
||||
```
|
||||
|
||||
`classSet()`을 사용할 때 사용할지 안할지 잘 모르는 CSS 클래스 이름 키와 함께 객체를 전달합니다. true로 간주되는(Truthy) 값은 키를 결과 문자열의 일부로 만듭니다.
|
||||
|
||||
`classSet()`은 클래스 이름을 인자로 넘겨 연결되게 할 수도 있습니다.
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
var cx = React.addons.classSet;
|
||||
var importantModifier = 'message-important';
|
||||
var readModifier = 'message-read';
|
||||
var classes = cx('message', importantModifier, readModifier);
|
||||
// 최종 문자열은 'message message-important message-read'
|
||||
return <div className={classes}>좋아요, 거기서 봅시다.</div>;
|
||||
}
|
||||
```
|
||||
|
||||
복잡한 문자열 연결은 이제 안하셔도 됩니다!
|
||||
@@ -1,11 +0,0 @@
|
||||
---
|
||||
id: class-name-manipulation
|
||||
title: Class Name Manipulation
|
||||
permalink: docs/class-name-manipulation.html
|
||||
prev: two-way-binding-helpers.html
|
||||
next: test-utils.html
|
||||
---
|
||||
|
||||
> NOTE:
|
||||
>
|
||||
> This module has been deprecated; use [JedWatson/classnames](https://github.com/JedWatson/classnames) instead.
|
||||
@@ -1,11 +0,0 @@
|
||||
---
|
||||
id: class-name-manipulation-zh-CN
|
||||
title: 类名操纵
|
||||
permalink: docs/class-name-manipulation-zh-CN.html
|
||||
prev: two-way-binding-helpers-zh-CN.html
|
||||
next: test-utils-zh-CN.html
|
||||
---
|
||||
|
||||
> NOTE:
|
||||
>
|
||||
> 此模块已被弃用; 用 [JedWatson/classnames](https://github.com/JedWatson/classnames) 替代.
|
||||
@@ -1,233 +0,0 @@
|
||||
---
|
||||
id: test-utils-it-IT
|
||||
title: Utilità di Test
|
||||
permalink: docs/test-utils-it-IT.html
|
||||
prev: two-way-binding-helpers-it-IT.html
|
||||
next: clone-with-props-it-IT.html
|
||||
---
|
||||
|
||||
`React.addons.TestUtils` semplifica la validazione dei componenti React nel framework di test di tua scelta (noi utilizziamo [Jest](https://facebook.github.io/jest/)).
|
||||
|
||||
### Simulate
|
||||
|
||||
```javascript
|
||||
Simulate.{eventName}(
|
||||
DOMElement element,
|
||||
[object eventData]
|
||||
)
|
||||
```
|
||||
|
||||
Simula l'inoltro di un evento su un nodo DOM con dei dati dell'evento opzionali `eventData`. **Questa è probabilmente l'utilità più essenziale in `ReactTestUtils`.**
|
||||
|
||||
**Cliccare un elemento**
|
||||
|
||||
```javascript
|
||||
var node = ReactDOM.findDOMNode(this.refs.button);
|
||||
React.addons.TestUtils.Simulate.click(node);
|
||||
```
|
||||
|
||||
**Cambiare il valore di un campo di input e in seguito premere INVIO**
|
||||
|
||||
```javascript
|
||||
var node = ReactDOM.findDOMNode(this.refs.input);
|
||||
node.value = 'giraffe';
|
||||
React.addons.TestUtils.Simulate.change(node);
|
||||
React.addons.TestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13});
|
||||
```
|
||||
|
||||
*nota che dovrai fornire tu stesso ciascuna proprietà dell'evento utilizzata nel tuo componente (ad es. keyCode, which, etc...) in quanto React non crea alcuna di esse per te*
|
||||
|
||||
`Simulate` possiede un metodo per ciascun evento che React comprende.
|
||||
|
||||
### renderIntoDocument
|
||||
|
||||
```javascript
|
||||
ReactComponent renderIntoDocument(
|
||||
ReactElement instance
|
||||
)
|
||||
```
|
||||
|
||||
Effettua il rendering di un componente in un nodo DOM staccato dal documento. **Questa funzione richiede la presenza del DOM.**
|
||||
|
||||
### mockComponent
|
||||
|
||||
```javascript
|
||||
object mockComponent(
|
||||
function componentClass,
|
||||
[string mockTagName]
|
||||
)
|
||||
```
|
||||
|
||||
Passa il mock di un componente a questo metodo per aumentarlo con metodi utili che gli permettono di essere utilizzato come un componente React fantoccio. Anziché essere visualizzato come al solito, il componente diventerà un semplice `<div>` (o qualsiasi altro tag se fornito come valore di `mockTagName`) contenente ciascun figlio fornito.
|
||||
|
||||
### isElement
|
||||
|
||||
```javascript
|
||||
boolean isElement(
|
||||
ReactElement element
|
||||
)
|
||||
```
|
||||
|
||||
Restituisce `true` se `element` è un qualunque ReactElement.
|
||||
|
||||
### isElementOfType
|
||||
|
||||
```javascript
|
||||
boolean isElementOfType(
|
||||
ReactElement element,
|
||||
function componentClass
|
||||
)
|
||||
```
|
||||
|
||||
Restituisce `true` se `element` è un ReactElement il cui tipo è la classe React `componentClass`.
|
||||
|
||||
### isDOMComponent
|
||||
|
||||
```javascript
|
||||
boolean isDOMComponent(
|
||||
ReactComponent instance
|
||||
)
|
||||
```
|
||||
|
||||
Restituisce `true` se `instance` è un componente DOM (come ad esempio `<div>` o `<span>`).
|
||||
|
||||
### isCompositeComponent
|
||||
|
||||
```javascript
|
||||
boolean isCompositeComponent(
|
||||
ReactComponent instance
|
||||
)
|
||||
```
|
||||
|
||||
Restituisce `true` se `instance` è un componente composito (creato tramite `React.createClass()`).
|
||||
|
||||
### isCompositeComponentWithType
|
||||
|
||||
```javascript
|
||||
boolean isCompositeComponentWithType(
|
||||
ReactComponent instance,
|
||||
function componentClass
|
||||
)
|
||||
```
|
||||
|
||||
Restituisce `true` se `instance` è un componente composito (creato tramite `React.createClass()`) il cui tipo è una classe React dal nome `componentClass`.
|
||||
|
||||
### findAllInRenderedTree
|
||||
|
||||
```javascript
|
||||
array findAllInRenderedTree(
|
||||
ReactComponent tree,
|
||||
function test
|
||||
)
|
||||
```
|
||||
|
||||
Attraversa tutti i componenti in `tree` e accumula tutti i componenti per i quali `test(component)` è `true`. Non è molto utile usata da sola, ma diventa ptente se usata come primitiva per altre utilità di test.
|
||||
|
||||
### scryRenderedDOMComponentsWithClass
|
||||
|
||||
```javascript
|
||||
array scryRenderedDOMComponentsWithClass(
|
||||
ReactComponent tree, string className
|
||||
)
|
||||
```
|
||||
|
||||
Trova tutte le istanze di componenti nell'albero visualizzato che sono componenti DOM il cui nome di classe corrisponde a `className`.
|
||||
|
||||
### findRenderedDOMComponentWithClass
|
||||
|
||||
```javascript
|
||||
ReactComponent findRenderedDOMComponentWithClass(
|
||||
ReactComponent tree,
|
||||
string className
|
||||
)
|
||||
```
|
||||
|
||||
Simile a `scryRenderedDOMComponentsWithClass()` ma si aspetta di trovare un solo risultato, e restituisce quel solo risultato, oppure lancia un'eccezione se viene trovato qualunque altro numero di occorrenze diverso da uno.
|
||||
|
||||
### scryRenderedDOMComponentsWithTag
|
||||
|
||||
```javascript
|
||||
array scryRenderedDOMComponentsWithTag(
|
||||
ReactComponent tree,
|
||||
string tagName
|
||||
)
|
||||
```
|
||||
|
||||
Trova tutte le istanze di componenti nell'albero visualizzato che sono componenti DOM il cui nome di tag corrisponde a `tagName`.
|
||||
|
||||
### findRenderedDOMComponentWithTag
|
||||
|
||||
```javascript
|
||||
ReactComponent findRenderedDOMComponentWithTag(
|
||||
ReactComponent tree,
|
||||
string tagName
|
||||
)
|
||||
```
|
||||
|
||||
Simile a `scryRenderedDOMComponentsWithTag()` ma si aspetta di trovare un solo risultato, e restituisce quel solo risultato, oppure lancia un'eccezione se viene trovato qualunque altro numero di occorrenze diverso da uno.
|
||||
|
||||
### scryRenderedComponentsWithType
|
||||
|
||||
```javascript
|
||||
array scryRenderedComponentsWithType(
|
||||
ReactComponent tree,
|
||||
function componentClass
|
||||
)
|
||||
```
|
||||
|
||||
Trova tutte le istanze di componenti il cui tipo corrisponde a `componentClass`.
|
||||
|
||||
### findRenderedComponentWithType
|
||||
|
||||
```javascript
|
||||
ReactComponent findRenderedComponentWithType(
|
||||
ReactComponent tree, function componentClass
|
||||
)
|
||||
```
|
||||
|
||||
Simile a `scryRenderedComponentsWithType()` si aspetta di trovare un solo risultato, oppure lancia un'eccezione se viene trovato qualunque altro numero di occorrenze diverso da uno.
|
||||
|
||||
|
||||
## Rendering superficiale
|
||||
|
||||
Il rendering superficiale è una caratteristica sperimentale che ti permette di effettuare il rendering di un componente "ad un livello di profondità" e asserire dei fatti su ciò che viene restituito dal suo metodo render, senza preoccuparti del comportamento dei componenti figli, i quali non sono né istanziati né viene effettuato il rendering. Questo non richiede la presenza di un DOM.
|
||||
|
||||
```javascript
|
||||
ReactShallowRenderer createRenderer()
|
||||
```
|
||||
|
||||
Chiama questo metodo nei tuoi test per creare un renderer superficiale. Puoi pensare ad esso come un "luogo" in cui effettuare il rendering del componente che stai validando, dove può rispondere ad eventi e aggiornarsi.
|
||||
|
||||
```javascript
|
||||
shallowRenderer.render(
|
||||
ReactElement element
|
||||
)
|
||||
```
|
||||
|
||||
Simile a `ReactDOM.render`.
|
||||
|
||||
```javascript
|
||||
ReactComponent shallowRenderer.getRenderOutput()
|
||||
```
|
||||
|
||||
Dopo che `render` è stato chiamato, restituisce un output di cui è stato effettuato un rendering superficiale. Puoi quindi iniziare ad asserire fatti sull'output. Ad esempio, se il metodo render del tuo componente resituisce:
|
||||
|
||||
```javascript
|
||||
<div>
|
||||
<span className="heading">Titolo</span>
|
||||
<Subcomponent foo="bar" />
|
||||
</div>
|
||||
```
|
||||
|
||||
Allora puoi asserire:
|
||||
|
||||
```javascript
|
||||
result = renderer.getRenderOutput();
|
||||
expect(result.type).toBe('div');
|
||||
expect(result.props.children).toEqual([
|
||||
<span className="heading">Titolo</span>,
|
||||
<Subcomponent foo="bar" />
|
||||
]);
|
||||
```
|
||||
|
||||
La validazione superficiale ha al momento alcune limitazioni, in particolare non supporta i riferimenti. Stiamo rilasciando questa caratteristica in anticipo e gradiremmo ascoltare il parere della comunità React per la direzione in cui debba evolvere.
|
||||
@@ -1,183 +0,0 @@
|
||||
---
|
||||
id: test-utils
|
||||
title: テストユーティリティ
|
||||
permalink: docs/test-utils-ja-JP.html
|
||||
prev: two-way-binding-helpers-ja-JP.html
|
||||
next: clone-with-props-ja-JP.html
|
||||
---
|
||||
|
||||
`React.addons.TestUtils` は選んだテストフレームワーク（私たちは[Jest](https://facebook.github.io/jest/)を使っています）において、Reactのコンポーネントをテストすることを簡単にします。
|
||||
|
||||
### Simulate
|
||||
|
||||
```javascript
|
||||
Simulate.{eventName}(DOMElement element, object eventData)
|
||||
```
|
||||
|
||||
オプションの `eventData` であるイベントデータと共に、DOMノードの上でイベントのディスパッチをシミュレートします。 **これは `ReactTestUtils` の中で最も有用なユーティリティでしょう。**
|
||||
|
||||
使用例:
|
||||
|
||||
```javascript
|
||||
var node = ReactDOM.findDOMNode(this.refs.input);
|
||||
React.addons.TestUtils.Simulate.click(node);
|
||||
React.addons.TestUtils.Simulate.change(node, {target: {value: 'Hello, world'}});
|
||||
React.addons.TestUtils.Simulate.keyDown(node, {key: "Enter"});
|
||||
```
|
||||
|
||||
`Simulate` はReactが理解出来る全てのイベントのためのメソッドを持っています。
|
||||
|
||||
### renderIntoDocument
|
||||
|
||||
```javascript
|
||||
ReactComponent renderIntoDocument(ReactElement instance)
|
||||
```
|
||||
|
||||
コンポーネントをドキュメントの中で分離したDOMノードにレンダリングします。 **この関数はDOMを必要とします。**
|
||||
|
||||
|
||||
### mockComponent
|
||||
|
||||
```javascript
|
||||
object mockComponent(function componentClass, string? mockTagName)
|
||||
```
|
||||
|
||||
有効なダミーのReactのコンポーネントとして使われることを許可するメソッドと共にこれを増強させるためにモックとなったコンポーネントモジュールをこのメソッドに渡してください。いつものようにレンダリングされる代わりに、コンポーネントは単純で、提供された子要素はどんなものでも含む `<div>` （`mockTagName` が提供されている場合はそのタグ）になるでしょう。
|
||||
|
||||
### isElement
|
||||
|
||||
```javascript
|
||||
boolean isElement(ReactElement element)
|
||||
```
|
||||
|
||||
`element` が何かしらのReactElementだった場合に `true` を返します。
|
||||
|
||||
### isElementOfType
|
||||
|
||||
```javascript
|
||||
boolean isElementOfType(ReactElement element, function componentClass)
|
||||
```
|
||||
|
||||
`element` がReactの `componentClass` 型であるReactElementだった場合に `true` を返します。
|
||||
|
||||
### isDOMComponent
|
||||
|
||||
```javascript
|
||||
boolean isDOMComponent(ReactComponent instance)
|
||||
```
|
||||
|
||||
`instance` がDOMのコンポーネントだった場合に `true` を返します( `<div>` や `<span>` のように)。
|
||||
|
||||
### isCompositeComponent
|
||||
|
||||
```javascript
|
||||
boolean isCompositeComponent(ReactComponent instance)`
|
||||
```
|
||||
|
||||
`instance` が複合的なコンポーネントだった場合に `true` を返します（`React.createClass()` で作成されるような）。
|
||||
|
||||
### isCompositeComponentWithType
|
||||
|
||||
```javascript
|
||||
boolean isCompositeComponentWithType(ReactComponent instance, function componentClass)
|
||||
```
|
||||
|
||||
`instance` が複合的なコンポーネントだった場合に `true` を返します（`React.createClass()` で作成され、型がReactの `componentClass` であるような）。
|
||||
|
||||
### findAllInRenderedTree
|
||||
|
||||
```javascript
|
||||
array findAllInRenderedTree(ReactComponent tree, function test)
|
||||
```
|
||||
|
||||
`tree` の中の全てのコンポーネントや `test(component)` が `true` となる蓄積された全てのコンポーネントを検討します。これはこれだけでは有用ではありませんが、他のテストユーティリティの根本として使われます。
|
||||
|
||||
### scryRenderedDOMComponentsWithClass
|
||||
|
||||
```javascript
|
||||
array scryRenderedDOMComponentsWithClass(ReactComponent tree, string className)
|
||||
```
|
||||
|
||||
レンダリングされたツリーの中で、DOMコンポーネントであり、クラス名が `className` にマッチする、コンポーネントの全てのインスタンスを見つけます。
|
||||
|
||||
### findRenderedDOMComponentWithClass
|
||||
|
||||
```javascript
|
||||
ReactComponent findRenderedDOMComponentWithClass(ReactComponent tree, string className)
|
||||
```
|
||||
|
||||
`scryRenderedDOMComponentsWithClass()` に似ていますが、結果が1つであること、それを返すこと、またはマッチする個数が1個以外だった場合に例外を投げることを予期します。
|
||||
|
||||
### scryRenderedDOMComponentsWithTag
|
||||
|
||||
```javascript
|
||||
array scryRenderedDOMComponentsWithTag(ReactComponent tree, string tagName)
|
||||
```
|
||||
|
||||
レンダリングされたツリーの中で、DOMコンポーネントであり、タグ名が `tagName` にマッチする、コンポーネントの全てのインスタンスを見つけます。
|
||||
|
||||
### findRenderedDOMComponentWithTag
|
||||
|
||||
```javascript
|
||||
ReactComponent findRenderedDOMComponentWithTag(ReactComponent tree, string tagName)
|
||||
```
|
||||
|
||||
`scryRenderedDOMComponentsWithTag()` に似ていますが、結果が1つであること、それを返すこと、またはマッチする個数が1個以外だった場合に例外を投げることを予期します。
|
||||
|
||||
### scryRenderedComponentsWithType
|
||||
|
||||
```javascript
|
||||
array scryRenderedComponentsWithType(ReactComponent tree, function componentClass)
|
||||
```
|
||||
|
||||
型名が `componentClass` と同様である、コンポーネントの全てのインスタンスを見つけます。
|
||||
|
||||
### findRenderedComponentWithType
|
||||
|
||||
```javascript
|
||||
ReactComponent findRenderedComponentWithType(ReactComponent tree, function componentClass)
|
||||
```
|
||||
|
||||
`scryRenderedComponentsWithType()` と同じですが、結果が1つであること、それを返すこと、またはマッチする個数が1個以外だった場合に例外を投げることを予期します。
|
||||
|
||||
## Shallow rendering
|
||||
|
||||
シャローレンダリングは"第一段階の深さ"であるコンポーネントをレンダリングすることを強制し、レンダリングメソッドが返すものについての事実をアサートし、インスタンスを生成したり、レンダリングされたりしない子のコンポーネントの振る舞いについては関心しない実験的な特徴です。これはDOMを必要としません。
|
||||
|
||||
```javascript
|
||||
ReactShallowRenderer createRenderer()
|
||||
```
|
||||
|
||||
シャローレンダラーを作成するにはこれをテストの中で呼んでください。これをあなたがテストするコンポーネントをレンダリングする場所であると考えることができます。この場所はイベントに返答したり、これ自身を更新したりできます。
|
||||
|
||||
```javascript
|
||||
shallowRenderer.render(ReactElement element)
|
||||
```
|
||||
|
||||
`ReactDOM.render` に同様。
|
||||
|
||||
```javascript
|
||||
ReactComponent shallowRenderer.getRenderOutput()
|
||||
```
|
||||
|
||||
`render` が呼ばれた後、浅くレンダリングされた出力を返します。その後、その出力に関しての事実をアサートすることができます。例えば、以下のように、コンポーネントのレンダリングメソッドが返してきた場合は、
|
||||
|
||||
```javascript
|
||||
<div>
|
||||
<span className="heading">Title</span>
|
||||
<Subcomponent foo="bar" />
|
||||
</div>
|
||||
```
|
||||
|
||||
以下のように、アサートできます。
|
||||
|
||||
```javascript
|
||||
result = renderer.getRenderOutput();
|
||||
expect(result.type).toBe('div');
|
||||
expect(result.props.children).toEqual([
|
||||
<span className="heading">Title</span>,
|
||||
<Subcomponent foo="bar" />
|
||||
]);
|
||||
```
|
||||
|
||||
シャローテスティングは現在、制限があります。はっきり言うと、参照をサポートしていません。私たちは、この特徴を早めにリリースし、これが、どのように進化していくか、Reactのコミュニティのフィードバックを評価するつもりです。
|
||||
@@ -1,236 +0,0 @@
|
||||
---
|
||||
id: test-utils-ko-KR
|
||||
title: 테스트 유틸리티
|
||||
permalink: docs/test-utils-ko-KR.html
|
||||
prev: two-way-binding-helpers-ko-KR.html
|
||||
next: clone-with-props-ko-KR.html
|
||||
---
|
||||
|
||||
`ReactTestUtils`는 선택한 테스트 프레임워크(React는 [Jest](https://facebook.github.io/jest/)를 사용)에서 React 컴포넌트를 테스트하기 쉽게 합니다.
|
||||
|
||||
```
|
||||
var ReactTestUtils = require('react-addons-test-utils');
|
||||
```
|
||||
|
||||
### Simulate
|
||||
|
||||
```javascript
|
||||
Simulate.{eventName}(
|
||||
DOMElement element,
|
||||
[object eventData]
|
||||
)
|
||||
```
|
||||
|
||||
DOM 노드에 이벤트 디스패치하는 것을 시뮬레이트합니다. 선택적으로 `eventData`를 통해 이벤트 데이터도 처리할 수 있습니다. **아마 `ReactTestUtils`에서 가장 유용한 유틸리티일 것 입니다.**
|
||||
|
||||
**엘리먼트 클릭**
|
||||
|
||||
```javascript
|
||||
// <button ref="button">...</button>
|
||||
var node = this.refs.button;
|
||||
ReactTestUtils.Simulate.click(node);
|
||||
```
|
||||
|
||||
**입력 필드의 값을 변경하고 엔터 누르기.**
|
||||
|
||||
```javascript
|
||||
// <input ref="input" />
|
||||
var node = this.refs.input;
|
||||
node.value = 'giraffe';
|
||||
ReactTestUtils.Simulate.change(node);
|
||||
ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13});
|
||||
```
|
||||
|
||||
*컴포넌트에서 사용할 이벤트 프로퍼티(예를 들어 keyCode, which, 등등...)는 React에서 만들어 주지 않으므로 직접 제공해야 합니다.*
|
||||
|
||||
`Simulate`에는 React가 이해하는 모든 이벤트에 대해 메소드가 있습니다.
|
||||
|
||||
### renderIntoDocument
|
||||
|
||||
```javascript
|
||||
ReactComponent renderIntoDocument(
|
||||
ReactElement instance
|
||||
)
|
||||
```
|
||||
|
||||
문서의 detach된 DOM 노드에 컴포넌트를 렌더합니다. **이 기능은 DOM을 필요로 합니다.**
|
||||
|
||||
> 주의:
|
||||
>
|
||||
> React를 임포트하기 **전에** `window`, `window.document`, `window.document.createElement`을 전역적으로 사용가능하게 해두어야 합니다. 아니면 React는 DOM과 `setState`같은 메소드가 동작하지 않는다고 생각할 수 있습니다.
|
||||
|
||||
### mockComponent
|
||||
|
||||
```javascript
|
||||
object mockComponent(
|
||||
function componentClass,
|
||||
[string mockTagName]
|
||||
)
|
||||
```
|
||||
|
||||
목 컴포넌트 모듈을 이 메소드에 넘겨 더미 React 컴포넌트로 사용할 수 있도록 합니다. 이 더미는 유용한 메소드와 함께 사용해 기능을 보강할 수 있습니다. 일반적인 렌더링과는 다르게, 컴포넌트는 제공된 자식을 포함하는 평범한 `<div>`가 됩니다. (`mockTagName`을 통해 div가 아닌 다른 태그를 지정해 줄 수도 있습니다.)
|
||||
|
||||
### isElement
|
||||
|
||||
```javascript
|
||||
boolean isElement(
|
||||
ReactElement element
|
||||
)
|
||||
```
|
||||
|
||||
`element`가 ReactElement면 `true`를 리턴합니다.
|
||||
|
||||
### isElementOfType
|
||||
|
||||
```javascript
|
||||
boolean isElementOfType(
|
||||
ReactElement element,
|
||||
function componentClass
|
||||
)
|
||||
```
|
||||
|
||||
`element`가 React `componentClass` 타입인 ReactElement면 `true`를 리턴합니다.
|
||||
|
||||
### isDOMComponent
|
||||
|
||||
```javascript
|
||||
boolean isDOMComponent(
|
||||
ReactComponent instance
|
||||
)
|
||||
```
|
||||
|
||||
`instance`가 (`<div>`나 `<span>`같은) DOM 컴포넌트면 `true`를 리턴합니다.
|
||||
|
||||
### isCompositeComponent
|
||||
|
||||
```javascript
|
||||
boolean isCompositeComponent(ReactComponent instance)`
|
||||
```
|
||||
|
||||
`instance`가 (`React.createClass()`로 생성된) 복합 컴포넌트면 `true`를 리턴합니다.
|
||||
|
||||
### isCompositeComponentWithType
|
||||
|
||||
```javascript
|
||||
boolean isCompositeComponentWithType(
|
||||
ReactComponent instance,
|
||||
function componentClass
|
||||
)
|
||||
```
|
||||
|
||||
`instance`가 (`React.createClass()`로 생성된) 복합 컴포넌트고 React `componentClass` 타입이면 `true`를 리턴합니다.
|
||||
|
||||
### findAllInRenderedTree
|
||||
|
||||
```javascript
|
||||
array findAllInRenderedTree(
|
||||
ReactComponent tree,
|
||||
function test
|
||||
)
|
||||
```
|
||||
|
||||
`tree`안의 모든 컴포넌트에서 `test(component)`가 `true`인 모든 컴포넌트를 모읍니다. 이것만으로는 그렇게 유용하지 않습니다만, 다른 테스트 유틸와 같이 사용합니다.
|
||||
|
||||
### scryRenderedDOMComponentsWithClass
|
||||
|
||||
```javascript
|
||||
array scryRenderedDOMComponentsWithClass(
|
||||
ReactComponent tree, string className
|
||||
)
|
||||
```
|
||||
렌더된 트리의 모든 컴포넌트 인스턴스 중에서 클래스 이름이 `className`인 DOM 컴포넌트들을 찾습니다.
|
||||
|
||||
### findRenderedDOMComponentWithClass
|
||||
|
||||
```javascript
|
||||
ReactComponent findRenderedDOMComponentWithClass(ReactComponent tree, string className)
|
||||
```
|
||||
|
||||
`scryRenderedDOMComponentsWithClass()`와 비슷하지만 하나의 결과만 기대될 때 사용합니다. 하나의 결과를 리턴하거나 한개 이상의 결과가 나온 경우에는 예외를 던집니다.
|
||||
|
||||
### scryRenderedDOMComponentsWithTag
|
||||
|
||||
```javascript
|
||||
array scryRenderedDOMComponentsWithTag(
|
||||
ReactComponent tree,
|
||||
string tagName
|
||||
)
|
||||
```
|
||||
|
||||
렌더된 트리의 모든 컴포넌트 인스턴스중에서 태그 이름이 `tagName`인 DOM 컴포넌트들을 찾습니다.
|
||||
|
||||
### findRenderedDOMComponentWithTag
|
||||
|
||||
```javascript
|
||||
ReactComponent findRenderedDOMComponentWithTag(
|
||||
ReactComponent tree,
|
||||
string tagName
|
||||
)
|
||||
```
|
||||
|
||||
`scryRenderedDOMComponentsWithTag()`와 비슷하지만 하나의 결과만 기대될 때 사용합니다. 하나의 결과를 리턴하거나 한개 이상의 결과가 나온 경우에는 예외를 던집니다.
|
||||
|
||||
### scryRenderedComponentsWithType
|
||||
|
||||
```javascript
|
||||
array scryRenderedComponentsWithType(
|
||||
ReactComponent tree,
|
||||
function componentClass
|
||||
)
|
||||
```
|
||||
|
||||
타입이 `componentClass`인 모든 컴포넌트 인스턴스를 찾습니다.
|
||||
|
||||
### findRenderedComponentWithType
|
||||
|
||||
```javascript
|
||||
ReactComponent findRenderedComponentWithType(
|
||||
ReactComponent tree, function componentClass
|
||||
)
|
||||
```
|
||||
|
||||
`scryRenderedComponentsWithType()`와 비슷하지만 하나의 결과만 기대될 때 사용합니다. 하나의 결과를 리턴하거나 한개 이상의 결과가 나온 경우에는 예외를 던집니다.
|
||||
|
||||
## 얕은 렌더링
|
||||
|
||||
얕은 렌더링은 "한 단계 깊이의" 컴포넌트를 렌더할 수 있는 실험적인 기능입니다. 자식 컴포넌트가 인스턴스화 되거나 렌더되는 등의 동작에 대한 걱정 없이 렌더 메소드가 반환하는 것만 검증합니다. 이 기능은 DOM이 필요하지 않습니다.
|
||||
|
||||
```javascript
|
||||
ReactShallowRenderer createRenderer()
|
||||
```
|
||||
|
||||
테스트에서 얕은 렌더러를 생성하고자 할때 호출합니다. 이를 이벤트와 업데이트에 스스로 반응하는 컴포넌트를 렌더하기 위한 "장소"라고 생각할 수 있습니다.
|
||||
|
||||
```javascript
|
||||
shallowRenderer.render(
|
||||
ReactElement element
|
||||
)
|
||||
```
|
||||
|
||||
`ReactDOM.render`와 유사합니다.
|
||||
|
||||
```javascript
|
||||
ReactElement shallowRenderer.getRenderOutput()
|
||||
```
|
||||
|
||||
`render`가 호출 된 후, 얕게 렌더된 결과물을 반환합니다. 그 후엔 결과물에 대한 검증을 시작할 수 있습니다. 예를 들어 컴포넌트의 렌더 메소드가 다음을 반환한다면:
|
||||
|
||||
```javascript
|
||||
<div>
|
||||
<span className="heading">Title</span>
|
||||
<Subcomponent foo="bar" />
|
||||
</div>
|
||||
```
|
||||
|
||||
그 후에는 검증할 수 있습니다:
|
||||
|
||||
```javascript
|
||||
result = renderer.getRenderOutput();
|
||||
expect(result.type).toBe('div');
|
||||
expect(result.props.children).toEqual([
|
||||
<span className="heading">Title</span>,
|
||||
<Subcomponent foo="bar" />
|
||||
]);
|
||||
```
|
||||
|
||||
현재 얕은 테스트는 refs를 지원하지 않는 등 몇가지 제약사항이 있습니다. 우리는 이 기능을 빠르게 먼저 배포하고 React 커뮤니티의 피드백을 받아 나아갈 방향을 찾고자 합니다.
|
||||
@@ -1,250 +0,0 @@
|
||||
---
|
||||
id: test-utils
|
||||
title: Test Utilities
|
||||
permalink: docs/test-utils.html
|
||||
prev: two-way-binding-helpers.html
|
||||
next: clone-with-props.html
|
||||
---
|
||||
|
||||
`ReactTestUtils` makes it easy to test React components in the testing framework of your choice. At Facebook we use [Jest](https://facebook.github.io/jest/) for painless JavaScript testing. Learn how to get started with Jest through the Jest website's [React Tutorial](http://facebook.github.io/jest/docs/tutorial-react.html#content).
|
||||
|
||||
```
|
||||
var ReactTestUtils = require('react-addons-test-utils');
|
||||
```
|
||||
|
||||
> Note:
|
||||
>
|
||||
> Airbnb has released a testing utility called Enzyme, which makes it easy to assert, manipulate, and traverse your React Components' output. If you're deciding on a unit testing utility to use together with Jest, or any other test runner, it's worth checking out: [http://airbnb.io/enzyme/](http://airbnb.io/enzyme/)
|
||||
|
||||
### Simulate
|
||||
|
||||
```javascript
|
||||
Simulate.{eventName}(
|
||||
DOMElement element,
|
||||
[object eventData]
|
||||
)
|
||||
```
|
||||
|
||||
Simulate an event dispatch on a DOM node with optional `eventData` event data. **This is possibly the single most useful utility in `ReactTestUtils`.**
|
||||
|
||||
**Clicking an element**
|
||||
|
||||
```javascript
|
||||
// <button ref="button">...</button>
|
||||
var node = this.refs.button;
|
||||
ReactTestUtils.Simulate.click(node);
|
||||
```
|
||||
|
||||
**Changing the value of an input field and then pressing ENTER.**
|
||||
|
||||
```javascript
|
||||
// <input ref="input" />
|
||||
var node = this.refs.input;
|
||||
node.value = 'giraffe';
|
||||
ReactTestUtils.Simulate.change(node);
|
||||
ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13});
|
||||
```
|
||||
|
||||
*Note that you will have to provide any event property that you're using in your component (e.g. keyCode, which, etc...) as React is not creating any of these for you.*
|
||||
|
||||
`Simulate` has a method for [every event that React understands](/react/docs/events.html#supported-events).
|
||||
|
||||
### renderIntoDocument
|
||||
|
||||
```javascript
|
||||
ReactComponent renderIntoDocument(
|
||||
ReactElement instance
|
||||
)
|
||||
```
|
||||
|
||||
Render a component into a detached DOM node in the document. **This function requires a DOM.**
|
||||
|
||||
> Note:
|
||||
>
|
||||
> You will need to have `window`, `window.document` and `window.document.createElement`
|
||||
globally available **before** you import React. Otherwise React will think it can't access the DOM and methods like `setState` won't work.
|
||||
|
||||
### mockComponent
|
||||
|
||||
```javascript
|
||||
object mockComponent(
|
||||
function componentClass,
|
||||
[string mockTagName]
|
||||
)
|
||||
```
|
||||
|
||||
Pass a mocked component module to this method to augment it with useful methods that allow it to be used as a dummy React component. Instead of rendering as usual, the component will become a simple `<div>` (or other tag if `mockTagName` is provided) containing any provided children.
|
||||
|
||||
### isElement
|
||||
|
||||
```javascript
|
||||
boolean isElement(
|
||||
ReactElement element
|
||||
)
|
||||
```
|
||||
|
||||
Returns `true` if `element` is any ReactElement.
|
||||
|
||||
### isElementOfType
|
||||
|
||||
```javascript
|
||||
boolean isElementOfType(
|
||||
ReactElement element,
|
||||
function componentClass
|
||||
)
|
||||
```
|
||||
|
||||
Returns `true` if `element` is a ReactElement whose type is of a React `componentClass`.
|
||||
|
||||
### isDOMComponent
|
||||
|
||||
```javascript
|
||||
boolean isDOMComponent(
|
||||
ReactComponent instance
|
||||
)
|
||||
```
|
||||
|
||||
Returns `true` if `instance` is a DOM component (such as a `<div>` or `<span>`).
|
||||
|
||||
### isCompositeComponent
|
||||
|
||||
```javascript
|
||||
boolean isCompositeComponent(
|
||||
ReactComponent instance
|
||||
)
|
||||
```
|
||||
|
||||
Returns `true` if `instance` is a composite component (created with `React.createClass()`).
|
||||
|
||||
### isCompositeComponentWithType
|
||||
|
||||
```javascript
|
||||
boolean isCompositeComponentWithType(
|
||||
ReactComponent instance,
|
||||
function componentClass
|
||||
)
|
||||
```
|
||||
|
||||
Returns `true` if `instance` is a composite component (created with `React.createClass()`) whose type is of a React `componentClass`.
|
||||
|
||||
### findAllInRenderedTree
|
||||
|
||||
```javascript
|
||||
array findAllInRenderedTree(
|
||||
ReactComponent tree,
|
||||
function test
|
||||
)
|
||||
```
|
||||
|
||||
Traverse all components in `tree` and accumulate all components where `test(component)` is `true`. This is not that useful on its own, but it's used as a primitive for other test utils.
|
||||
|
||||
### scryRenderedDOMComponentsWithClass
|
||||
|
||||
```javascript
|
||||
array scryRenderedDOMComponentsWithClass(
|
||||
ReactComponent tree,
|
||||
string className
|
||||
)
|
||||
```
|
||||
|
||||
Finds all DOM elements of components in the rendered tree that are DOM components with the class name matching `className`.
|
||||
|
||||
### findRenderedDOMComponentWithClass
|
||||
|
||||
```javascript
|
||||
DOMElement findRenderedDOMComponentWithClass(
|
||||
ReactComponent tree,
|
||||
string className
|
||||
)
|
||||
```
|
||||
|
||||
Like `scryRenderedDOMComponentsWithClass()` but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one.
|
||||
|
||||
### scryRenderedDOMComponentsWithTag
|
||||
|
||||
```javascript
|
||||
array scryRenderedDOMComponentsWithTag(
|
||||
ReactComponent tree,
|
||||
string tagName
|
||||
)
|
||||
```
|
||||
|
||||
Finds all DOM elements of components in the rendered tree that are DOM components with the tag name matching `tagName`.
|
||||
|
||||
### findRenderedDOMComponentWithTag
|
||||
|
||||
```javascript
|
||||
DOMElement findRenderedDOMComponentWithTag(
|
||||
ReactComponent tree,
|
||||
string tagName
|
||||
)
|
||||
```
|
||||
|
||||
Like `scryRenderedDOMComponentsWithTag()` but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one.
|
||||
|
||||
### scryRenderedComponentsWithType
|
||||
|
||||
```javascript
|
||||
array scryRenderedComponentsWithType(
|
||||
ReactComponent tree,
|
||||
function componentClass
|
||||
)
|
||||
```
|
||||
|
||||
Finds all instances of components with type equal to `componentClass`.
|
||||
|
||||
### findRenderedComponentWithType
|
||||
|
||||
```javascript
|
||||
ReactComponent findRenderedComponentWithType(
|
||||
ReactComponent tree,
|
||||
function componentClass
|
||||
)
|
||||
```
|
||||
|
||||
Same as `scryRenderedComponentsWithType()` but expects there to be one result and returns that one result, or throws exception if there is any other number of matches besides one.
|
||||
|
||||
## Shallow rendering
|
||||
|
||||
Shallow rendering is an experimental feature that lets you render a component "one level deep" and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered. This does not require a DOM.
|
||||
|
||||
```javascript
|
||||
ReactShallowRenderer createRenderer()
|
||||
```
|
||||
|
||||
Call this in your tests to create a shallow renderer. You can think of this as a "place" to render the component you're testing, where it can respond to events and update itself.
|
||||
|
||||
```javascript
|
||||
shallowRenderer.render(
|
||||
ReactElement element
|
||||
)
|
||||
```
|
||||
|
||||
Similar to `ReactDOM.render`.
|
||||
|
||||
```javascript
|
||||
ReactElement shallowRenderer.getRenderOutput()
|
||||
```
|
||||
|
||||
After `render` has been called, returns shallowly rendered output. You can then begin to assert facts about the output. For example, if your component's render method returns:
|
||||
|
||||
```javascript
|
||||
<div>
|
||||
<span className="heading">Title</span>
|
||||
<Subcomponent foo="bar" />
|
||||
</div>
|
||||
```
|
||||
|
||||
Then you can assert:
|
||||
|
||||
```javascript
|
||||
var renderer = ReactTestUtils.createRenderer();
|
||||
result = renderer.getRenderOutput();
|
||||
expect(result.type).toBe('div');
|
||||
expect(result.props.children).toEqual([
|
||||
<span className="heading">Title</span>,
|
||||
<Subcomponent foo="bar" />
|
||||
]);
|
||||
```
|
||||
|
||||
Shallow testing currently has some limitations, namely not supporting refs. We're releasing this feature early and would appreciate the React community's feedback on how it should evolve.
|
||||
@@ -1,244 +0,0 @@
|
||||
---
|
||||
id: test-utils-zh-CN
|
||||
title: 测试工具
|
||||
permalink: docs/test-utils-zh-CN.html
|
||||
prev: two-way-binding-helpers-zh-CN.html
|
||||
next: clone-with-props-zh-CN.html
|
||||
---
|
||||
|
||||
`ReactTestUtils` 使你在你选择的测试框架中 (我们使用 [Jest](https://facebook.github.io/jest/)) 测试 React 组件变得容易。
|
||||
|
||||
```
|
||||
var ReactTestUtils = require('react-addons-test-utils');
|
||||
```
|
||||
|
||||
### Simulate
|
||||
|
||||
```javascript
|
||||
Simulate.{eventName}(
|
||||
DOMElement element,
|
||||
[object eventData]
|
||||
)
|
||||
```
|
||||
|
||||
模拟一个在 DOM 节点上带有可选 `eventData` 事件数据的事件派遣（event dispatch）。**这可能是 `ReactTestUtils` 里单独最有用的工具。**
|
||||
|
||||
**点击一个元素**
|
||||
|
||||
```javascript
|
||||
// <button ref="button">...</button>
|
||||
var node = this.refs.button;
|
||||
ReactTestUtils.Simulate.click(node);
|
||||
```
|
||||
|
||||
**改变 input 域的值然后点击 回车。**
|
||||
|
||||
```javascript
|
||||
// <input ref="input" />
|
||||
var node = this.refs.input;
|
||||
node.value = 'giraffe';
|
||||
ReactTestUtils.Simulate.change(node);
|
||||
ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13});
|
||||
```
|
||||
|
||||
*注意你将必须提供任何你在你的组件里使用的事件属性（例如 keyCode, which, 等等）因为React没有为你创建任何这类东西。*
|
||||
|
||||
`Simulate` has a method for [every event that React understands](/react/docs/events.html#supported-events).
|
||||
|
||||
### renderIntoDocument
|
||||
|
||||
```javascript
|
||||
ReactComponent renderIntoDocument(
|
||||
ReactElement instance
|
||||
)
|
||||
```
|
||||
|
||||
渲染一个组件到 document 里的 detached DOM 节点。**这个函数需要一个 DOM。**
|
||||
|
||||
> 注意:
|
||||
>
|
||||
> 在你 import React **之前**，你需要让 `window`, `window.document` 和 `window.document.createElement` 全局可用。
|
||||
不然 React 会认为它不能访问 DOM 然后类似 `setState` 的方法会不工作。
|
||||
|
||||
### mockComponent
|
||||
|
||||
```javascript
|
||||
object mockComponent(
|
||||
function componentClass,
|
||||
[string mockTagName]
|
||||
)
|
||||
```
|
||||
|
||||
传入一个 mocked 组件模块到这个方法来给它增加有用的方法，使它可以被用作 dummy React 组件。代替像通常一样的渲染，组件会成为一个简单的包含了任意被提供的子级的 `<div>` （或者其他 tag 名，如果提供了 `mockTagName`）
|
||||
|
||||
### isElement
|
||||
|
||||
```javascript
|
||||
boolean isElement(
|
||||
ReactElement element
|
||||
)
|
||||
```
|
||||
|
||||
返回 `true` 如果 `element` 是任意的 ReactElement。
|
||||
|
||||
### isElementOfType
|
||||
|
||||
```javascript
|
||||
boolean isElementOfType(
|
||||
ReactElement element,
|
||||
function componentClass
|
||||
)
|
||||
```
|
||||
|
||||
返回 `true` 如果 `element` 是一个类型是 React `componentClass` 的 ReactElement。
|
||||
|
||||
### isDOMComponent
|
||||
|
||||
```javascript
|
||||
boolean isDOMComponent(
|
||||
ReactComponent instance
|
||||
)
|
||||
```
|
||||
|
||||
返回 `true` 如果 `instance` 是一个 DOM 组件 （比如一个 `<div>` 或者 `<span>`）。
|
||||
|
||||
### isCompositeComponent
|
||||
|
||||
```javascript
|
||||
boolean isCompositeComponent(
|
||||
ReactComponent instance
|
||||
)
|
||||
```
|
||||
|
||||
返回 `true` 如果 `instance` 是一个复合组件 （由 `React.createClass()` 创建）。
|
||||
|
||||
### isCompositeComponentWithType
|
||||
|
||||
```javascript
|
||||
boolean isCompositeComponentWithType(
|
||||
ReactComponent instance,
|
||||
function componentClass
|
||||
)
|
||||
```
|
||||
|
||||
返回 `true` 如果 `instance` 是一个类型为 React `componentClass` 的复合组件 （由 `React.createClass()` 创建）。
|
||||
|
||||
### findAllInRenderedTree
|
||||
|
||||
```javascript
|
||||
array findAllInRenderedTree(
|
||||
ReactComponent tree,
|
||||
function test
|
||||
)
|
||||
```
|
||||
|
||||
遍历 `tree` 里所有的组件，并累积所有 `test(component)` 为 `true` 的组件。它本身并没有什么用，但是它被用作其他测试工具的基本元素。
|
||||
|
||||
### scryRenderedDOMComponentsWithClass
|
||||
|
||||
```javascript
|
||||
array scryRenderedDOMComponentsWithClass(
|
||||
ReactComponent tree, string className
|
||||
)
|
||||
```
|
||||
|
||||
在渲染的树中查找所有 DOM组件的类名匹配`className` 的组件实例。
|
||||
|
||||
### findRenderedDOMComponentWithClass
|
||||
|
||||
```javascript
|
||||
ReactComponent findRenderedDOMComponentWithClass(
|
||||
ReactComponent tree,
|
||||
string className
|
||||
)
|
||||
```
|
||||
|
||||
类似 `scryRenderedDOMComponentsWithClass()` 除了只有一个返回结果，并且要么返回这个结果，要么如果还有其他的匹配项就抛出一个异常。
|
||||
|
||||
### scryRenderedDOMComponentsWithTag
|
||||
|
||||
```javascript
|
||||
array scryRenderedDOMComponentsWithTag(
|
||||
ReactComponent tree,
|
||||
string tagName
|
||||
)
|
||||
```
|
||||
|
||||
在渲染的树中查找所有 DOM 组件的 tag 名匹配 `tagName` 的组件实例。
|
||||
|
||||
### findRenderedDOMComponentWithTag
|
||||
|
||||
```javascript
|
||||
ReactComponent findRenderedDOMComponentWithTag(
|
||||
ReactComponent tree,
|
||||
string tagName
|
||||
)
|
||||
```
|
||||
|
||||
类似 `scryRenderedDOMComponentsWithTag()` 除了只有一个返回结果，并且要么返回这个结果，要么如果还有其他的匹配项就抛出一个异常。
|
||||
|
||||
### scryRenderedComponentsWithType
|
||||
|
||||
```javascript
|
||||
array scryRenderedComponentsWithType(
|
||||
ReactComponent tree,
|
||||
function componentClass
|
||||
)
|
||||
```
|
||||
|
||||
查找所有类型等于 `componentClass` 的组件实例。
|
||||
|
||||
### findRenderedComponentWithType
|
||||
|
||||
```javascript
|
||||
ReactComponent findRenderedComponentWithType(
|
||||
ReactComponent tree, function componentClass
|
||||
)
|
||||
```
|
||||
|
||||
类似 `scryRenderedComponentsWithType()` 除了只有一个返回结果，并且要么返回这个结果，要么如果还有其他的匹配项就抛出一个异常。
|
||||
|
||||
## Shallow rendering（浅渲染）
|
||||
|
||||
浅渲染是一个实验性特性，让你渲染一个组件为 "one level deep" 并且断言渲染方法返回的内容，不用担心子组件的行为，它们没有被实例化或者渲染。这个方式不需要一个 DOM。
|
||||
|
||||
```javascript
|
||||
ReactShallowRenderer createRenderer()
|
||||
```
|
||||
|
||||
在你的测试里调用它来创建一个浅渲染器。你可以把它想做是一个你渲染你要测试的组件的 "地方"，它可以自己响应事件并更新。
|
||||
|
||||
```javascript
|
||||
shallowRenderer.render(
|
||||
ReactElement element
|
||||
)
|
||||
```
|
||||
|
||||
类似于 `ReactDOM.render`。
|
||||
|
||||
```javascript
|
||||
ReactElement shallowRenderer.getRenderOutput()
|
||||
```
|
||||
|
||||
在 `render` 被调用后，返回一个浅渲染的输出。你可以接着断言输出的内容。例如，如果你的组件的渲染方法返回：
|
||||
|
||||
```javascript
|
||||
<div>
|
||||
<span className="heading">Title</span>
|
||||
<Subcomponent foo="bar" />
|
||||
</div>
|
||||
```
|
||||
|
||||
然后你可以断言：
|
||||
|
||||
```javascript
|
||||
var renderer = ReactTestUtils.createRenderer();
|
||||
result = renderer.getRenderOutput();
|
||||
expect(result.type).toBe('div');
|
||||
expect(result.props.children).toEqual([
|
||||
<span className="heading">Title</span>,
|
||||
<Subcomponent foo="bar" />
|
||||
]);
|
||||
```
|
||||
|
||||
浅测试现在有一些限制，即不支持 refs。我们在早期发布这个特性，并感激 React 社区关于它应该如何演化的反馈。
|
||||
@@ -1,34 +0,0 @@
|
||||
---
|
||||
id: clone-with-props-it-IT
|
||||
title: Clonare ReactElements
|
||||
permalink: docs/clone-with-props-it-IT.html
|
||||
prev: test-utils-it-IT.html
|
||||
next: create-fragment-it-IT.html
|
||||
---
|
||||
|
||||
> Nota:
|
||||
> `cloneWithProps` è deprecato. Usa [React.cloneElement](top-level-api.html#react.cloneelement) al suo posto.
|
||||
|
||||
In rare condizioni, potresti voler creare una copia di un elemento React con proprietà diverse da quelle dell'elemento originale. Un esempio è clonare gli elementi passati come `this.props.children` ed effettuarne il rendering con proprietà diverse:
|
||||
|
||||
```js
|
||||
var _makeBlue = function(element) {
|
||||
return React.addons.cloneWithProps(element, {style: {color: 'blue'}});
|
||||
};
|
||||
|
||||
var Blue = React.createClass({
|
||||
render: function() {
|
||||
var blueChildren = React.Children.map(this.props.children, _makeBlue);
|
||||
return <div>{blueChildren}</div>;
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<Blue>
|
||||
<p>Questo testo è blu.</p>
|
||||
</Blue>,
|
||||
document.getElementById('container')
|
||||
);
|
||||
```
|
||||
|
||||
`cloneWithProps` non trasferisce gli attributi `key` o `ref` agli elementi clonati. Le proprietà `className` e `style` sono automaticamente riunite.
|
||||
@@ -1,34 +0,0 @@
|
||||
---
|
||||
id: clone-with-props
|
||||
title: ReactElementsをクローンすること
|
||||
permalink: docs/clone-with-props-ja-JP.html
|
||||
prev: test-utils-ja-JP.html
|
||||
next: create-fragment-ja-JP.html
|
||||
---
|
||||
|
||||
> 注意:
|
||||
> `cloneWithProps` は使用不可になりました。[React.cloneElement](top-level-api-ja-JP.html#react.cloneelement)を代わりに使用してください。
|
||||
|
||||
元のReact要素とは異なるプロパティを持った要素のコピーを作成したいと考える稀なケースがあるかと思います。1つの例としては、以下のように、 `this.props.children` に渡すように要素をクローンし、異なるプロパティを持つようそれらをレンダリングするものです。
|
||||
|
||||
```js
|
||||
var _makeBlue = function(element) {
|
||||
return React.addons.cloneWithProps(element, {style: {color: 'blue'}});
|
||||
};
|
||||
|
||||
var Blue = React.createClass({
|
||||
render: function() {
|
||||
var blueChildren = React.Children.map(this.props.children, _makeBlue);
|
||||
return <div>{blueChildren}</div>;
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<Blue>
|
||||
<p>This text is blue.</p>
|
||||
</Blue>,
|
||||
document.getElementById('container')
|
||||
);
|
||||
```
|
||||
|
||||
`cloneWithProps` は `key` や `ref` をクローンされた要素に渡すことはありません。 `className` や `style` は自動的にマージされます。
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user