Skip to content

Commit 000b021

Browse files
committed
Translate 'forwardRef'
1 parent 8dc7f4a commit 000b021

File tree

1 file changed

+49
-49
lines changed

1 file changed

+49
-49
lines changed

src/content/reference/react/forwardRef.md

Lines changed: 49 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: forwardRef
44

55
<Intro>
66

7-
`forwardRef` lets your component expose a DOM node to parent component with a [ref.](/learn/manipulating-the-dom-with-refs)
7+
`forwardRef` rajapinnan avulla komponentti voi tarjota DOM noodin pääkomponenetille [ref](/learn/manipulating-the-dom-with-refs):llä.
88

99
```js
1010
const SomeComponent = forwardRef(render)
@@ -16,11 +16,11 @@ const SomeComponent = forwardRef(render)
1616

1717
---
1818

19-
## Reference {/*reference*/}
19+
## Referenssi {/*reference*/}
2020

2121
### `forwardRef(render)` {/*forwardref*/}
2222

23-
Call `forwardRef()` to let your component receive a ref and forward it to a child component:
23+
Kutsu `forwardRef()` -funktiota, jotta komponenttisi voi vastaanottaa ref:n ja välittää sen lapsikomponentille:
2424

2525
```js
2626
import { forwardRef } from 'react';
@@ -30,26 +30,26 @@ const MyInput = forwardRef(function MyInput(props, ref) {
3030
});
3131
```
3232

33-
[See more examples below.](#usage)
33+
[Katso lisää esimerkkejä alla.](#usage)
3434

35-
#### Parameters {/*parameters*/}
35+
#### Parametrit {/*parameters*/}
3636

37-
* `render`: The render function for your component. React calls this function with the props and `ref` that your component received from its parent. The JSX you return will be the output of your component.
37+
* `render`: Komponenttisi renderöintifunktio. React kutsuu tätä funktiota komponentin pääkomponentilta saamilla propseilla ja `ref`:lla. JSX, jonka palautat, on komponenttisi ulostulo.
3838

39-
#### Returns {/*returns*/}
39+
#### Palautukset {/*returns*/}
4040

41-
`forwardRef` returns a React component that you can render in JSX. Unlike React components defined as plain functions, a component returned by `forwardRef` is also able to receive a `ref` prop.
41+
`forwardRef` palauttaa React-komponentin, jonka voit renderöidä JSX:llä. Toisin kuin React-komponentit, jotka on määritelty tavallisina funktioina, `forwardRef`:n palauttama komponentti voi myös vastaanottaa `ref` propin.
4242

43-
#### Caveats {/*caveats*/}
43+
#### Huomiot {/*caveats*/}
4444

45-
* In Strict Mode, React will **call your render function twice** in order to [help you find accidental impurities.](#my-initializer-or-updater-function-runs-twice) This is development-only behavior and does not affect production. If your render function is pure (as it should be), this should not affect the logic of your component. The result from one of the calls will be ignored.
45+
* Strict Modessa, React **kutsuu renderöintifunktiotasi kahdesti** auttaakseen sinua löytämään tahattomia epäpuhtauksia. Tämä on vain kehitystilassa tapahtuva käyttäytyminen, eikä vaikuta tuotantoon. Jos renderöintifunktiosi on puhdas (kuten sen pitäisi olla), tämä ei vaikuta komponenttisi logiikkaan. Toinen kutsuista jätetään huomiotta.
4646

4747

4848
---
4949

50-
### `render` function {/*render-function*/}
50+
### `render` funktio {/*render-function*/}
5151

52-
`forwardRef` accepts a render function as an argument. React calls this function with `props` and `ref`:
52+
`forwardRef` hyväksyy renderöintifunktion argumenttina. React kutsuu tätä funktiota `props` ja `ref` -argumenteilla:
5353

5454
```js
5555
const MyInput = forwardRef(function MyInput(props, ref) {
@@ -62,23 +62,23 @@ const MyInput = forwardRef(function MyInput(props, ref) {
6262
});
6363
```
6464

65-
#### Parameters {/*render-parameters*/}
65+
#### Parametrit {/*render-parameters*/}
6666

67-
* `props`: The props passed by the parent component.
67+
* `props`: Propsit, jotka pääkomponentti on välittänyt.
6868

69-
* `ref`: The `ref` attribute passed by the parent component. The `ref` can be an object or a function. If the parent component has not passed a ref, it will be `null`. You should either pass the `ref` you receive to another component, or pass it to [`useImperativeHandle`.](/reference/react/useImperativeHandle)
69+
* `ref`: `ref` attribuutti, jonka pääkomponentti on välittänyt. `ref` voi olla joko objekti tai funktio. Jos pääkomponentti ei ole välittänyt ref:iä, se on `null`. Sinun tulisi joko välittää saamasi `ref` toiselle komponentille tai välittää se [`useImperativeHandle`:lle.](/reference/react/useImperativeHandle)
7070

71-
#### Returns {/*render-returns*/}
71+
#### Palautukset {/*render-returns*/}
7272

73-
`forwardRef` returns a React component that you can render in JSX. Unlike React components defined as plain functions, the component returned by `forwardRef` is able to take a `ref` prop.
73+
`forwardRef` palauttaa React komponentin, jonka voit renderöidä JSX:llä. Toisin kuin React komponentit, jotka on määritelty tavallisina funktioina, `forwardRef`:n palauttama komponentti voi myös vastaanottaa `ref` propin.
7474

7575
---
7676

77-
## Usage {/*usage*/}
77+
## Käyttö {/*usage*/}
7878

79-
### Exposing a DOM node to the parent component {/*exposing-a-dom-node-to-the-parent-component*/}
79+
### DOM noodin välittäminen pääkomponentille {/*exposing-a-dom-node-to-the-parent-component*/}
8080

81-
By default, each component's DOM nodes are private. However, sometimes it's useful to expose a DOM node to the parent--for example, to allow focusing it. To opt in, wrap your component definition into `forwardRef()`:
81+
Oletuksena jokaisen komponentin DOM noodit ovat yksityisiä. Joskus on kuitenkin hyödyllistä välittää DOM noodi pääkomponentille, esimerkiksi mahdollistaaksesi siihen kohdentamisen. Ottaaksesi tämän käyttöön, kääri komponenttisi `forwardRef()` -funktioon:
8282

8383
```js {3,11}
8484
import { forwardRef } from 'react';
@@ -94,7 +94,7 @@ const MyInput = forwardRef(function MyInput(props, ref) {
9494
});
9595
```
9696

97-
You will receive a <CodeStep step={1}>ref</CodeStep> as the second argument after props. Pass it to the DOM node that you want to expose:
97+
Saat <CodeStep step={1}>ref</CodeStep> -argumentin toisena argumenttina propsien jälkeen. Välitä se DOM noodiin, jonka haluat julkaista:
9898

9999
```js {8} [[1, 3, "ref"], [1, 8, "ref", 30]]
100100
import { forwardRef } from 'react';
@@ -110,7 +110,7 @@ const MyInput = forwardRef(function MyInput(props, ref) {
110110
});
111111
```
112112

113-
This lets the parent `Form` component access the <CodeStep step={2}>`<input>` DOM node</CodeStep> exposed by `MyInput`:
113+
Tämän avulla pääkomponentti `Form` voi käyttää `MyInput` komponentin julkaisemaa <CodeStep step={2}>`<input>` DOM noodia</CodeStep>:
114114

115115
```js [[1, 2, "ref"], [1, 10, "ref", 41], [2, 5, "ref.current"]]
116116
function Form() {
@@ -131,15 +131,15 @@ function Form() {
131131
}
132132
```
133133

134-
This `Form` component [passes a ref](/reference/react/useRef#manipulating-the-dom-with-a-ref) to `MyInput`. The `MyInput` component *forwards* that ref to the `<input>` browser tag. As a result, the `Form` component can access that `<input>` DOM node and call [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on it.
134+
`Form` komponentti [välittää ref:n](/reference/react/useRef#manipulating-the-dom-with-a-ref) `MyInput`:lle. `MyInput` komponentti *välittää* sen ref:n `<input>` selaimen tagille. Tämän seurauksena `Form` komponentti voi käyttää `<input>` DOM noodia ja kutsua [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) siihen.
135135

136-
Keep in mind that exposing a ref to the DOM node inside your component makes it harder to change your component's internals later. You will typically expose DOM nodes from reusable low-level components like buttons or text inputs, but you won't do it for application-level components like an avatar or a comment.
136+
Pidä mielessä, että ref:n julkaiseminen komponenttisi sisällä olevaan DOM noodin tekee sen vaikeammaksi muuttaa komponenttisi sisäistä rakennetta myöhemmin. Yleensä julkaiset DOM noodin ref:n uudelleen käytettävistä matalan tason komponenteista, kuten painikkeista tai tekstisyötteistä, mutta et tee sitä sovellustason komponenteille, kuten avatarille tai kommentille.
137137

138138
<Recipes title="Examples of forwarding a ref">
139139

140-
#### Focusing a text input {/*focusing-a-text-input*/}
140+
#### Syöttökenttään kohdistaminen {/*focusing-a-text-input*/}
141141

142-
Clicking the button will focus the input. The `Form` component defines a ref and passes it to the `MyInput` component. The `MyInput` component forwards that ref to the browser `<input>`. This lets the `Form` component focus the `<input>`.
142+
Painiketta painaminen kohdistaa syöttökenttään. `Form` komponentti määrittelee ref:n ja välittää sen `MyInput` komponentille. `MyInput` komponentti välittää sen ref:n selaimen `<input>` tagille. Tämän avulla `Form` komponentti voi kohdistaa `<input>`:in.
143143

144144
<Sandpack>
145145

@@ -191,9 +191,9 @@ input {
191191

192192
<Solution />
193193

194-
#### Playing and pausing a video {/*playing-and-pausing-a-video*/}
194+
#### Videon toistaminen ja tauottaminen {/*playing-and-pausing-a-video*/}
195195

196-
Clicking the button will call [`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) and [`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause) on a `<video>` DOM node. The `App` component defines a ref and passes it to the `MyVideoPlayer` component. The `MyVideoPlayer` component forwards that ref to the browser `<video>` node. This lets the `App` component play and pause the `<video>`.
196+
Painikkeen painaminen kutsuu `<video>` DOM noodin [`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) ja [`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause) metodeja. `App` komponentti määrittää ref:n ja välittää sen `MyVideoPlayer` komponentille. `MyVideoPlayer` komponentti välittää tuon ref:n selaimen `<video>` tagille. Tämän avulla `App` komponentti voi toistaa ja tauottaa `<video>`:n.
197197

198198
<Sandpack>
199199

@@ -206,10 +206,10 @@ export default function App() {
206206
return (
207207
<>
208208
<button onClick={() => ref.current.play()}>
209-
Play
209+
Toista
210210
</button>
211211
<button onClick={() => ref.current.pause()}>
212-
Pause
212+
Tauota
213213
</button>
214214
<br />
215215
<MyVideoPlayer
@@ -252,9 +252,9 @@ button { margin-bottom: 10px; margin-right: 10px; }
252252

253253
---
254254

255-
### Forwarding a ref through multiple components {/*forwarding-a-ref-through-multiple-components*/}
255+
### Refin välittäminen useiden komponenttien läpi {/*forwarding-a-ref-through-multiple-components*/}
256256

257-
Instead of forwarding a `ref` to a DOM node, you can forward it to your own component like `MyInput`:
257+
Sen sijaan, että välittäisit `ref`:n DOM noodille, voit välittää sen omalle komponentillesi kuten `MyInput`:
258258

259259
```js {1,5}
260260
const FormField = forwardRef(function FormField(props, ref) {
@@ -268,7 +268,7 @@ const FormField = forwardRef(function FormField(props, ref) {
268268
});
269269
```
270270

271-
If that `MyInput` component forwards a ref to its `<input>`, a ref to `FormField` will give you that `<input>`:
271+
Jos tämä `MyInput` komponentti välittää ref:n `<input>`:lle, ref `FormField`:lle antaa sinulle tuon `<input>`:in:
272272

273273
```js {2,5,10}
274274
function Form() {
@@ -289,7 +289,7 @@ function Form() {
289289
}
290290
```
291291

292-
The `Form` component defines a ref and passes it to `FormField`. The `FormField` component forwards that ref to `MyInput`, which forwards it to a browser `<input>` DOM node. This is how `Form` accesses that DOM node.
292+
`Form` komponentti määrittää refin ja välittää sen `FormField`:lle. `FormField` komponentti välittää tuon ref:n `MyInput`:lle, joka välittää sen selaimen `<input>` DOM noodille. Tämän avulla `Form` komponentti voi käsitellä tuota DOM noodia.
293293

294294

295295
<Sandpack>
@@ -367,9 +367,9 @@ input, button {
367367

368368
---
369369

370-
### Exposing an imperative handle instead of a DOM node {/*exposing-an-imperative-handle-instead-of-a-dom-node*/}
370+
### Imperatiivisen käsittelijän julkaiseminen DOM noden sijaan {/*exposing-an-imperative-handle-instead-of-a-dom-node*/}
371371

372-
Instead of exposing an entire DOM node, you can expose a custom object, called an *imperative handle,* with a more constrained set of methods. To do this, you'd need to define a separate ref to hold the DOM node:
372+
Sen sijaan, että julkistaisit koko DOM noodin, voit julkistaa räätälöidyn olion, jota kutsutaan *imperatiiviseksi käsittelijäksi*, jolla on suppeampi joukko metodeja. Tämän toteuttamiseksi, sinun täytyy määrittää erillinen ref, joka pitää sisällään DOM noodin:
373373

374374
```js {2,6}
375375
const MyInput = forwardRef(function MyInput(props, ref) {
@@ -381,7 +381,7 @@ const MyInput = forwardRef(function MyInput(props, ref) {
381381
});
382382
```
383383

384-
Pass the `ref` you received to [`useImperativeHandle`](/reference/react/useImperativeHandle) and specify the value you want to expose to the `ref`:
384+
Välitä vastaanottamasi `ref` [`useImperativeHandle`:lle](/reference/react/useImperativeHandle) ja määritä arvo, jonka haluat julkistaa `ref`:lle:
385385

386386
```js {6-15}
387387
import { forwardRef, useRef, useImperativeHandle } from 'react';
@@ -404,7 +404,7 @@ const MyInput = forwardRef(function MyInput(props, ref) {
404404
});
405405
```
406406

407-
If some component gets a ref to `MyInput`, it will only receive your `{ focus, scrollIntoView }` object instead of the DOM node. This lets you limit the information you expose about your DOM node to the minimum.
407+
Jos jokin komponentti saa refin `MyInput`:lle, saa se vain `{ focus, scrollIntoView }` olion koko DOM noodin sijaan. Tämän avulla voit rajoittaa DOM noodista julkistettavan informaation minimiin.
408408

409409
<Sandpack>
410410

@@ -417,7 +417,7 @@ export default function Form() {
417417

418418
function handleClick() {
419419
ref.current.focus();
420-
// This won't work because the DOM node isn't exposed:
420+
// Tämä ei toimi, koska DOM noodi ei ole julkistettu:
421421
// ref.current.style.opacity = 0.5;
422422
}
423423

@@ -463,25 +463,25 @@ input {
463463

464464
</Sandpack>
465465

466-
[Read more about using imperative handles.](/reference/react/useImperativeHandle)
466+
[Lue lisää imperatiivisista käsittelijöistä.](/reference/react/useImperativeHandle)
467467

468468
<Pitfall>
469469

470-
**Do not overuse refs.** You should only use refs for *imperative* behaviors that you can't express as props: for example, scrolling to a node, focusing a node, triggering an animation, selecting text, and so on.
470+
**Älä käytä ref:iä liikaa.** Sinun tulisi käyttää ref:iä vain *imperatiivisiin* toimintoihin, joita et voi ilmaista propseina: esimerkiksi nodeen vierittäminen, noden kohdistaminen, animaation käynnistäminen, tekstin valitseminen jne.
471471

472-
**If you can express something as a prop, you should not use a ref.** For example, instead of exposing an imperative handle like `{ open, close }` from a `Modal` component, it is better to take `isOpen` as a prop like `<Modal isOpen={isOpen} />`. [Effects](/learn/synchronizing-with-effects) can help you expose imperative behaviors via props.
472+
**Jos voit ilmaista jotain propseina, sinun ei tulisi käyttää ref:iä.** Esimerkiksi sen sijaan, että julkistaisit `Modal` komponentista *imperatiivisen käsittelijän* kuten `{ open, close }`, on parempi ottaa `isOpen` propsi kuten `<Modal isOpen={isOpen} />`. [Effectit](/learn/synchronizing-with-effects) voivat auttaa sinua julkistamaan imperatiivisia toimintoja propseina.
473473

474474
</Pitfall>
475475

476476
---
477477

478-
## Troubleshooting {/*troubleshooting*/}
478+
## Vianmääritys {/*troubleshooting*/}
479479

480-
### My component is wrapped in `forwardRef`, but the `ref` to it is always `null` {/*my-component-is-wrapped-in-forwardref-but-the-ref-to-it-is-always-null*/}
480+
### Komponenttini on kääritty `forwardRef`:iin, mutta `ref` siihen on aina `null` {/*my-component-is-wrapped-in-forwardref-but-the-ref-to-it-is-always-null*/}
481481

482-
This usually means that you forgot to actually use the `ref` that you received.
482+
Usein tämä tarkoittaa, että unohdit käyttää `ref`:iä, jonka sait.
483483

484-
For example, this component doesn't do anything with its `ref`:
484+
Esimerkiksi, tämä komponentti ei tee mitään sen `ref`:llä:
485485

486486
```js {1}
487487
const MyInput = forwardRef(function MyInput({ label }, ref) {
@@ -494,7 +494,7 @@ const MyInput = forwardRef(function MyInput({ label }, ref) {
494494
});
495495
```
496496

497-
To fix it, pass the `ref` down to a DOM node or another component that can accept a ref:
497+
Korjataksesi tämän, välitä `ref` DOM noodille tai toiselle komponentille, joka voi vastaanottaa ref:n:
498498

499499
```js {1,5}
500500
const MyInput = forwardRef(function MyInput({ label }, ref) {
@@ -507,7 +507,7 @@ const MyInput = forwardRef(function MyInput({ label }, ref) {
507507
});
508508
```
509509

510-
The `ref` to `MyInput` could also be `null` if some of the logic is conditional:
510+
`ref` `MyInput`:lle voi olla myös `null`, jos osa logiikasta on ehdollista:
511511

512512
```js {1,5}
513513
const MyInput = forwardRef(function MyInput({ label, showInput }, ref) {
@@ -520,7 +520,7 @@ const MyInput = forwardRef(function MyInput({ label, showInput }, ref) {
520520
});
521521
```
522522

523-
If `showInput` is `false`, then the ref won't be forwarded to any node, and a ref to `MyInput` will remain empty. This is particularly easy to miss if the condition is hidden inside another component, like `Panel` in this example:
523+
Jos `showInput` on `false`, ref:iä ei välitetä millekään nodille, ja ref `MyInput`:lle pysyy tyhjänä. Tämä on erityisen helppo jättää huomaamatta, jos ehto on piilotettu toisen komponentin sisälle, kuten `Panel` tässä esimerkissä:
524524

525525
```js {5,7}
526526
const MyInput = forwardRef(function MyInput({ label, showInput }, ref) {

0 commit comments

Comments
 (0)