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.
52
+
*`findDOMNode`只对已经挂载到 DOM 上的组件有效。如果你尝试在一个还未挂载的组件上调用 `findDOMNode()`（比如在一个还未创建的组件的 `render()`方法中调用 `findDOMNode()`），会抛出异常。
53
53
54
-
*`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.
54
+
*`findDOMNode`只会返回调用时的结果，你无法得知组件是否在之后渲染了不同的节点。
55
55
56
-
*`findDOMNode`accepts a class component instance, so it can't be used with function components.
56
+
*`findDOMNode`接受类组件实例作为参数，而不能用于函数式组件。
57
57
58
58
---
59
59
60
-
## Usage {/*usage*/}
60
+
## 用法 {/*usage*/}
61
61
62
-
### 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
+
使用`findDOMNode`获取 [类式组件](/reference/react/Component)实例（通常是 `this`）对应的已渲染 DOM 节点。
65
65
66
66
```js {3}
67
67
classAutoselectingInputextendsComponent {
@@ -71,12 +71,12 @@ class AutoselectingInput extends Component {
71
71
}
72
72
73
73
render() {
74
-
return<input defaultValue="Hello"/>
74
+
return<input defaultValue="你好"/>
75
75
}
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 元素，这样你就可以对其进行操作。例如，当点击下方的“显示示例”按钮并挂载了输入框后，[`input.select()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select)会选中输入框中的所有文本：
80
80
81
81
<Sandpack>
82
82
@@ -89,7 +89,7 @@ export default function App() {
89
89
return (
90
90
<>
91
91
<button onClick={() =>setShow(true)}>
92
-
Show example
92
+
显示示例
93
93
</button>
94
94
<hr />
95
95
{show &&<AutoselectingInput />}
@@ -109,7 +109,7 @@ class AutoselectingInput extends Component {
### 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>`:
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>`节点，但其实我们期望找到的是 `<input>`节点。为了避免这些问题，考虑使用 [`createRef`](/reference/react/createRef)管理特定的 DOM 节点。
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:
170
+
在这个例子中不再使用 `findDOMNode`。相反，使用 `inputRef = createRef(null)`并将其定义为类的实例字段。如果想要从中读取 DOM 节点，可以使用`this.inputRef.current`。如果想要将其附加在 JSX 上，考虑渲染 `<input ref={this.inputRef} />`。这将连接使用 DOM 节点的代码与对应 JSX。
171
171
172
172
<Sandpack>
173
173
@@ -180,7 +180,7 @@ export default function App() {
180
180
return (
181
181
<>
182
182
<button onClick={() =>setShow(true)}>
183
-
Show example
183
+
显示示例
184
184
</button>
185
185
<hr />
186
186
{show &&<AutoselectingInput />}
@@ -202,7 +202,7 @@ class AutoselectingInput extends Component {
### 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` 组件，而 `MyInput` 渲染了浏览器标签 `<input>`。
261
261
262
262
<Sandpack>
263
263
@@ -270,7 +270,7 @@ export default function App() {
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