You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
`findDOMNode`returns the first closest browser DOM node within the given `componentInstance`. When a component renders to `null`, or renders `false`, `findDOMNode`returns`null`. When a component renders to a string, `findDOMNode`returns a text DOM node containing that value.
46
+
`findDOMNode`は、指定された `componentInstance` 内で最も上位にあるブラウザ DOM ノードを返します。コンポーネントが `null` をレンダーする場合や `false` をレンダーする場合、`findDOMNode`は`null` を返します。コンポーネントが文字列をレンダーする場合は `findDOMNode`はその値を含んでいるテキスト DOM ノードを返します。
47
47
48
-
#### Caveats {/*caveats*/}
48
+
#### 注意点 {/*caveats*/}
49
49
50
-
*A component may return an array or a [Fragment](/reference/react/Fragment) with multiple children. In that case `findDOMNode`, will return the DOM node corresponding to the first non-empty child.
50
+
*コンポーネントは、配列や、複数の子要素を持つ[フラグメント](/reference/react/Fragment)を返す場合もあります。その場合 `findDOMNode` は、最初の空ではない子に対応する DOM ノードを返します。
51
51
52
-
*`findDOMNode`only works on mounted components (that is, components that have been placed in the DOM). If you try to call this on a component that has not been mounted yet (like calling `findDOMNode()`in `render()`on a component that has yet to be created), an exception will be thrown.
*`findDOMNode`only returns the result at the time of your call. If a child component renders a different node later, there is no way for you to be notified of this change.
### Finding the root DOM node of a class component {/*finding-the-root-dom-node-of-a-class-component*/}
62
+
### クラスコンポーネントのルート DOM ノードを見つける {/*finding-the-root-dom-node-of-a-class-component*/}
63
63
64
-
Call `findDOMNode` with a [class component](/reference/react/Component) instance (usually, `this`) to find the DOM node it has rendered.
64
+
[クラスコンポーネント](/reference/react/Component)インスタンス（通常は、`this`）を引数にして `findDOMNode` を呼び出し、レンダーされた DOM ノードを見つけます。
65
65
66
66
```js {3}
67
67
classAutoselectingInputextendsComponent {
@@ -76,7 +76,7 @@ class AutoselectingInput extends Component {
76
76
}
77
77
```
78
78
79
-
Here, the `input`variable will be set to the `<input>` DOM element. This lets you do something with it. For example, when clicking "Show example" below mounts the input, [`input.select()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select)selects all text in the input:
79
+
この例では、`input`変数は `<input>` DOM 要素にセットされます。これにより、それを使用して何かを行うことができます。例えば、以下の "Show example" をクリックすると入力欄がマウントされ、[`input.select()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select)が入力欄のすべてのテキストを選択します。
### Reading component's own DOM node from a ref {/*reading-components-own-dom-node-from-a-ref*/}
125
+
### ref でコンポーネント自身の DOM ノードを読み取る {/*reading-components-own-dom-node-from-a-ref*/}
126
126
127
-
Code using `findDOMNode`is fragile because the connection between the JSX node and the code manipulating the corresponding DOM node is not explicit. For example, try wrapping this `<input />`into a `<div>`:
127
+
`findDOMNode`を使用しているコードは容易に壊れてしまいます。なぜなら JSX ノードと対応する DOM ノードを操作するコード間の接続が明示的でないためです。例えば、以下の `<input />`を `<div>` でラップしてみてください。
This will break the code because now, `findDOMNode(this)`finds the `<div>` DOM node, but the code expects an `<input>`DOM node. To avoid these kinds of problems, use [`createRef`](/reference/react/createRef)to manage a specific DOM node.
168
+
コードは壊れてしまいます。なぜなら、`<input>` DOM ノードを期待していたのに、`findDOMNode(this)`が `<div>` DOM ノードの方を見つけてくるようになったためです。このような問題を避けるには、特定の DOM ノードを管理するために [`createRef`](/reference/react/createRef)を使用してください。
169
169
170
-
In this example, `findDOMNode`is no longer used. Instead, `inputRef = createRef(null)`is defined as an instance field on the class. To read the DOM node from it, you can use `this.inputRef.current`. To attach it to the JSX, you render `<input ref={this.inputRef} />`. This connects the code using the DOM node to its JSX:
@@ -251,13 +251,13 @@ export default function AutoselectingInput() {
251
251
252
252
</Sandpack>
253
253
254
-
[Read more about manipulating the DOM with refs.](/learn/manipulating-the-dom-with-refs)
254
+
[ref を使用して DOM を操作する方法についての詳細はこちら](/learn/manipulating-the-dom-with-refs)
255
255
256
256
---
257
257
258
-
### Reading a child component's DOM node from a forwarded ref {/*reading-a-child-components-dom-node-from-a-forwarded-ref*/}
258
+
### 転送された ref から子コンポーネントの DOM ノードを読み取る {/*reading-a-child-components-dom-node-from-a-forwarded-ref*/}
259
259
260
-
In this example, `findDOMNode(this)`finds a DOM node that belongs to another component. The `AutoselectingInput`renders`MyInput`, which is your own component that renders a browser `<input>`.
260
+
以下の例では、`findDOMNode(this)`は別のコンポーネントに属する DOM ノードを見つけます。`AutoselectingInput`は`MyInput` をレンダーし、このカスタムコンポーネントはブラウザの `<input>` をレンダーします。
261
261
262
262
<Sandpack>
263
263
@@ -305,14 +305,14 @@ export default function MyInput() {
305
305
306
306
</Sandpack>
307
307
308
-
Notice that calling `findDOMNode(this)`inside `AutoselectingInput` still gives you the DOM `<input>`--even though the JSX for this `<input>` is hidden inside the `MyInput`component. This seems convenient for the above example, but it leads to fragile code. Imagine that you wanted to edit `MyInput` later and add a wrapper `<div>`around it. This would break the code of `AutoselectingInput` (which expects to find an `<input>`).
Sometimes a component needs to know the position and size of its children. This makes it tempting to find the children with `findDOMNode(this)`, and then use DOM methods like [`getBoundingClientRect`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)for measurements.
425
+
コンポーネントによっては子要素の位置やサイズを知る必要があります。この場合、`findDOMNode(this)` で子要素を見つけ、[`getBoundingClientRect`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)のような DOM メソッドを使って計測を行いたくなるかもしれません。
426
426
427
-
There is currently no direct equivalent for this use case, which is why `findDOMNode`is deprecated but is not yet removed completely from React. In the meantime, you can try rendering a wrapper `<div>`node around the content as a workaround, and getting a ref to that node. However, extra wrappers can break styling.
0 commit comments