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
+
*コンポーネントは、配列や複数の子要素を持つ [Fragment](/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
+
[class component](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:
### 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
+
このコードは壊れます。なぜなら、`findDOMNode(this)`が `<div>` DOM ノードを見つけるようになったからですが、コードは `<input>` 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
+
[refs を使用して 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
+
### forwarded 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`は、ブラウザの `<input>` をレンダーする独自のコンポーネントである `MyInput` をレンダーします。
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` のような測定するために 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