From 72b2e743c3b26100c45e06a74b88774c7bdc52c2 Mon Sep 17 00:00:00 2001 From: y-temp4 Date: Sun, 3 Feb 2019 14:05:05 +0900 Subject: [PATCH 01/34] doc: Translate Refs and the DOM --- content/docs/refs-and-the-dom.md | 127 ++++++++++++++++--------------- 1 file changed, 64 insertions(+), 63 deletions(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 1dafc540f..4aed7acc5 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -1,6 +1,6 @@ --- id: refs-and-the-dom -title: Refs and the DOM +title: Refs と DOM redirect_from: - "docs/working-with-the-browser.html" - "docs/more-about-refs.html" @@ -11,33 +11,33 @@ redirect_from: permalink: docs/refs-and-the-dom.html --- -Refs provide a way to access DOM nodes or React elements created in the render method. +Refs は render メソッドで作成された DOM ノードもしくは React の要素にアクセスする方法を提供します。 -In the typical React dataflow, [props](/docs/components-and-props.html) are the only way that parent components interact with their children. To modify a child, you re-render it with new props. However, there are a few cases where you need to imperatively modify a child outside of the typical dataflow. The child to be modified could be an instance of a React component, or it could be a DOM element. For both of these cases, React provides an escape hatch. +一般的な React のデータフローでは、[props](/docs/components-and-props.html) は親コンポーネントがその子要素とやりとりする唯一の方法です。 子要素を変更するには、新しい props でそれを再レンダリングします。 ただし、一般的なデータフロー以外で子要素を強制的に変更する必要がある場合もいくつかあります。 変更される子要素は React コンポーネントのインスタンスか、DOM 要素です。 どちらの場合も、React は他の方法を提供します。 -### When to Use Refs +### いつ Refs を使うか -There are a few good use cases for refs: +Refs に適した使用例は以下の通りです。 -* Managing focus, text selection, or media playback. -* Triggering imperative animations. -* Integrating with third-party DOM libraries. +* フォーカス、テキストの選択、メディアの選択の管理 +* アニメーションの発火 +* サードパーティの DOM ライブラリとの統合 -Avoid using refs for anything that can be done declaratively. +宣言的に行えるものには refs を使用しないでください。 -For example, instead of exposing `open()` and `close()` methods on a `Dialog` component, pass an `isOpen` prop to it. +例えば、`Dialog` コンポーネントに `open()` と `close()` メソッドを使用するかわりに、`isOpen` prop を渡してください。 -### Don't Overuse Refs +### Refs を使いすぎない -Your first inclination may be 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. See the [Lifting State Up](/docs/lifting-state-up.html) guide for examples of this. +最初はアプリ内で「何かを起動する」ために refs を使いがちかもしれません。 その場合は、少し時間をかけて、コンポーネントの階層のどこで状態を保持するのかについて、じっくりと考えてください。 多くの場合、その状態を「保持する」ための適切な場所が階層の上位レベルにあることが明らかになります。 この例については [state のリフトアップ](/docs/lifting-state-up.html)ガイドを参照してください。 -> Note +> 補足 > -> The examples below have been updated to use the `React.createRef()` API introduced in React 16.3. If you are using an earlier release of React, we recommend using [callback refs](#callback-refs) instead. +> 以下の例は React 16.3 で導入された `React.createRef()` API を使うように更新されました。以前のリリースの React を使用している場合は、代わりに [callback refs](#callback-refs) を使用することをおすすめします。 -### Creating Refs +### Refs を作成する -Refs are created using `React.createRef()` and attached to React elements via the `ref` attribute. Refs are commonly assigned to an instance property when a component is constructed so they can be referenced throughout the component. +Refs は `React.createRef()` を使用して作成され、 `ref` 属性を用いて React 要素に紐付けられます。 Refs は通常、コンポーネントの構築時にインスタンスプロパティに割り当てられるため、コンポーネント全体で参照できます。 ```javascript{4,7} class MyComponent extends React.Component { @@ -51,44 +51,44 @@ class MyComponent extends React.Component { } ``` -### Accessing Refs +### Refs へのアクセス -When a ref is passed to an element in `render`, a reference to the node becomes accessible at the `current` attribute of the ref. +ref が `render` メソッドの要素に渡されると、ノードへの参照は ref の `current` 属性でアクセスできるようになります。 ```javascript const node = this.myRef.current; ``` -The value of the ref differs depending on the type of the node: +ref の値はノードの種類によって異なります。 -- When the `ref` attribute is used on an HTML element, the `ref` created in the constructor with `React.createRef()` receives the underlying DOM element as its `current` property. -- When the `ref` attribute is used on a custom class component, the `ref` object receives the mounted instance of the component as its `current`. -- **You may not use the `ref` attribute on function components** because they don't have instances. +- HTML 要素に対して `ref` 属性が使用されている場合、`React.createRef()` を使ってコンストラクタ内で作成された `ref` は、その `current` プロパティとして根底にある DOM 要素を受け取ります +- `ref` 属性がカスタムクラスコンポーネントで使用されるとき、`ref` オブジェクトはコンポーネントのマウントされたインスタンスを `current` として受け取ります +- **function components には `ref` 属性を使用してはいけません。** なぜなら、function components はインスタンスを持たないからです -The examples below demonstrate the differences. +以下の例ではその違いを示しています。 -#### Adding a Ref to a DOM Element +#### DOM 要素への Ref の追加 -This code uses a `ref` to store a reference to a DOM node: +このコードでは DOM ノードへの参照を保持するために `ref` を使います。 ```javascript{5,12,22} class CustomTextInput extends React.Component { constructor(props) { super(props); - // create a ref to store the textInput DOM element + // textInput DOM 要素を保持するための ref を作成します。 this.textInput = React.createRef(); this.focusTextInput = this.focusTextInput.bind(this); } focusTextInput() { - // Explicitly focus the text input using the raw DOM API - // Note: we're accessing "current" to get the DOM node + // 生の DOM API を使用してテキストの入力を絞り込みます。 + // 補足：DOM ノードを取得するために "current" にアクセスしています。 this.textInput.current.focus(); } render() { - // tell React that we want to associate the ref - // with the `textInput` that we created in the constructor + // コンストラクタで作成した `textInput` に ref を関連付けることを + // React に伝えます。 return (
); @@ -161,13 +162,13 @@ class Parent extends React.Component { } ``` -You should convert the component to a class if you need a ref to it, just like you do when you need lifecycle methods or state. +Ref が必要な場合は、ライフサイクルメソッドやステートが必要なときと同じように、コンポーネントをクラスに変換しなければなりません。 -You can, however, **use the `ref` attribute inside a function component** as long as you refer to a DOM element or a class component: +ただし、DOM 要素またはクラスコンポーネントを参照している限り、**function component 内で ref 属性を使用できます。** ```javascript{2,3,6,13} function CustomTextInput(props) { - // textInput must be declared here so the ref can refer to it + // ref が参照できるように、textInput をここで宣言する必要があります。 let textInput = React.createRef(); function handleClick() { @@ -189,25 +190,25 @@ function CustomTextInput(props) { } ``` -### Exposing DOM Refs to Parent Components +### DOM の Refs を親コンポーネントにさらす -In rare cases, you might want to have access to a child's DOM node from a parent component. This is generally not recommended because it breaks component encapsulation, but it can occasionally be useful for triggering focus or measuring the size or position of a child DOM node. +まれに、親コンポーネントから子の DOM ノードにアクセスしたい場合があります。 これは、コンポーネントのカプセル化を壊すため、一般的にはおすすめできませんが、フォーカスを発火したり、子の DOM ノードのサイズや位置を計測したりするのに役立つことがあります。 -While you could [add a ref to the child component](#adding-a-ref-to-a-class-component), this is not an ideal solution, as you would only get a component instance rather than a DOM node. Additionally, this wouldn't work with function components. +[子コンポーネントに ref を追加すること](#adding-a-ref-to-a-class-component)はできますが、DOM ノードではなくコンポーネントインスタンスしか取得できないため、これは理想的な解決策ではありません。 また、これは function components では機能しません。 -If you use React 16.3 or higher, we recommend to use [ref forwarding](/docs/forwarding-refs.html) for these cases. **Ref forwarding lets components opt into exposing any child component's ref as their own**. You can find a detailed example of how to expose a child's DOM node to a parent component [in the ref forwarding documentation](/docs/forwarding-refs.html#forwarding-refs-to-dom-components). +React 16.3 以降を使用している場合、これらの場合には [ref forwarding](/docs/forwarding-refs.html) を使用することをおすすめします。Ref forwarding では、コンポーネントは子コンポーネントの参照を自分のものとして公開することを選択できます。 [Ref forwarding のドキュメント](/docs/forwarding-refs.html#forwarding-refs-to-dom-components)に、子の DOM ノードを親コンポーネントに公開する方法の詳細な例があります。 -If you use React 16.2 or lower, or if you need more flexibility than provided by ref forwarding, you can use [this alternative approach](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509) and explicitly pass a ref as a differently named prop. +React 16.2 以下を使用している場合、または ref forwarding で提供される以上の柔軟性が必要な場合は、[この代替アプローチ](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509)を使用して ref を別の名前の prop として明示的に渡すことができます。 -When possible, we advise against exposing DOM nodes, but it can be a useful escape hatch. Note that this approach requires you to add some code to the child component. If you have absolutely no control over the child component implementation, your last option is to use [`findDOMNode()`](/docs/react-dom.html#finddomnode), but it is discouraged and deprecated in [`StrictMode`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage). +可能であれば DOM ノードをさらさないことをおすすめしますが、これは便利な回避策になることもあります。この方法では、子コンポーネントにコードを追加する必要があります。子コンポーネントの実装を完全に制御できない場合、最後の選択肢は [`findDOMNode()`](/docs/react-dom.html#finddomnode) を使用することですが、[`StrictMode`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage) では推奨されません。 -### Callback Refs +### コールバック Refs -React also supports another way to set refs called "callback refs", which gives more fine-grain control over when refs are set and unset. +React はまた「コールバック Refs」と呼ばれる refs を設定するためのさらなる方法をサポートします。 -Instead of passing a `ref` attribute created by `createRef()`, you pass a function. The function receives the React component instance or HTML DOM element as its argument, which can be stored and accessed elsewhere. +`createRef()` によって作成された `ref` 属性を渡す代わりに、関数を渡します。 この関数は、引数として React コンポーネントのインスタンスまたは HTML DOM 要素を受け取ります。これらは他の場所に保持してアクセスできます。 -The example below implements a common pattern: using the `ref` callback to store a reference to a DOM node in an instance property. +以下は、`ref` コールバックを用いて DOM ノードへの参照をインスタンスプロパティに格納する一般的な実装例です。 ```javascript{5,7-9,11-14,19,29,34} class CustomTextInput extends React.Component { @@ -221,19 +222,19 @@ class CustomTextInput extends React.Component { }; this.focusTextInput = () => { - // Focus the text input using the raw DOM API + // 生の DOM API を使用してテキストの入力にフォーカスします。 if (this.textInput) this.textInput.focus(); }; } componentDidMount() { - // autofocus the input on mount + // マウント時に入力をオートフォーカスします。 this.focusTextInput(); } render() { - // Use the `ref` callback to store a reference to the text input DOM - // element in an instance field (for example, this.textInput). + // インスタンスフィールド（例えば this.textInput）にテキスト入力の DOM 要素への + // 参照を保存するために `ref` コールバックを使用してください。 return (
`. As a result, `this.inputElement` in `Parent` will be set to the DOM node corresponding to the `` element in the `CustomTextInput`. +上記の例では、`Parent` は ref コールバックを `inputRef` prop として `CustomTextInput` に渡し、`CustomTextInput` は同じ関数を特別な `ref` 属性として `` に渡します。 その結果、`Parent` の `this.inputElement` は、`CustomTextInput` の `` 要素に対応する DOM ノードに設定されます。 -### Legacy API: String Refs +### レガシー API：String Refs -If you worked with React before, you might be familiar with an older API where the `ref` attribute is a string, like `"textInput"`, and the DOM node is accessed as `this.refs.textInput`. We advise against it because string refs have [some issues](https://github.com/facebook/react/pull/8333#issuecomment-271648615), are considered legacy, and **are likely to be removed in one of the future releases**. +以前に React を使用したことがある場合は、`ref` 属性が `"textInput"` のような文字列で、DOM ノードが `this.refs.textInput` としてアクセスされる古い API に慣れているかもしれません。String refs には[いくつかの問題](https://github.com/facebook/react/pull/8333#issuecomment-271648615)があり、レガシーと見なされ、**将来のリリースのいずれかで削除される可能性が高い**ため、使用することをおすすめしません。 -> Note +> 補足 > -> If you're currently using `this.refs.textInput` to access refs, we recommend using either the [callback pattern](#callback-refs) or the [`createRef` API](#creating-refs) instead. +> Refs にアクセスするために `this.refs.textInput` を現在使用している場合は、代わりに[コールバックパターン](#callback-refs)もしくは [`createRef` API](#creating-refs) を使用することをおすすめします。 -### Caveats with callback refs +### Callback refs の注意事項 -If the `ref` callback is defined as an inline function, it will get called twice during updates, first with `null` and then again with the DOM element. This is because a new instance of the function is created with each render, so React needs to clear the old ref and set up the new one. You can avoid this by defining the `ref` callback as a bound method on the class, but note that it shouldn't matter in most cases. +`ref` コールバックがインライン関数として定義されている場合、更新中に 2 回呼び出されます。最初は `null`、次に DOM 要素で呼び出されます。これは、各レンダリングで関数の新しいインスタンスが作成されるため、React は古い ref を削除し、新しい ref を設定する必要があるためです。`ref` コールバックをクラスのバウンドメソッドとして定義することでこれを回避できますが、ほとんどの場合は問題にならないはずです。 From 6b370620bf5e3b68fe7f1fb9fd8a527d30b9e42e Mon Sep 17 00:00:00 2001 From: Daiki Ihara Date: Tue, 5 Feb 2019 21:41:06 +0900 Subject: [PATCH 02/34] Update content/docs/refs-and-the-dom.md Co-Authored-By: y-temp4 --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 4aed7acc5..474807a46 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -13,7 +13,7 @@ permalink: docs/refs-and-the-dom.html Refs は render メソッドで作成された DOM ノードもしくは React の要素にアクセスする方法を提供します。 -一般的な React のデータフローでは、[props](/docs/components-and-props.html) は親コンポーネントがその子要素とやりとりする唯一の方法です。 子要素を変更するには、新しい props でそれを再レンダリングします。 ただし、一般的なデータフロー以外で子要素を強制的に変更する必要がある場合もいくつかあります。 変更される子要素は React コンポーネントのインスタンスか、DOM 要素です。 どちらの場合も、React は他の方法を提供します。 +一般的な React のデータフローでは、[props](/docs/components-and-props.html) は親コンポーネントがその子要素とやりとりする唯一の方法です。子要素を変更するには、新しい props でそれを再レンダーします。ただし、一般的なデータフロー以外で子要素を強制的に変更する必要がある場合もあります。その場合、変更される子要素は React コンポーネントのインスタンスまたは、DOM 要素です。 どちらの場合でも、React は避難ハッチを提供します。 ### いつ Refs を使うか From dcbff65592edfa1cd2a4c7f9452ab95c2f9c397a Mon Sep 17 00:00:00 2001 From: Daiki Ihara Date: Tue, 5 Feb 2019 21:42:18 +0900 Subject: [PATCH 03/34] Update content/docs/refs-and-the-dom.md Co-Authored-By: y-temp4 --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 474807a46..344a62942 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -19,7 +19,7 @@ Refs は render メソッドで作成された DOM ノードもしくは React Refs に適した使用例は以下の通りです。 -* フォーカス、テキストの選択、メディアの選択の管理 +* フォーカス、テキストの選択およびメディアの再生の管理 * アニメーションの発火 * サードパーティの DOM ライブラリとの統合 From 248c8945fc07e54a6f5998874d132d8f62ec402d Mon Sep 17 00:00:00 2001 From: Daiki Ihara Date: Tue, 5 Feb 2019 21:42:32 +0900 Subject: [PATCH 04/34] Update content/docs/refs-and-the-dom.md Co-Authored-By: y-temp4 --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 344a62942..5b5c88ca6 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -25,7 +25,7 @@ Refs に適した使用例は以下の通りです。 宣言的に行えるものには refs を使用しないでください。 -例えば、`Dialog` コンポーネントに `open()` と `close()` メソッドを使用するかわりに、`isOpen` prop を渡してください。 +例えば、`Dialog` コンポーネントに `open()` と `close()` メソッドを実装するかわりに、`isOpen` プロパティ を渡してください。 ### Refs を使いすぎない From 93834c880ff94e6e70f7922e859fda0e9ec44231 Mon Sep 17 00:00:00 2001 From: Daiki Ihara Date: Tue, 5 Feb 2019 21:42:49 +0900 Subject: [PATCH 05/34] Update content/docs/refs-and-the-dom.md Co-Authored-By: y-temp4 --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 5b5c88ca6..fd8cc0256 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -29,7 +29,7 @@ Refs に適した使用例は以下の通りです。 ### Refs を使いすぎない -最初はアプリ内で「何かを起動する」ために refs を使いがちかもしれません。 その場合は、少し時間をかけて、コンポーネントの階層のどこで状態を保持するのかについて、じっくりと考えてください。 多くの場合、その状態を「保持する」ための適切な場所が階層の上位レベルにあることが明らかになります。 この例については [state のリフトアップ](/docs/lifting-state-up.html)ガイドを参照してください。 +最初はアプリ内で「何かを起こす」ために refs を使いがちかもしれません。そんなときは、少し時間をかけて、コンポーネントの階層のどこで状態を保持すべきかについて、よりしっかりと考えてみてください。多くの場合、その状態を「保持する」ための適切な場所は階層のより上位にあることが明らかになるでしょう。具体例については [state のリフトアップ](/docs/lifting-state-up.html)ガイドを参照してください。 > 補足 > From e01c26587730a4a06645be2708097f322bf15093 Mon Sep 17 00:00:00 2001 From: Daiki Ihara Date: Tue, 5 Feb 2019 21:43:11 +0900 Subject: [PATCH 06/34] Update content/docs/refs-and-the-dom.md Co-Authored-By: y-temp4 --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index fd8cc0256..60dfc1a4e 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -37,7 +37,7 @@ Refs に適した使用例は以下の通りです。 ### Refs を作成する -Refs は `React.createRef()` を使用して作成され、 `ref` 属性を用いて React 要素に紐付けられます。 Refs は通常、コンポーネントの構築時にインスタンスプロパティに割り当てられるため、コンポーネント全体で参照できます。 +Refs は `React.createRef()` を使用して作成され、 `ref` 属性を用いて React 要素に紐付けられます。Refs は通常、コンポーネントの構築時にインスタンスプロパティに割り当てられるため、コンポーネントを通して参照が可能です。 ```javascript{4,7} class MyComponent extends React.Component { From 5e13d8ccbf086314d7efeab7cbb40993c643f9c0 Mon Sep 17 00:00:00 2001 From: Daiki Ihara Date: Tue, 5 Feb 2019 21:43:35 +0900 Subject: [PATCH 07/34] Update content/docs/refs-and-the-dom.md Co-Authored-By: y-temp4 --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 60dfc1a4e..a88b26689 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -53,7 +53,7 @@ class MyComponent extends React.Component { ### Refs へのアクセス -ref が `render` メソッドの要素に渡されると、ノードへの参照は ref の `current` 属性でアクセスできるようになります。 +ref が `render` メソッドの要素に渡されると、そのノードへの参照は ref の `current` 属性でアクセスできるようになります。 ```javascript const node = this.myRef.current; From 2d0d2aa04f97aca197890287b694f9a414efc69e Mon Sep 17 00:00:00 2001 From: Daiki Ihara Date: Tue, 5 Feb 2019 21:45:06 +0900 Subject: [PATCH 08/34] Update content/docs/refs-and-the-dom.md Co-Authored-By: y-temp4 --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index a88b26689..02a36e2a6 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -63,7 +63,7 @@ ref の値はノードの種類によって異なります。 - HTML 要素に対して `ref` 属性が使用されている場合、`React.createRef()` を使ってコンストラクタ内で作成された `ref` は、その `current` プロパティとして根底にある DOM 要素を受け取ります - `ref` 属性がカスタムクラスコンポーネントで使用されるとき、`ref` オブジェクトはコンポーネントのマウントされたインスタンスを `current` として受け取ります -- **function components には `ref` 属性を使用してはいけません。** なぜなら、function components はインスタンスを持たないからです +- **関数コンポーネント (function components) には `ref` 属性を使用してはいけません。** なぜなら、関数コンポーネント はインスタンスを持たないからです 以下の例ではその違いを示しています。 From d3d0c48c99b55d34d8a4c28976e40934b198b67e Mon Sep 17 00:00:00 2001 From: y-temp4 Date: Tue, 5 Feb 2019 21:46:06 +0900 Subject: [PATCH 09/34] doc: Remove useless space --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 02a36e2a6..d7cec293a 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -63,7 +63,7 @@ ref の値はノードの種類によって異なります。 - HTML 要素に対して `ref` 属性が使用されている場合、`React.createRef()` を使ってコンストラクタ内で作成された `ref` は、その `current` プロパティとして根底にある DOM 要素を受け取ります - `ref` 属性がカスタムクラスコンポーネントで使用されるとき、`ref` オブジェクトはコンポーネントのマウントされたインスタンスを `current` として受け取ります -- **関数コンポーネント (function components) には `ref` 属性を使用してはいけません。** なぜなら、関数コンポーネント はインスタンスを持たないからです +- **関数コンポーネント (function components) には `ref` 属性を使用してはいけません。** なぜなら、関数コンポーネントはインスタンスを持たないからです 以下の例ではその違いを示しています。 From 7a3d828ee8c4eb94f62edae5aa640c5e241c0c41 Mon Sep 17 00:00:00 2001 From: Daiki Ihara Date: Tue, 5 Feb 2019 21:46:30 +0900 Subject: [PATCH 10/34] Update content/docs/refs-and-the-dom.md Co-Authored-By: y-temp4 --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index d7cec293a..bb8188971 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -81,7 +81,7 @@ class CustomTextInput extends React.Component { } focusTextInput() { - // 生の DOM API を使用してテキストの入力を絞り込みます。 + // 生の DOM API を使用して明示的にテキストの入力にフォーカスします。 // 補足：DOM ノードを取得するために "current" にアクセスしています。 this.textInput.current.focus(); } From 61def37bb629943658642849887c8ca493f9f9ee Mon Sep 17 00:00:00 2001 From: Daiki Ihara Date: Tue, 5 Feb 2019 21:47:02 +0900 Subject: [PATCH 11/34] Update content/docs/refs-and-the-dom.md Co-Authored-By: y-temp4 --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index bb8188971..0f9d9fc4d 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -105,7 +105,7 @@ class CustomTextInput extends React.Component { } ``` -コンポーネントがマウントされると React は `current` プロパティに DOM 要素を割り当て、マウントが解除されると `null` を割り当てます。`ref` の更新は `componentDidMount` または `componentDidUpdate` ライフサイクルメソッドの前に行われます。 +コンポーネントがマウントされると React は `current` プロパティに DOM 要素を割り当て、マウントが解除されると `null` に戻します。`ref` の更新は `componentDidMount` または `componentDidUpdate` ライフサイクルメソッドの前に行われます。 #### クラスコンポーネントへの Ref の追加 From b59152d8276013c00c2025e155a8107dae23b5cf Mon Sep 17 00:00:00 2001 From: Daiki Ihara Date: Tue, 5 Feb 2019 21:47:23 +0900 Subject: [PATCH 12/34] Update content/docs/refs-and-the-dom.md Co-Authored-By: y-temp4 --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 0f9d9fc4d..e1ec59573 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -109,7 +109,7 @@ class CustomTextInput extends React.Component { #### クラスコンポーネントへの Ref の追加 -マウント直後にクリックされることをシミュレーションするために上記の CustomTextInput をラップしたい場合は、ref を使用してカスタムインプットにアクセスし、その focusTextInput メソッドを手動で呼び出せます。 +マウント直後にクリックされることをシミュレーションするために上記の CustomTextInput をラップしたい場合は、ref を使用してカスタムインプットにアクセスし、その `focusTextInput` メソッドを手動で呼び出せます。 ```javascript{4,8,13} class AutoFocusTextInput extends React.Component { From 5c8c172f248644e18568fff83415709fd56796d0 Mon Sep 17 00:00:00 2001 From: Daiki Ihara Date: Tue, 5 Feb 2019 21:47:54 +0900 Subject: [PATCH 13/34] Update content/docs/refs-and-the-dom.md Co-Authored-By: y-temp4 --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index e1ec59573..80c0ed86a 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -138,7 +138,7 @@ class CustomTextInput extends React.Component { } ``` -#### Refs と Function Components +#### Refs と 関数コンポーネント Function components にはインスタンスがないため、**Function components に `ref` 属性を使用することはできません。** From e6c397c19e869b9e50265eab058ea42ec43dc4e8 Mon Sep 17 00:00:00 2001 From: y-temp4 Date: Tue, 5 Feb 2019 21:48:21 +0900 Subject: [PATCH 14/34] doc: Remove useless space --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 80c0ed86a..6629ab66b 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -138,7 +138,7 @@ class CustomTextInput extends React.Component { } ``` -#### Refs と 関数コンポーネント +#### Refs と関数コンポーネント Function components にはインスタンスがないため、**Function components に `ref` 属性を使用することはできません。** From ec7f289394c436570c50becffcfccb29a548974c Mon Sep 17 00:00:00 2001 From: Daiki Ihara Date: Tue, 5 Feb 2019 21:49:02 +0900 Subject: [PATCH 15/34] Update content/docs/refs-and-the-dom.md Co-Authored-By: y-temp4 --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 6629ab66b..69c4c61e9 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -140,7 +140,7 @@ class CustomTextInput extends React.Component { #### Refs と関数コンポーネント -Function components にはインスタンスがないため、**Function components に `ref` 属性を使用することはできません。** +関数コンポーネントにはインスタンスがないため、**関数コンポーネントに `ref` 属性を使用することはできません。** ```javascript{1,8,13} From 770c934e35df6f8f6c44c5e5c6ea841f28e0709d Mon Sep 17 00:00:00 2001 From: Daiki Ihara Date: Tue, 5 Feb 2019 21:49:23 +0900 Subject: [PATCH 16/34] Update content/docs/refs-and-the-dom.md Co-Authored-By: y-temp4 --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 69c4c61e9..e653821d0 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -162,7 +162,7 @@ class Parent extends React.Component { } ``` -Ref が必要な場合は、ライフサイクルメソッドやステートが必要なときと同じように、コンポーネントをクラスに変換しなければなりません。 +Ref が必要な場合は、ライフサイクルメソッドや state が必要なときと同じように、コンポーネントをクラスに変換しなければなりません。 ただし、DOM 要素またはクラスコンポーネントを参照している限り、**function component 内で ref 属性を使用できます。** From 8b5b40205529acb2d988b5c9af549cd0ea1de1e8 Mon Sep 17 00:00:00 2001 From: Daiki Ihara Date: Tue, 5 Feb 2019 21:49:43 +0900 Subject: [PATCH 17/34] Update content/docs/refs-and-the-dom.md Co-Authored-By: y-temp4 --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index e653821d0..aaf2e4748 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -164,7 +164,7 @@ class Parent extends React.Component { Ref が必要な場合は、ライフサイクルメソッドや state が必要なときと同じように、コンポーネントをクラスに変換しなければなりません。 -ただし、DOM 要素またはクラスコンポーネントを参照している限り、**function component 内で ref 属性を使用できます。** +ただし、DOM 要素またはクラスコンポーネントを参照している限り、**関数コンポーネント内で ref 属性を使用できます。** ```javascript{2,3,6,13} function CustomTextInput(props) { From 9912ddc57b0da8fc3c5fe7a598f6fb6a28f8c1b0 Mon Sep 17 00:00:00 2001 From: Daiki Ihara Date: Tue, 5 Feb 2019 21:50:37 +0900 Subject: [PATCH 18/34] Update content/docs/refs-and-the-dom.md Co-Authored-By: y-temp4 --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index aaf2e4748..31ff07bf4 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -192,7 +192,7 @@ function CustomTextInput(props) { ### DOM の Refs を親コンポーネントにさらす -まれに、親コンポーネントから子の DOM ノードにアクセスしたい場合があります。 これは、コンポーネントのカプセル化を壊すため、一般的にはおすすめできませんが、フォーカスを発火したり、子の DOM ノードのサイズや位置を計測したりするのに役立つことがあります。 +まれに、親コンポーネントから子の DOM ノードにアクセスしたい場合があります。これは、コンポーネントのカプセル化を壊すため、一般的にはおすすめできませんが、フォーカスを発火させたり、子の DOM ノードのサイズや位置を計測するのに役立つことがあります。 [子コンポーネントに ref を追加すること](#adding-a-ref-to-a-class-component)はできますが、DOM ノードではなくコンポーネントインスタンスしか取得できないため、これは理想的な解決策ではありません。 また、これは function components では機能しません。 From f96ab8f187a4f7719d6adea62e47c98ced18f943 Mon Sep 17 00:00:00 2001 From: Daiki Ihara Date: Tue, 5 Feb 2019 21:51:03 +0900 Subject: [PATCH 19/34] Update content/docs/refs-and-the-dom.md Co-Authored-By: y-temp4 --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 31ff07bf4..297e16584 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -194,7 +194,7 @@ function CustomTextInput(props) { まれに、親コンポーネントから子の DOM ノードにアクセスしたい場合があります。これは、コンポーネントのカプセル化を壊すため、一般的にはおすすめできませんが、フォーカスを発火させたり、子の DOM ノードのサイズや位置を計測するのに役立つことがあります。 -[子コンポーネントに ref を追加すること](#adding-a-ref-to-a-class-component)はできますが、DOM ノードではなくコンポーネントインスタンスしか取得できないため、これは理想的な解決策ではありません。 また、これは function components では機能しません。 +[子コンポーネントに ref を追加すること](#adding-a-ref-to-a-class-component)はできますが、DOM ノードではなくコンポーネントインスタンスしか取得できないため、これは理想的な解決策ではありません。また、これは関数コンポーネントでは機能しません。 React 16.3 以降を使用している場合、これらの場合には [ref forwarding](/docs/forwarding-refs.html) を使用することをおすすめします。Ref forwarding では、コンポーネントは子コンポーネントの参照を自分のものとして公開することを選択できます。 [Ref forwarding のドキュメント](/docs/forwarding-refs.html#forwarding-refs-to-dom-components)に、子の DOM ノードを親コンポーネントに公開する方法の詳細な例があります。 From 976ff0374708aa967067ef6330a36e8aeb8e0d58 Mon Sep 17 00:00:00 2001 From: Daiki Ihara Date: Tue, 5 Feb 2019 21:52:33 +0900 Subject: [PATCH 20/34] Update content/docs/refs-and-the-dom.md Co-Authored-By: y-temp4 --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 297e16584..f114a8a1e 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -196,7 +196,7 @@ function CustomTextInput(props) { [子コンポーネントに ref を追加すること](#adding-a-ref-to-a-class-component)はできますが、DOM ノードではなくコンポーネントインスタンスしか取得できないため、これは理想的な解決策ではありません。また、これは関数コンポーネントでは機能しません。 -React 16.3 以降を使用している場合、これらの場合には [ref forwarding](/docs/forwarding-refs.html) を使用することをおすすめします。Ref forwarding では、コンポーネントは子コンポーネントの参照を自分のものとして公開することを選択できます。 [Ref forwarding のドキュメント](/docs/forwarding-refs.html#forwarding-refs-to-dom-components)に、子の DOM ノードを親コンポーネントに公開する方法の詳細な例があります。 +React 16.3 以降を使用している場合、これらの場合には [ref forwarding](/docs/forwarding-refs.html) を使用することをおすすめします。**Ref forwarding では、コンポーネントは任意の子コンポーネントの ref を自分のものとして公開することを選択できます。** [Ref forwarding のドキュメント](/docs/forwarding-refs.html#forwarding-refs-to-dom-components)に、子の DOM ノードを親コンポーネントに公開する方法の詳細な例があります。 React 16.2 以下を使用している場合、または ref forwarding で提供される以上の柔軟性が必要な場合は、[この代替アプローチ](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509)を使用して ref を別の名前の prop として明示的に渡すことができます。 From a13fd52a295581c3e96507e3153c7f2f50ec90d9 Mon Sep 17 00:00:00 2001 From: Daiki Ihara Date: Tue, 5 Feb 2019 21:53:08 +0900 Subject: [PATCH 21/34] Update content/docs/refs-and-the-dom.md Co-Authored-By: y-temp4 --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index f114a8a1e..4cb5625fc 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -198,7 +198,7 @@ function CustomTextInput(props) { React 16.3 以降を使用している場合、これらの場合には [ref forwarding](/docs/forwarding-refs.html) を使用することをおすすめします。**Ref forwarding では、コンポーネントは任意の子コンポーネントの ref を自分のものとして公開することを選択できます。** [Ref forwarding のドキュメント](/docs/forwarding-refs.html#forwarding-refs-to-dom-components)に、子の DOM ノードを親コンポーネントに公開する方法の詳細な例があります。 -React 16.2 以下を使用している場合、または ref forwarding で提供される以上の柔軟性が必要な場合は、[この代替アプローチ](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509)を使用して ref を別の名前の prop として明示的に渡すことができます。 +React 16.2 以下を使用している場合、または ref forwarding で提供される以上の柔軟性が必要な場合は、[この代替手法](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509)を使用して ref を異なる名前の props として明示的に渡すことができます。 可能であれば DOM ノードをさらさないことをおすすめしますが、これは便利な回避策になることもあります。この方法では、子コンポーネントにコードを追加する必要があります。子コンポーネントの実装を完全に制御できない場合、最後の選択肢は [`findDOMNode()`](/docs/react-dom.html#finddomnode) を使用することですが、[`StrictMode`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage) では推奨されません。 From 7b7b3348ee3ba95a3339ef95abbfebb3daaba40f Mon Sep 17 00:00:00 2001 From: Daiki Ihara Date: Tue, 5 Feb 2019 21:56:27 +0900 Subject: [PATCH 22/34] Update content/docs/refs-and-the-dom.md Co-Authored-By: y-temp4 --- content/docs/refs-and-the-dom.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 4cb5625fc..e6276d095 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -200,7 +200,9 @@ React 16.3 以降を使用している場合、これらの場合には [ref for React 16.2 以下を使用している場合、または ref forwarding で提供される以上の柔軟性が必要な場合は、[この代替手法](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509)を使用して ref を異なる名前の props として明示的に渡すことができます。 -可能であれば DOM ノードをさらさないことをおすすめしますが、これは便利な回避策になることもあります。この方法では、子コンポーネントにコードを追加する必要があります。子コンポーネントの実装を完全に制御できない場合、最後の選択肢は [`findDOMNode()`](/docs/react-dom.html#finddomnode) を使用することですが、[`StrictMode`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage) では推奨されません。 +可能であれば DOM ノードを公開しないことをおすすめしますが、これは便利な避難ハッチになることもあります。留意すべき点として、この方法では子コンポーネントにコードを追加する必要があります。子コンポーネントの実装にまったく手を加えられない場合、最後の選択肢は [`findDOMNode()`](/docs/react-dom.html#finddomnode) を使用することですが、 +おすすめできない上に、[`StrictMode`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage) では +廃止予定です。 ### コールバック Refs From f696db2c1f42fd148d91c33f5f7daedf27171048 Mon Sep 17 00:00:00 2001 From: Daiki Ihara Date: Tue, 5 Feb 2019 21:58:34 +0900 Subject: [PATCH 23/34] Update content/docs/refs-and-the-dom.md Co-Authored-By: y-temp4 --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index e6276d095..f0aa538d5 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -208,7 +208,7 @@ React 16.2 以下を使用している場合、または ref forwarding で提 React はまた「コールバック Refs」と呼ばれる refs を設定するためのさらなる方法をサポートします。 -`createRef()` によって作成された `ref` 属性を渡す代わりに、関数を渡します。 この関数は、引数として React コンポーネントのインスタンスまたは HTML DOM 要素を受け取ります。これらは他の場所に保持してアクセスできます。 +`createRef()` によって作成された `ref` 属性を渡す代わりに、関数を渡します。 この関数は、引数として React コンポーネントのインスタンスまたは HTML DOM 要素を受け取ります。これらは他の場所に保持したり、他の場所からアクセスできます。 以下は、`ref` コールバックを用いて DOM ノードへの参照をインスタンスプロパティに格納する一般的な実装例です。 From 622a8505f399ffe8b3df74e16443c65c61e5a670 Mon Sep 17 00:00:00 2001 From: Daiki Ihara Date: Tue, 5 Feb 2019 21:58:55 +0900 Subject: [PATCH 24/34] Update content/docs/refs-and-the-dom.md Co-Authored-By: y-temp4 --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index f0aa538d5..716d4bd96 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -224,7 +224,7 @@ class CustomTextInput extends React.Component { }; this.focusTextInput = () => { - // 生の DOM API を使用してテキストの入力にフォーカスします。 + // 生の DOM API を使用して明示的にテキストの入力にフォーカスします。 if (this.textInput) this.textInput.focus(); }; } From ffcb4f607ed4a6c9a6539112119a8a28cff213db Mon Sep 17 00:00:00 2001 From: Daiki Ihara Date: Tue, 5 Feb 2019 21:59:43 +0900 Subject: [PATCH 25/34] Update content/docs/refs-and-the-dom.md Co-Authored-By: y-temp4 --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 716d4bd96..e7a125754 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -254,7 +254,7 @@ class CustomTextInput extends React.Component { } ``` -コンポーネントがマウントされると React は DOM 要素で `ref` コールバックを呼び出し、マウントが解除されると `null` を呼び出します。 Refs は `componentDidMount` または `componentDidUpdate` が発火される前に最新のものであることが保証されています。 +コンポーネントがマウントされると React は DOM 要素とともに `ref` コールバックを呼び出し、マウントが解除されると `null` とともにコールバックを呼び出します。Refs は `componentDidMount` または `componentDidUpdate` が発火する前に最新のものであることが保証されています。 `React.createRef()` で作成されたオブジェクトの refs と同様に、コンポーネント間でコールバック refs を渡すことができます。 From 943df24df15a85e50e669b3f1c32af67a8eff1a6 Mon Sep 17 00:00:00 2001 From: y-temp4 Date: Tue, 5 Feb 2019 22:00:42 +0900 Subject: [PATCH 26/34] doc: Remove useless space --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index e7a125754..519a7a34f 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -25,7 +25,7 @@ Refs に適した使用例は以下の通りです。 宣言的に行えるものには refs を使用しないでください。 -例えば、`Dialog` コンポーネントに `open()` と `close()` メソッドを実装するかわりに、`isOpen` プロパティ を渡してください。 +例えば、`Dialog` コンポーネントに `open()` と `close()` メソッドを実装するかわりに、`isOpen` プロパティを渡してください。 ### Refs を使いすぎない From 82e3a49212b947fc5b3e4535330a9ab0a4e4673e Mon Sep 17 00:00:00 2001 From: Daiki Ihara Date: Tue, 5 Feb 2019 22:02:17 +0900 Subject: [PATCH 27/34] Update content/docs/refs-and-the-dom.md Co-Authored-By: y-temp4 --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 519a7a34f..6202abb39 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -278,7 +278,7 @@ class Parent extends React.Component { } ``` -上記の例では、`Parent` は ref コールバックを `inputRef` prop として `CustomTextInput` に渡し、`CustomTextInput` は同じ関数を特別な `ref` 属性として `` に渡します。 その結果、`Parent` の `this.inputElement` は、`CustomTextInput` の `` 要素に対応する DOM ノードに設定されます。 +上記の例では、`Parent` は ref コールバックを `inputRef` プロパティ として `CustomTextInput` に渡し、`CustomTextInput` は同じ関数を特別な `ref` 属性として `` に渡します。その結果、`Parent` の `this.inputElement` は、`CustomTextInput` の `` 要素に対応する DOM ノードに設定されます。 ### レガシー API：String Refs From 401f6c5019cb97ef6c713b69c8c70d8a45a7c717 Mon Sep 17 00:00:00 2001 From: y-temp4 Date: Tue, 5 Feb 2019 22:03:05 +0900 Subject: [PATCH 28/34] doc: Remove useless space --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 6202abb39..04095e31d 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -278,7 +278,7 @@ class Parent extends React.Component { } ``` -上記の例では、`Parent` は ref コールバックを `inputRef` プロパティ として `CustomTextInput` に渡し、`CustomTextInput` は同じ関数を特別な `ref` 属性として `` に渡します。その結果、`Parent` の `this.inputElement` は、`CustomTextInput` の `` 要素に対応する DOM ノードに設定されます。 +上記の例では、`Parent` は ref コールバックを `inputRef` プロパティとして `CustomTextInput` に渡し、`CustomTextInput` は同じ関数を特別な `ref` 属性として `` に渡します。その結果、`Parent` の `this.inputElement` は、`CustomTextInput` の `` 要素に対応する DOM ノードに設定されます。 ### レガシー API：String Refs From f7553259bf9265ff5307ec0f176d75a73d0dca74 Mon Sep 17 00:00:00 2001 From: Daiki Ihara Date: Tue, 5 Feb 2019 22:04:11 +0900 Subject: [PATCH 29/34] Update content/docs/refs-and-the-dom.md Co-Authored-By: y-temp4 --- content/docs/refs-and-the-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 04095e31d..a10622fef 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -290,4 +290,4 @@ class Parent extends React.Component { ### Callback refs の注意事項 -`ref` コールバックがインライン関数として定義されている場合、更新中に 2 回呼び出されます。最初は `null`、次に DOM 要素で呼び出されます。これは、各レンダリングで関数の新しいインスタンスが作成されるため、React は古い ref を削除し、新しい ref を設定する必要があるためです。`ref` コールバックをクラスのバウンドメソッドとして定義することでこれを回避できますが、ほとんどの場合は問題にならないはずです。 +`ref` コールバックがインライン関数として定義されている場合、更新中に 2 回呼び出されます。最初は `null`、次に DOM 要素で呼び出されます。これは、それぞれのレンダーで関数の新しいインスタンスが作成されるため、React は古い ref を削除し、新しい ref を設定する必要があるためです。`ref` コールバックをクラスのバウンドメソッドとして定義することでこれを回避できますが、ほとんどの場合は問題にならないはずです。 From df4c0f496e53689ed382a820d982a15d8426ca29 Mon Sep 17 00:00:00 2001 From: y-temp4 Date: Wed, 6 Feb 2019 10:30:13 +0900 Subject: [PATCH 30/34] doc: Change "refs" to "ref" --- content/docs/refs-and-the-dom.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index a10622fef..45b5a3dae 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -11,25 +11,25 @@ redirect_from: permalink: docs/refs-and-the-dom.html --- -Refs は render メソッドで作成された DOM ノードもしくは React の要素にアクセスする方法を提供します。 +Ref は render メソッドで作成された DOM ノードもしくは React の要素にアクセスする方法を提供します。 一般的な React のデータフローでは、[props](/docs/components-and-props.html) は親コンポーネントがその子要素とやりとりする唯一の方法です。子要素を変更するには、新しい props でそれを再レンダーします。ただし、一般的なデータフロー以外で子要素を強制的に変更する必要がある場合もあります。その場合、変更される子要素は React コンポーネントのインスタンスまたは、DOM 要素です。 どちらの場合でも、React は避難ハッチを提供します。 ### いつ Refs を使うか -Refs に適した使用例は以下の通りです。 +Ref に適した使用例は以下の通りです。 * フォーカス、テキストの選択およびメディアの再生の管理 * アニメーションの発火 * サードパーティの DOM ライブラリとの統合 -宣言的に行えるものには refs を使用しないでください。 +宣言的に行えるものには ref を使用しないでください。 例えば、`Dialog` コンポーネントに `open()` と `close()` メソッドを実装するかわりに、`isOpen` プロパティを渡してください。 ### Refs を使いすぎない -最初はアプリ内で「何かを起こす」ために refs を使いがちかもしれません。そんなときは、少し時間をかけて、コンポーネントの階層のどこで状態を保持すべきかについて、よりしっかりと考えてみてください。多くの場合、その状態を「保持する」ための適切な場所は階層のより上位にあることが明らかになるでしょう。具体例については [state のリフトアップ](/docs/lifting-state-up.html)ガイドを参照してください。 +最初はアプリ内で「何かを起こす」ために ref を使いがちかもしれません。そんなときは、少し時間をかけて、コンポーネントの階層のどこで状態を保持すべきかについて、よりしっかりと考えてみてください。多くの場合、その状態を「保持する」ための適切な場所は階層のより上位にあることが明らかになるでしょう。具体例については [state のリフトアップ](/docs/lifting-state-up.html)ガイドを参照してください。 > 補足 > @@ -37,7 +37,7 @@ Refs に適した使用例は以下の通りです。 ### Refs を作成する -Refs は `React.createRef()` を使用して作成され、 `ref` 属性を用いて React 要素に紐付けられます。Refs は通常、コンポーネントの構築時にインスタンスプロパティに割り当てられるため、コンポーネントを通して参照が可能です。 +Ref は `React.createRef()` を使用して作成され、 `ref` 属性を用いて React 要素に紐付けられます。Ref は通常、コンポーネントの構築時にインスタンスプロパティに割り当てられるため、コンポーネントを通して参照が可能です。 ```javascript{4,7} class MyComponent extends React.Component { @@ -206,7 +206,7 @@ React 16.2 以下を使用している場合、または ref forwarding で提 ### コールバック Refs -React はまた「コールバック Refs」と呼ばれる refs を設定するためのさらなる方法をサポートします。 +React はまた「コールバック Refs」と呼ばれる ref を設定するためのさらなる方法をサポートします。 `createRef()` によって作成された `ref` 属性を渡す代わりに、関数を渡します。 この関数は、引数として React コンポーネントのインスタンスまたは HTML DOM 要素を受け取ります。これらは他の場所に保持したり、他の場所からアクセスできます。 @@ -256,7 +256,7 @@ class CustomTextInput extends React.Component { コンポーネントがマウントされると React は DOM 要素とともに `ref` コールバックを呼び出し、マウントが解除されると `null` とともにコールバックを呼び出します。Refs は `componentDidMount` または `componentDidUpdate` が発火する前に最新のものであることが保証されています。 -`React.createRef()` で作成されたオブジェクトの refs と同様に、コンポーネント間でコールバック refs を渡すことができます。 +`React.createRef()` で作成されたオブジェクトの ref と同様に、コンポーネント間でコールバック refs を渡すことができます。 ```javascript{4,13} function CustomTextInput(props) { From 740d9a2f9bbd74a28b82be1a5350a035eee63155 Mon Sep 17 00:00:00 2001 From: y-temp4 Date: Thu, 7 Feb 2019 10:34:29 +0900 Subject: [PATCH 31/34] doc: Change "refs" to "ref" --- content/docs/refs-and-the-dom.md | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 45b5a3dae..3f58c8d8a 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -1,6 +1,6 @@ --- id: refs-and-the-dom -title: Refs と DOM +title: Ref と DOM redirect_from: - "docs/working-with-the-browser.html" - "docs/more-about-refs.html" @@ -15,7 +15,7 @@ Ref は render メソッドで作成された DOM ノードもしくは React 一般的な React のデータフローでは、[props](/docs/components-and-props.html) は親コンポーネントがその子要素とやりとりする唯一の方法です。子要素を変更するには、新しい props でそれを再レンダーします。ただし、一般的なデータフロー以外で子要素を強制的に変更する必要がある場合もあります。その場合、変更される子要素は React コンポーネントのインスタンスまたは、DOM 要素です。 どちらの場合でも、React は避難ハッチを提供します。 -### いつ Refs を使うか +### いつ Ref を使うか Ref に適した使用例は以下の通りです。 @@ -27,15 +27,15 @@ Ref に適した使用例は以下の通りです。 例えば、`Dialog` コンポーネントに `open()` と `close()` メソッドを実装するかわりに、`isOpen` プロパティを渡してください。 -### Refs を使いすぎない +### Ref を使いすぎない 最初はアプリ内で「何かを起こす」ために ref を使いがちかもしれません。そんなときは、少し時間をかけて、コンポーネントの階層のどこで状態を保持すべきかについて、よりしっかりと考えてみてください。多くの場合、その状態を「保持する」ための適切な場所は階層のより上位にあることが明らかになるでしょう。具体例については [state のリフトアップ](/docs/lifting-state-up.html)ガイドを参照してください。 > 補足 > -> 以下の例は React 16.3 で導入された `React.createRef()` API を使うように更新されました。以前のリリースの React を使用している場合は、代わりに [callback refs](#callback-refs) を使用することをおすすめします。 +> 以下の例は React 16.3 で導入された `React.createRef()` API を使うように更新されました。以前のリリースの React を使用している場合は、代わりに [callback ref](#callback-refs) を使用することをおすすめします。 -### Refs を作成する +### Ref を作成する Ref は `React.createRef()` を使用して作成され、 `ref` 属性を用いて React 要素に紐付けられます。Ref は通常、コンポーネントの構築時にインスタンスプロパティに割り当てられるため、コンポーネントを通して参照が可能です。 @@ -51,7 +51,7 @@ class MyComponent extends React.Component { } ``` -### Refs へのアクセス +### Ref へのアクセス ref が `render` メソッドの要素に渡されると、そのノードへの参照は ref の `current` 属性でアクセスできるようになります。 @@ -138,7 +138,7 @@ class CustomTextInput extends React.Component { } ``` -#### Refs と関数コンポーネント +#### Ref と関数コンポーネント 関数コンポーネントにはインスタンスがないため、**関数コンポーネントに `ref` 属性を使用することはできません。** @@ -190,7 +190,7 @@ function CustomTextInput(props) { } ``` -### DOM の Refs を親コンポーネントにさらす +### DOM の Ref を親コンポーネントにさらす まれに、親コンポーネントから子の DOM ノードにアクセスしたい場合があります。これは、コンポーネントのカプセル化を壊すため、一般的にはおすすめできませんが、フォーカスを発火させたり、子の DOM ノードのサイズや位置を計測するのに役立つことがあります。 @@ -204,9 +204,9 @@ React 16.2 以下を使用している場合、または ref forwarding で提 おすすめできない上に、[`StrictMode`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage) では 廃止予定です。 -### コールバック Refs +### コールバック Ref -React はまた「コールバック Refs」と呼ばれる ref を設定するためのさらなる方法をサポートします。 +React はまた「コールバック Ref」と呼ばれる ref を設定するためのさらなる方法をサポートします。 `createRef()` によって作成された `ref` 属性を渡す代わりに、関数を渡します。 この関数は、引数として React コンポーネントのインスタンスまたは HTML DOM 要素を受け取ります。これらは他の場所に保持したり、他の場所からアクセスできます。 @@ -254,9 +254,9 @@ class CustomTextInput extends React.Component { } ``` -コンポーネントがマウントされると React は DOM 要素とともに `ref` コールバックを呼び出し、マウントが解除されると `null` とともにコールバックを呼び出します。Refs は `componentDidMount` または `componentDidUpdate` が発火する前に最新のものであることが保証されています。 +コンポーネントがマウントされると React は DOM 要素とともに `ref` コールバックを呼び出し、マウントが解除されると `null` とともにコールバックを呼び出します。Ref は `componentDidMount` または `componentDidUpdate` が発火する前に最新のものであることが保証されています。 -`React.createRef()` で作成されたオブジェクトの ref と同様に、コンポーネント間でコールバック refs を渡すことができます。 +`React.createRef()` で作成されたオブジェクトの ref と同様に、コンポーネント間でコールバック ref を渡すことができます。 ```javascript{4,13} function CustomTextInput(props) { @@ -280,14 +280,14 @@ class Parent extends React.Component { 上記の例では、`Parent` は ref コールバックを `inputRef` プロパティとして `CustomTextInput` に渡し、`CustomTextInput` は同じ関数を特別な `ref` 属性として `` に渡します。その結果、`Parent` の `this.inputElement` は、`CustomTextInput` の `` 要素に対応する DOM ノードに設定されます。 -### レガシー API：String Refs +### レガシー API：String Ref -以前に React を使用したことがある場合は、`ref` 属性が `"textInput"` のような文字列で、DOM ノードが `this.refs.textInput` としてアクセスされる古い API に慣れているかもしれません。String refs には[いくつかの問題](https://github.com/facebook/react/pull/8333#issuecomment-271648615)があり、レガシーと見なされ、**将来のリリースのいずれかで削除される可能性が高い**ため、使用することをおすすめしません。 +以前に React を使用したことがある場合は、`ref` 属性が `"textInput"` のような文字列で、DOM ノードが `this.refs.textInput` としてアクセスされる古い API に慣れているかもしれません。String ref には[いくつかの問題](https://github.com/facebook/react/pull/8333#issuecomment-271648615)があり、レガシーと見なされ、**将来のリリースのいずれかで削除される可能性が高い**ため、使用することをおすすめしません。 > 補足 > -> Refs にアクセスするために `this.refs.textInput` を現在使用している場合は、代わりに[コールバックパターン](#callback-refs)もしくは [`createRef` API](#creating-refs) を使用することをおすすめします。 +> Ref にアクセスするために `this.refs.textInput` を現在使用している場合は、代わりに[コールバックパターン](#callback-refs)もしくは [`createRef` API](#creating-refs) を使用することをおすすめします。 -### Callback refs の注意事項 +### Callback ref の注意事項 `ref` コールバックがインライン関数として定義されている場合、更新中に 2 回呼び出されます。最初は `null`、次に DOM 要素で呼び出されます。これは、それぞれのレンダーで関数の新しいインスタンスが作成されるため、React は古い ref を削除し、新しい ref を設定する必要があるためです。`ref` コールバックをクラスのバウンドメソッドとして定義することでこれを回避できますが、ほとんどの場合は問題にならないはずです。 From a4a8c029125f11ec9b830d5b13039617e32ca704 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Thu, 7 Feb 2019 11:23:23 +0900 Subject: [PATCH 32/34] Apply suggestions from code review Co-Authored-By: y-temp4 --- content/docs/refs-and-the-dom.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 3f58c8d8a..4e584268c 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -13,7 +13,7 @@ permalink: docs/refs-and-the-dom.html Ref は render メソッドで作成された DOM ノードもしくは React の要素にアクセスする方法を提供します。 -一般的な React のデータフローでは、[props](/docs/components-and-props.html) は親コンポーネントがその子要素とやりとりする唯一の方法です。子要素を変更するには、新しい props でそれを再レンダーします。ただし、一般的なデータフロー以外で子要素を強制的に変更する必要がある場合もあります。その場合、変更される子要素は React コンポーネントのインスタンスまたは、DOM 要素です。 どちらの場合でも、React は避難ハッチを提供します。 +一般的な React のデータフローでは、[props](/docs/components-and-props.html) が、親コンポーネントがその子要素とやりとりする唯一の方法です。子要素を変更するには、新しい props でそれを再レンダーします。ただし、この一般的なデータフロー以外で、子要素を命令型のコードを使って変更する必要がある場合もあります。変更したい子要素が React コンポーネントのインスタンスのことも、DOM 要素のこともあるでしょう。 どちらの場合でも、React は避難ハッチを提供します。 ### いつ Ref を使うか @@ -154,7 +154,7 @@ class Parent extends React.Component { this.textInput = React.createRef(); } render() { - // これは動き*ません*！ + // これは動き「ません」！ return ( ); @@ -164,7 +164,7 @@ class Parent extends React.Component { Ref が必要な場合は、ライフサイクルメソッドや state が必要なときと同じように、コンポーネントをクラスに変換しなければなりません。 -ただし、DOM 要素またはクラスコンポーネントを参照している限り、**関数コンポーネント内で ref 属性を使用できます。** +ただし、DOM 要素またはクラスコンポーネントを参照している限り、**関数コンポーネント内で ref 属性を使用することはできます。** ```javascript{2,3,6,13} function CustomTextInput(props) { @@ -190,13 +190,13 @@ function CustomTextInput(props) { } ``` -### DOM の Ref を親コンポーネントにさらす +### DOM の Ref を親コンポーネントに公開する -まれに、親コンポーネントから子の DOM ノードにアクセスしたい場合があります。これは、コンポーネントのカプセル化を壊すため、一般的にはおすすめできませんが、フォーカスを発火させたり、子の DOM ノードのサイズや位置を計測するのに役立つことがあります。 +まれに、親コンポーネントから子コンポーネントの DOM ノードにアクセスしたい場合があります。これは、コンポーネントのカプセル化を壊すため、一般的にはおすすめできませんが、フォーカスを発火させたり、子の DOM ノードのサイズや位置を計測するのに役立つことがあります。 [子コンポーネントに ref を追加すること](#adding-a-ref-to-a-class-component)はできますが、DOM ノードではなくコンポーネントインスタンスしか取得できないため、これは理想的な解決策ではありません。また、これは関数コンポーネントでは機能しません。 -React 16.3 以降を使用している場合、これらの場合には [ref forwarding](/docs/forwarding-refs.html) を使用することをおすすめします。**Ref forwarding では、コンポーネントは任意の子コンポーネントの ref を自分のものとして公開することを選択できます。** [Ref forwarding のドキュメント](/docs/forwarding-refs.html#forwarding-refs-to-dom-components)に、子の DOM ノードを親コンポーネントに公開する方法の詳細な例があります。 +React 16.3 以降を使用している場合、これらの場合には [ref forwarding](/docs/forwarding-refs.html) を使用することをおすすめします。**Ref forwarding では、コンポーネントは任意の子コンポーネントの ref を自分のものとして公開することを選択できます。**[Ref forwarding のドキュメント](/docs/forwarding-refs.html#forwarding-refs-to-dom-components)に、子の DOM ノードを親コンポーネントに公開する方法の詳細な例があります。 React 16.2 以下を使用している場合、または ref forwarding で提供される以上の柔軟性が必要な場合は、[この代替手法](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509)を使用して ref を異なる名前の props として明示的に渡すことができます。 @@ -206,7 +206,7 @@ React 16.2 以下を使用している場合、または ref forwarding で提 ### コールバック Ref -React はまた「コールバック Ref」と呼ばれる ref を設定するためのさらなる方法をサポートします。 +React はまた「コールバック Ref」と呼ばれる ref を設定するための別の方法をサポートします。 `createRef()` によって作成された `ref` 属性を渡す代わりに、関数を渡します。 この関数は、引数として React コンポーネントのインスタンスまたは HTML DOM 要素を受け取ります。これらは他の場所に保持したり、他の場所からアクセスできます。 @@ -290,4 +290,4 @@ class Parent extends React.Component { ### Callback ref の注意事項 -`ref` コールバックがインライン関数として定義されている場合、更新中に 2 回呼び出されます。最初は `null`、次に DOM 要素で呼び出されます。これは、それぞれのレンダーで関数の新しいインスタンスが作成されるため、React は古い ref を削除し、新しい ref を設定する必要があるためです。`ref` コールバックをクラスのバウンドメソッドとして定義することでこれを回避できますが、ほとんどの場合は問題にならないはずです。 +`ref` コールバックがインライン関数として定義されている場合、更新中に 2 回呼び出されます。最初は `null`、次に DOM 要素で呼び出されます。これは、それぞれのレンダーで関数の新しいインスタンスが作成されるため、React は古い ref を削除し、新しい ref を設定する必要があるためです。`ref` コールバックをクラス内のバインドされたメソッドとして定義することでこれを回避できますが、ほとんどの場合は問題にならないはずです。 From 7402602469e0962faf70d4046483a8b26e0f17bc Mon Sep 17 00:00:00 2001 From: y-temp4 Date: Thu, 7 Feb 2019 11:25:01 +0900 Subject: [PATCH 33/34] doc: Remove useless line break --- content/docs/refs-and-the-dom.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 4e584268c..f0e35f598 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -200,9 +200,7 @@ React 16.3 以降を使用している場合、これらの場合には [ref for React 16.2 以下を使用している場合、または ref forwarding で提供される以上の柔軟性が必要な場合は、[この代替手法](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509)を使用して ref を異なる名前の props として明示的に渡すことができます。 -可能であれば DOM ノードを公開しないことをおすすめしますが、これは便利な避難ハッチになることもあります。留意すべき点として、この方法では子コンポーネントにコードを追加する必要があります。子コンポーネントの実装にまったく手を加えられない場合、最後の選択肢は [`findDOMNode()`](/docs/react-dom.html#finddomnode) を使用することですが、 -おすすめできない上に、[`StrictMode`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage) では -廃止予定です。 +可能であれば DOM ノードを公開しないことをおすすめしますが、これは便利な避難ハッチになることもあります。留意すべき点として、この方法では子コンポーネントにコードを追加する必要があります。子コンポーネントの実装にまったく手を加えられない場合、最後の選択肢は [`findDOMNode()`](/docs/react-dom.html#finddomnode) を使用することですが、おすすめできない上に、[`StrictMode`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage) では廃止予定です。 ### コールバック Ref From 1a4941c73d10408f4eee75bb77a96efdec240308 Mon Sep 17 00:00:00 2001 From: Toru Kobayashi Date: Fri, 8 Feb 2019 09:40:54 +0900 Subject: [PATCH 34/34] Apply suggestions from code review Co-Authored-By: y-temp4 --- content/docs/refs-and-the-dom.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index f0e35f598..54344a1ea 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -200,13 +200,13 @@ React 16.3 以降を使用している場合、これらの場合には [ref for React 16.2 以下を使用している場合、または ref forwarding で提供される以上の柔軟性が必要な場合は、[この代替手法](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509)を使用して ref を異なる名前の props として明示的に渡すことができます。 -可能であれば DOM ノードを公開しないことをおすすめしますが、これは便利な避難ハッチになることもあります。留意すべき点として、この方法では子コンポーネントにコードを追加する必要があります。子コンポーネントの実装にまったく手を加えられない場合、最後の選択肢は [`findDOMNode()`](/docs/react-dom.html#finddomnode) を使用することですが、おすすめできない上に、[`StrictMode`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage) では廃止予定です。 +可能であれば DOM ノードを公開しないことをおすすめしますが、これは便利な避難ハッチになることもあります。留意すべき点として、この方法では子コンポーネントにコードを追加する必要があります。子コンポーネントの実装にまったく手を加えられない場合、最後の選択肢は [`findDOMNode()`](/docs/react-dom.html#finddomnode) を使用することですが、おすすめできない上に、[`StrictMode`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage) では非推奨です。 ### コールバック Ref -React はまた「コールバック Ref」と呼ばれる ref を設定するための別の方法をサポートします。 +React はまた「コールバック Ref」と呼ばれる、より細かい制御が可能な ref を設定するための別の方法をサポートします。 -`createRef()` によって作成された `ref` 属性を渡す代わりに、関数を渡します。 この関数は、引数として React コンポーネントのインスタンスまたは HTML DOM 要素を受け取ります。これらは他の場所に保持したり、他の場所からアクセスできます。 +`createRef()` によって作成された `ref` 属性を渡す代わりに、関数を渡します。 この関数は、引数として React コンポーネントのインスタンスまたは HTML DOM 要素を受け取ります。これを保持することで、他の場所からアクセスできます。 以下は、`ref` コールバックを用いて DOM ノードへの参照をインスタンスプロパティに格納する一般的な実装例です。 @@ -286,6 +286,6 @@ class Parent extends React.Component { > > Ref にアクセスするために `this.refs.textInput` を現在使用している場合は、代わりに[コールバックパターン](#callback-refs)もしくは [`createRef` API](#creating-refs) を使用することをおすすめします。 -### Callback ref の注意事項 +### コールバック Ref の注意事項 `ref` コールバックがインライン関数として定義されている場合、更新中に 2 回呼び出されます。最初は `null`、次に DOM 要素で呼び出されます。これは、それぞれのレンダーで関数の新しいインスタンスが作成されるため、React は古い ref を削除し、新しい ref を設定する必要があるためです。`ref` コールバックをクラス内のバインドされたメソッドとして定義することでこれを回避できますが、ほとんどの場合は問題にならないはずです。