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
@@ -39,7 +39,7 @@ An app fully built with React will usually only have one `createRoot` call for i
39
39
40
40
[See more examples below.](#usage)
41
41
42
-
#### Parameters {/*parameters*/}
42
+
#### Parametrit {/*parameters*/}
43
43
44
44
* `domNode`: A [DOM element.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React will create a root for this DOM element and allow you to call functions on the root, such as `render` to display rendered React content.
45
45
@@ -48,11 +48,11 @@ An app fully built with React will usually only have one `createRoot` call for i
48
48
* **optional** `onRecoverableError`: Callback called when React automatically recovers from errors.
49
49
* **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page.
50
50
51
-
#### Returns {/*returns*/}
51
+
#### Palautukset {/*returns*/}
52
52
53
53
`createRoot` returns an object with two methods: [`render`](#root-render) and [`unmount`.](#root-unmount)
54
54
55
-
#### Caveats {/*caveats*/}
55
+
#### Rajoitukset {/*caveats*/}
56
56
* If your app is server-rendered, using `createRoot()` is not supported. Use [`hydrateRoot()`](/reference/react-dom/client/hydrateRoot) instead.
57
57
* You'll likely have only one `createRoot` call in your app. If you use a framework, it might do this call for you.
58
58
* When you want to render a piece of JSX in a different part of the DOM tree that isn't a child of your component (for example, a modal or a tooltip), use [`createPortal`](/reference/react-dom/createPortal) instead of `createRoot`.
@@ -71,16 +71,16 @@ React will display `<App />` in the `root`, and take over managing the DOM insid
71
71
72
72
[See more examples below.](#usage)
73
73
74
-
#### Parameters {/*root-render-parameters*/}
74
+
#### Parametrit {/*root-render-parameters*/}
75
75
76
76
* `reactNode`: A *React node* that you want to display. This will usually be a piece of JSX like `<App />`, but you can also pass a React element constructed with [`createElement()`](/reference/react/createElement), a string, a number, `null`, or `undefined`.
77
77
78
78
79
-
#### Returns {/*root-render-returns*/}
79
+
#### Palautukset {/*root-render-returns*/}
80
80
81
81
`root.render` returns `undefined`.
82
82
83
-
#### Caveats {/*root-render-caveats*/}
83
+
#### Rajoitukset {/*root-render-caveats*/}
84
84
85
85
* The first time you call `root.render`, React will clear all the existing HTML content inside the React root before rendering the React component into it.
86
86
@@ -105,24 +105,24 @@ This is mostly useful if your React root's DOM node (or any of its ancestors) ma
105
105
Calling `root.unmount` will unmount all the components in the root and "detach" React from the root DOM node, including removing any event handlers or state in the tree.
106
106
107
107
108
-
#### Parameters {/*root-unmount-parameters*/}
108
+
#### Parametrit {/*root-unmount-parameters*/}
109
109
110
110
`root.unmount` does not accept any parameters.
111
111
112
112
113
-
#### Returns {/*root-unmount-returns*/}
113
+
#### Palautukset {/*root-unmount-returns*/}
114
114
115
115
`root.unmount` returns `undefined`.
116
116
117
-
#### Caveats {/*root-unmount-caveats*/}
117
+
#### Rajoitukset {/*root-unmount-caveats*/}
118
118
119
119
* Calling `root.unmount` will unmount all the components in the tree and "detach" React from the root DOM node.
120
120
121
121
* Once you call `root.unmount` you cannot call `root.render` again on the same root. Attempting to call `root.render` on an unmounted root will throw a "Cannot update an unmounted root" error. However, you can create a new root for the same DOM node after the previous root for that node has been unmounted.
122
122
123
123
---
124
124
125
-
## Usage {/*usage*/}
125
+
## Käyttö {/*usage*/}
126
126
127
127
### Rendering an app fully built with React {/*rendering-an-app-fully-built-with-react*/}
128
128
@@ -343,7 +343,7 @@ export default function App({counter}) {
343
343
It is uncommon to call `render` multiple times. Usually, your components will [update state](/reference/react/useState) instead.
344
344
345
345
---
346
-
## Troubleshooting {/*troubleshooting*/}
346
+
## Vianmääritys {/*troubleshooting*/}
347
347
348
348
### I've created a root, but nothing is displayed {/*ive-created-a-root-but-nothing-is-displayed*/}
@@ -33,7 +33,7 @@ React will attach to the HTML that exists inside the `domNode`, and take over ma
33
33
34
34
[See more examples below.](#usage)
35
35
36
-
#### Parameters {/*parameters*/}
36
+
#### Parametrit {/*parameters*/}
37
37
38
38
* `domNode`: A [DOM element](https://developer.mozilla.org/en-US/docs/Web/API/Element) that was rendered as the root element on the server.
39
39
@@ -45,11 +45,11 @@ React will attach to the HTML that exists inside the `domNode`, and take over ma
45
45
* **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as used on the server.
46
46
47
47
48
-
#### Returns {/*returns*/}
48
+
#### Palautukset {/*returns*/}
49
49
50
50
`hydrateRoot` returns an object with two methods: [`render`](#root-render) and [`unmount`.](#root-unmount)
51
51
52
-
#### Caveats {/*caveats*/}
52
+
#### Rajoitukset {/*caveats*/}
53
53
54
54
* `hydrateRoot()` expects the rendered content to be identical with the server-rendered content. You should treat mismatches as bugs and fix them.
55
55
* In development mode, React warns about mismatches during hydration. There are no guarantees that attribute differences will be patched up in case of mismatches. This is important for performance reasons because in most apps, mismatches are rare, and so validating all markup would be prohibitively expensive.
@@ -70,16 +70,16 @@ React will update `<App />` in the hydrated `root`.
70
70
71
71
[See more examples below.](#usage)
72
72
73
-
#### Parameters {/*root-render-parameters*/}
73
+
#### Parametrit {/*root-render-parameters*/}
74
74
75
75
* `reactNode`: A "React node" that you want to update. This will usually be a piece of JSX like `<App />`, but you can also pass a React element constructed with [`createElement()`](/reference/react/createElement), a string, a number, `null`, or `undefined`.
76
76
77
77
78
-
#### Returns {/*root-render-returns*/}
78
+
#### Palautukset {/*root-render-returns*/}
79
79
80
80
`root.render` returns `undefined`.
81
81
82
-
#### Caveats {/*root-render-caveats*/}
82
+
#### Rajoitukset {/*root-render-caveats*/}
83
83
84
84
* If you call `root.render` before the root has finished hydrating, React will clear the existing server-rendered HTML content and switch the entire root to client rendering.
85
85
@@ -100,24 +100,24 @@ This is mostly useful if your React root's DOM node (or any of its ancestors) ma
100
100
Calling `root.unmount` will unmount all the components in the root and "detach" React from the root DOM node, including removing any event handlers or state in the tree.
101
101
102
102
103
-
#### Parameters {/*root-unmount-parameters*/}
103
+
#### Parametrit {/*root-unmount-parameters*/}
104
104
105
105
`root.unmount` does not accept any parameters.
106
106
107
107
108
-
#### Returns {/*root-unmount-returns*/}
108
+
#### Palautukset {/*root-unmount-returns*/}
109
109
110
110
`root.unmount` returns `undefined`.
111
111
112
-
#### Caveats {/*root-unmount-caveats*/}
112
+
#### Rajoitukset {/*root-unmount-caveats*/}
113
113
114
114
* Calling `root.unmount` will unmount all the components in the tree and "detach" React from the root DOM node.
115
115
116
116
* Once you call `root.unmount` you cannot call `root.render` again on the root. Attempting to call `root.render` on an unmounted root will throw a "Cannot update an unmounted root" error.
117
117
118
118
---
119
119
120
-
## Usage {/*usage*/}
120
+
## Käyttö {/*usage*/}
121
121
122
122
### Hydrating server-rendered HTML {/*hydrating-server-rendered-html*/}
Copy file name to clipboardExpand all lines: src/content/reference/react-dom/components/common.md
+21-21Lines changed: 21 additions & 21 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,7 +12,7 @@ All built-in browser components, such as [`<div>`](https://developer.mozilla.org
12
12
13
13
---
14
14
15
-
## Reference {/*reference*/}
15
+
## Viite {/*reference*/}
16
16
17
17
### Common components (e.g. `<div>`) {/*common*/}
18
18
@@ -22,7 +22,7 @@ All built-in browser components, such as [`<div>`](https://developer.mozilla.org
22
22
23
23
[See more examples below.](#usage)
24
24
25
-
#### Props {/*common-props*/}
25
+
#### Propsit {/*common-props*/}
26
26
27
27
These special React props are supported for all built-in components:
28
28
@@ -234,7 +234,7 @@ These events fire for resources like [`<audio>`](https://developer.mozilla.org/e
234
234
*[`onWaiting`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/waiting_event): An [`Event` handler](#event-handler) function. Fires when the playback stopped due to temporary lack of data.
235
235
*`onWaitingCapture`: A version of `onWaiting` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
236
236
237
-
#### Caveats {/*common-caveats*/}
237
+
#### Rajoitukset {/*common-caveats*/}
238
238
239
239
- You cannot pass both `children` and `dangerouslySetInnerHTML` at the same time.
240
240
- Some events (like `onAbort` and `onLoad`) don't bubble in the browser, but bubble in React.
@@ -255,11 +255,11 @@ When the `<div>` DOM node is added to the screen, React will call your `ref` cal
255
255
256
256
React will also call your `ref` callback whenever you pass a *different*`ref` callback. In the above example, `(node) => { ... }` is a different function on every render. When your component re-renders, the *previous* function will be called with `null` as the argument, and the *next* function will be called with the DOM node.
257
257
258
-
#### Parameters {/*ref-callback-parameters*/}
258
+
#### Parametrit {/*ref-callback-parameters*/}
259
259
260
260
*`node`: A DOM node or `null`. React will pass you the DOM node when the ref gets attached, and `null` when the ref gets detached. Unless you pass the same function reference for the `ref` callback on every render, the callback will get temporarily detached and re-attached during every re-render of the component.
261
261
262
-
#### Returns {/*returns*/}
262
+
#### Palautukset {/*returns*/}
263
263
264
264
Do not return anything from the `ref` callback.
265
265
@@ -310,7 +310,7 @@ Additionally, React event objects provide these methods:
310
310
*`persist()`: Not used with React DOM. With React Native, call this to read event's properties after the event.
311
311
*`isPersistent()`: Not used with React DOM. With React Native, returns whether `persist` has been called.
312
312
313
-
#### Caveats {/*react-event-object-caveats*/}
313
+
#### Rajoitukset {/*react-event-object-caveats*/}
314
314
315
315
* The values of `currentTarget`, `eventPhase`, `target`, and `type` reflect the values your React code expects. Under the hood, React attaches event handlers at the root, but this is not reflected in React event objects. For example, `e.currentTarget` may not be the same as the underlying `e.nativeEvent.currentTarget`. For polyfilled events, `e.type` (React event type) may differ from `e.nativeEvent.type` (underlying type).
316
316
@@ -328,7 +328,7 @@ An event handler type for the [CSS animation](https://developer.mozilla.org/en-U
*`e`: A [React event object](#react-event-object) with these extra [`AnimationEvent`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent) properties:
*`e`: A [React event object](#react-event-object) with these extra [`ClipboardEvent`](https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent) properties:
355
355
@@ -369,7 +369,7 @@ An event handler type for the [input method editor (IME)](https://developer.mozi
*`e`: A [React event object](#react-event-object) with these extra [`CompositionEvent`](https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent) properties:
*`e`: A [React event object](#react-event-object) with these extra [`DragEvent`](https://developer.mozilla.org/en-US/docs/Web/API/DragEvent) properties:
*`e`: A [React event object](#react-event-object) with these extra [`FocusEvent`](https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent) properties:
*`e`: A [React event object](#react-event-object) with these extra [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent) properties:
*`e`: A [React event object](#react-event-object) with these extra [`KeyboardEvent`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) properties:
*`e`: A [React event object](#react-event-object) with these extra [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) properties:
*`e`: A [React event object](#react-event-object) with these extra [`PointerEvent`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) properties:
*`e`: A [React event object](#react-event-object) with these extra [`TouchEvent`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent) properties:
*`e`: A [React event object](#react-event-object) with these extra [`TransitionEvent`](https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent) properties:
*`e`: A [React event object](#react-event-object) with these extra [`WheelEvent`](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent) properties:
0 commit comments