Skip to content

Commit 9bc1932

Browse files
committed
updated line numbers
1 parent b049931 commit 9bc1932

File tree

1 file changed

+5
-5
lines changed

1 file changed

+5
-5
lines changed

content/docs/refs-and-the-dom.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -94,12 +94,13 @@ React will assign the `value` property with the DOM element when the component m
9494

9595
When the `ref` attribute is used on a custom component declared as a class, the `ref` object receives the mounted instance of the component as its `value`. For example, if we wanted to wrap the `CustomTextInput` above to simulate it being clicked immediately after mounting:
9696

97-
```javascript{4,12}
97+
```javascript{4,7,12}
9898
class AutoFocusTextInput extends React.Component {
9999
constructor(props) {
100100
super(props);
101101
this.textInput = React.createRef();
102102
}
103+
103104
componentDidMount() {
104105
this.textInput.value.focusTextInput();
105106
}
@@ -124,7 +125,7 @@ class CustomTextInput extends React.Component {
124125

125126
**You may not use the `ref` attribute on functional components** because they don't have instances:
126127

127-
```javascript{1,8,12}
128+
```javascript{1,8,13}
128129
function MyFunctionalComponent() {
129130
return <input />;
130131
}
@@ -167,7 +168,7 @@ function CustomTextInput(props) {
167168
onClick={handleClick}
168169
/>
169170
</div>
170-
);
171+
);
171172
}
172173
```
173174

@@ -211,7 +212,7 @@ This works even though `CustomTextInput` is a functional component. Unlike the s
211212

212213
Another benefit of this pattern is that it works several components deep. For example, imagine `Parent` didn't need that DOM node, but a component that rendered `Parent` (let's call it `Grandparent`) needed access to it. Then we could let the `Grandparent` specify the `inputRef` prop to the `Parent`, and let `Parent` "forward" it to the `CustomTextInput`:
213214

214-
```javascript{4,12,21,25}
215+
```javascript{4,12,20,24}
215216
function CustomTextInput(props) {
216217
return (
217218
<div>
@@ -228,7 +229,6 @@ function Parent(props) {
228229
);
229230
}
230231
231-
232232
class Grandparent extends React.Component {
233233
constructor(props) {
234234
super(props);

0 commit comments

Comments
 (0)