diff --git a/src/content/reference/react-dom/findDOMNode.md b/src/content/reference/react-dom/findDOMNode.md
index 75c02c73da..7674879ccd 100644
--- a/src/content/reference/react-dom/findDOMNode.md
+++ b/src/content/reference/react-dom/findDOMNode.md
@@ -4,13 +4,13 @@ title: findDOMNode
-This API will be removed in a future major version of React. [See the alternatives.](#alternatives)
+此 API 将在未来的 React 主要版本中被移除。[请查看替代方案](#alternatives)。
-`findDOMNode` finds the browser DOM node for a React [class component](/reference/react/Component) instance.
+`findDOMNode` 方法可以获取 [类式组件](/reference/react/Component) 实例对应的浏览器 DOM 节点。
```js
const domNode = findDOMNode(componentInstance)
@@ -22,11 +22,11 @@ const domNode = findDOMNode(componentInstance)
---
-## Reference {/*reference*/}
+## 参考 {/*reference*/}
### `findDOMNode(componentInstance)` {/*finddomnode*/}
-Call `findDOMNode` to find the browser DOM node for a given React [class component](/reference/react/Component) instance.
+使用 `findDOMNode` 获取 [类式组件](/reference/react/Component) 实例对应的浏览器 DOM 节点。
```js
import { findDOMNode } from 'react-dom';
@@ -34,34 +34,34 @@ import { findDOMNode } from 'react-dom';
const domNode = findDOMNode(componentInstance);
```
-[See more examples below.](#usage)
+[参见下面更多示例](#usage)。
-#### Parameters {/*parameters*/}
+#### 参数 {/*parameters*/}
-* `componentInstance`: An instance of the [`Component`](/reference/react/Component) subclass. For example, `this` inside a class component.
+* `componentInstance`:[`Component`](/reference/react/Component) 子类的实例。举个例子,类式组件中的 `this`。
-#### Returns {/*returns*/}
+#### 返回值 {/*returns*/}
-`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.
+`findDOMNode` 方法返回与给定的 `componentInstance` 中最接近的浏览器 DOM 节点。当组件渲染为 `null` 或 `false` 时,`findDOMNode` 返回 `null`。当组件渲染为字符串时,`findDOMNode` 返回一个包含该值的文本 DOM 节点。
-#### Caveats {/*caveats*/}
+#### 注意 {/*caveats*/}
-* 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.
+* 组件可能会返回包含多个子元素的数组或 [Fragment](/reference/react/Fragment)。在这种情况下,`findDOMNode` 会返回第一个非空子节点对应的 DOM 节点。
-* `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` 只对已经挂载到 DOM 上的组件有效。如果你尝试在一个还未挂载的组件上调用 `findDOMNode()`(比如在一个还未创建的组件的 `render()` 方法中调用 `findDOMNode()`),会抛出异常。
-* `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.
+* `findDOMNode` 只会返回调用时的结果,你无法得知组件是否在之后渲染了不同的节点。
-* `findDOMNode` accepts a class component instance, so it can't be used with function components.
+* `findDOMNode` 接受类组件实例作为参数,而不能用于函数式组件。
---
-## Usage {/*usage*/}
+## 用法 {/*usage*/}
-### Finding the root DOM node of a class component {/*finding-the-root-dom-node-of-a-class-component*/}
+### 寻找类式组件对应的 DOM 节点 {/*finding-the-root-dom-node-of-a-class-component*/}
-Call `findDOMNode` with a [class component](/reference/react/Component) instance (usually, `this`) to find the DOM node it has rendered.
+使用 `findDOMNode` 获取 [类式组件](/reference/react/Component) 实例(通常是 `this`)对应的已渲染 DOM 节点。
```js {3}
class AutoselectingInput extends Component {
@@ -71,12 +71,12 @@ class AutoselectingInput extends Component {
}
render() {
- return
+ return
}
}
```
-Here, the `input` variable will be set to the `` 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:
+在这里,`input` 变量将被设置为 `` DOM 元素,这样你就可以对其进行操作。例如,当点击下方的“显示示例”按钮并挂载了输入框后,[`input.select()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select) 会选中输入框中的所有文本:
@@ -89,7 +89,7 @@ export default function App() {
return (
<>
{show && }
@@ -109,7 +109,7 @@ class AutoselectingInput extends Component {
}
render() {
- return
+ return
}
}
@@ -120,11 +120,11 @@ export default AutoselectingInput;
---
-## Alternatives {/*alternatives*/}
+## 替代方案 {/*alternatives*/}
-### Reading component's own DOM node from a ref {/*reading-components-own-dom-node-from-a-ref*/}
+### 使用 ref 读取组件自己的 DOM 节点 {/*reading-components-own-dom-node-from-a-ref*/}
-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 `` into a `
` 中:
@@ -137,7 +137,7 @@ export default function App() {
return (
<>
{show && }
@@ -165,9 +165,9 @@ export default AutoselectingInput;
-This will break the code because now, `findDOMNode(this)` finds the `
` DOM node, but the code expects an `` DOM node. To avoid these kinds of problems, use [`createRef`](/reference/react/createRef) to manage a specific DOM node.
+这将出现问题。`findDOMNode(this)` 找到的是 `
` 节点,但其实我们期望找到的是 `` 节点。为了避免这些问题,考虑使用 [`createRef`](/reference/react/createRef) 管理特定的 DOM 节点。
-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 ``. This connects the code using the DOM node to its JSX:
+在这个例子中不再使用 `findDOMNode`。相反,使用 `inputRef = createRef(null)` 并将其定义为类的实例字段。如果想要从中读取 DOM 节点,可以使用`this.inputRef.current`。如果想要将其附加在 JSX 上,考虑渲染 ``。这将连接使用 DOM 节点的代码与对应 JSX。
@@ -180,7 +180,7 @@ export default function App() {
return (
<>
{show && }
@@ -202,7 +202,7 @@ class AutoselectingInput extends Component {
render() {
return (
-
+
);
}
}
@@ -212,7 +212,7 @@ export default AutoselectingInput;
-In modern React without class components, the equivalent code would call [`useRef`](/reference/react/useRef) instead:
+在函数式组件中,你应该使用 [`useRef`](/reference/react/useRef):
@@ -225,7 +225,7 @@ export default function App() {
return (
<>
{show && }
@@ -245,19 +245,19 @@ export default function AutoselectingInput() {
input.select();
}, []);
- return
+ return
}
```
-[Read more about manipulating the DOM with refs.](/learn/manipulating-the-dom-with-refs)
+如果你想了解更多,请阅读 [使用 ref 操作 DOM](/learn/manipulating-the-dom-with-refs)。
---
-### Reading a child component's DOM node from a forwarded ref {/*reading-a-child-components-dom-node-from-a-forwarded-ref*/}
+### 使用 ref 操作子组件的 DOM 节点 {/*reading-a-child-components-dom-node-from-a-forwarded-ref*/}
-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 ``.
+在这个例子中,`findDOMNode(this)` 获取了属于另一个组件的 DOM 节点。`AutoselectingInput` 渲染了我们自己的 `MyInput` 组件,而 `MyInput` 渲染了浏览器标签 ``。
@@ -270,7 +270,7 @@ export default function App() {
return (
<>
{show && }
@@ -299,20 +299,20 @@ export default AutoselectingInput;
```js MyInput.js
export default function MyInput() {
- return ;
+ return ;
}
```
-Notice that calling `findDOMNode(this)` inside `AutoselectingInput` still gives you the DOM ``--even though the JSX for this `` 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 `
` around it. This would break the code of `AutoselectingInput` (which expects to find an ``).
+请注意,即使 `` 被隐藏在 `MyInput` 组件中,在 `AutoselectingInput` 中调用 `findDOMNode(this)` 仍然会返回 ``。这在上面的例子中似乎很方便,但它会导致代码变得非常脆弱。想象一下,如果你以后想编辑 `MyInput` 并使用 `
` 包装,但是这将会破坏 `AutoselectingInput` 的代码(因为它期望找到 ``)。
-To replace `findDOMNode` in this example, the two components need to coordinate:
+考虑在这个例子中替换 `findDOMNode`,并且下列两个组件需要协同工作:
-1. `AutoSelectingInput` should declare a ref, like [in the earlier example](#reading-components-own-dom-node-from-a-ref), and pass it to ``.
-2. `MyInput` should be declared with [`forwardRef`](/reference/react/forwardRef) to take that ref and forward it down to the `` node.
+1. 在 `AutoSelectingInput` 中声明一个 ref,就像 [前面的例子](#reading-components-own-dom-node-from-a-ref) 中一样,并将其传递给 ``。
+2. `MyInput` 使用 [`forwardRef`](/reference/react/forwardRef) 接收该 ref 并将其转发到 `` 节点。
-This version does that, so it no longer needs `findDOMNode`:
+这种方式解决了这个问题,所以不再需要 `findDOMNode`:
@@ -325,7 +325,7 @@ export default function App() {
return (
<>
{show && }
@@ -360,7 +360,7 @@ export default AutoselectingInput;
import { forwardRef } from 'react';
const MyInput = forwardRef(function MyInput(props, ref) {
- return ;
+ return ;
});
export default MyInput;
@@ -368,7 +368,7 @@ export default MyInput;
-Here is how this code would look like with function components instead of classes:
+以下是上面代码在函数式组件中的样子:
@@ -381,7 +381,7 @@ export default function App() {
return (
<>
{show && }
@@ -402,7 +402,7 @@ export default function AutoselectingInput() {
input.select();
}, []);
- return
+ return
}
```
@@ -410,7 +410,7 @@ export default function AutoselectingInput() {
import { forwardRef } from 'react';
const MyInput = forwardRef(function MyInput(props, ref) {
- return ;
+ return ;
});
export default MyInput;
@@ -420,11 +420,11 @@ export default MyInput;
---
-### Adding a wrapper `
` element {/*adding-a-wrapper-div-element*/}
+### 使用 `
` 包装 {/*adding-a-wrapper-div-element*/}
-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.
+有时,一个组件想要知道子元素的位置和大小。这会让你想要使用 `findDOMNode(this)` 查找子元素,然后使用 [`getBoundingClientRect`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) 等 DOM 方法来进行测量。
-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 `
` node around the content as a workaround, and getting a ref to that node. However, extra wrappers can break styling.
+目前,还没有直接适用于此场景的替代方法,这就是为什么 `findDOMNode` 已弃用但尚未从 React 中完全删除的原因。在此期间,你可以尝试在内容周围使用 `
` 包装,并向其添加 ref。但是,额外的包装可能会破坏样式。
```js
@@ -432,4 +432,4 @@ There is currently no direct equivalent for this use case, which is why `findDOM
```
-This also applies to focusing and scrolling to arbitrary children.
+这对于聚焦以及滚动到任何子元素也是一样。