|
1 | 1 | ---
|
2 |
| -title: "React DOM Components" |
| 2 | +title: "React DOM komponentit" |
3 | 3 | ---
|
4 | 4 |
|
5 | 5 | <Intro>
|
6 | 6 |
|
7 |
| -React supports all of the browser built-in [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) and [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Element) components. |
| 7 | +React tukee kaikkia selaimen sisäänrakennettuja [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) ja [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Element) komponentteja. |
8 | 8 |
|
9 | 9 | </Intro>
|
10 | 10 |
|
11 | 11 | ---
|
12 | 12 |
|
13 |
| -## Common components {/*common-components*/} |
| 13 | +## Yleiset komponentit {/*common-components*/} |
14 | 14 |
|
15 |
| -All of the built-in browser components support some props and events. |
| 15 | +Kaikki selaimen sisäänrakennetut komponentit tukevat joitain propseja ja tapahtumia. |
16 | 16 |
|
17 |
| -* [Common components (e.g. `<div>`)](/reference/react-dom/components/common) |
| 17 | +* [Yleiset komponentit (kuten `<div>`)](/reference/react-dom/components/common) |
18 | 18 |
|
19 |
| -This includes React-specific props like `ref` and `dangerouslySetInnerHTML`. |
| 19 | +Tämä sisältää myös Reactin omat propsit, kuten `ref` ja `dangerouslySetInnerHTML`. |
20 | 20 |
|
21 | 21 | ---
|
22 | 22 |
|
23 |
| -## Form components {/*form-components*/} |
| 23 | +## Lomakekomponentit {/*form-components*/} |
24 | 24 |
|
25 |
| -These built-in browser components accept user input: |
| 25 | +Nämä selaimen sisäänrakennetut komponentit hyväksyvät käyttäjän syötteen: |
26 | 26 |
|
27 | 27 | * [`<input>`](/reference/react-dom/components/input)
|
28 | 28 | * [`<select>`](/reference/react-dom/components/select)
|
29 | 29 | * [`<textarea>`](/reference/react-dom/components/textarea)
|
30 | 30 |
|
31 |
| -They are special in React because passing the `value` prop to them makes them *[controlled.](/reference/react-dom/components/input#controlling-an-input-with-a-state-variable)* |
| 31 | +Ne ovat erityisiä Reactissa, koska `value`-propsin antaminen niille tekee niistä *[kontrolloituja.](/reference/react-dom/components/input#controlling-an-input-with-a-state-variable)* |
32 | 32 |
|
33 | 33 | ---
|
34 | 34 |
|
35 |
| -## All HTML components {/*all-html-components*/} |
| 35 | +## Kaikki HTML komponentit {/*all-html-components*/} |
36 | 36 |
|
37 |
| -React supports all built-in browser HTML components. This includes: |
| 37 | +React tukee kaikkia selaimen sisäänrakennettuja HTML komponentteja. Tämä sisältää: |
38 | 38 |
|
39 | 39 | * [`<aside>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside)
|
40 | 40 | * [`<audio>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio)
|
@@ -140,38 +140,38 @@ React supports all built-in browser HTML components. This includes:
|
140 | 140 |
|
141 | 141 | <Note>
|
142 | 142 |
|
143 |
| -Similar to the [DOM standard,](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) React uses a `camelCase` convention for prop names. For example, you'll write `tabIndex` instead of `tabindex`. You can convert existing HTML to JSX with an [online converter.](https://transform.tools/html-to-jsx) |
| 143 | +Vastaavasti kuten [DOM standardissa,](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) React käyttää `camelCase`-konventiota propsien nimissä. Esimerkiksi, kirjoitat `tabIndex` sen sijaan, että kirjoittaisit `tabindex`. Voit muuntaa olemassaolevaa HTML:ää JSX:ksi [verkkokonvertterilla.](https://transform.tools/html-to-jsx) |
144 | 144 |
|
145 | 145 | </Note>
|
146 | 146 |
|
147 | 147 | ---
|
148 | 148 |
|
149 |
| -### Custom HTML elements {/*custom-html-elements*/} |
| 149 | +### Mukautetut HTML elementit {/*custom-html-elements*/} |
150 | 150 |
|
151 |
| -If you render a tag with a dash, like `<my-element>`, React will assume you want to render a [custom HTML element.](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) In React, rendering custom elements works differently from rendering built-in browser tags: |
| 151 | +Jos renderöit tagin, jossa on viiva, kuten `<my-element>`, React olettaa, että haluat renderöidä [mukautetun HTML elementin.](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) Reactissa, mukautetun elementin renderöinti toimii eri tavalla kuin selaimen sisäänrakennetun tagin renderöinti: |
152 | 152 |
|
153 |
| -- All custom element props are serialized to strings and are always set using attributes. |
154 |
| -- Custom elements accept `class` rather than `className`, and `for` rather than `htmlFor`. |
| 153 | +- Kaikki mukautetun elementin propsit serialisoidaan merkkijonoiksi ja asetetaan aina attribuutteina. |
| 154 | +- Mukautetut elementit hyväksyvät `class`-propsin sijaan `className`-propsin, ja `for`-propsin sijaan `htmlFor`-propsin. |
155 | 155 |
|
156 |
| -If you render a built-in browser HTML element with an [`is`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is) attribute, it will also be treated as a custom element. |
| 156 | +Jos renderöit selaimen sisäänrakennetun HTML elementin [`is`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is) attribuutilla, se käsitellään myös mukautettuna elementtinä. |
157 | 157 |
|
158 | 158 | <Note>
|
159 | 159 |
|
160 |
| -[A future version of React will include more comprehensive support for custom elements.](https://github.com/facebook/react/issues/11347#issuecomment-1122275286) |
| 160 | +[Tulevaisuuden versio Reactista sisältää kattavamman tuen mukautetuille elementeille.](https://github.com/facebook/react/issues/11347#issuecomment-1122275286) |
161 | 161 |
|
162 |
| -You can try it by upgrading React packages to the most recent experimental version: |
| 162 | +Voit kokeilla sitä päivittämällä React paketit uusimpaan kokeelliseen versioon: |
163 | 163 |
|
164 | 164 | - `react@experimental`
|
165 | 165 | - `react-dom@experimental`
|
166 | 166 |
|
167 |
| -Experimental versions of React may contain bugs. Don't use them in production. |
| 167 | +Kokeelliset versiot Reactista saattavat sisältää bugeja. Älä käytä niitä tuotannossa. |
168 | 168 |
|
169 | 169 | </Note>
|
170 | 170 | ---
|
171 | 171 |
|
172 |
| -## All SVG components {/*all-svg-components*/} |
| 172 | +## Kaikki SVG komponentit {/*all-svg-components*/} |
173 | 173 |
|
174 |
| -React supports all built-in browser SVG components. This includes: |
| 174 | +React tukee kaikkia selaimen sisäänrakennettuja SVG komponentteja. Tämä sisältää: |
175 | 175 |
|
176 | 176 | * [`<a>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a)
|
177 | 177 | * [`<animate>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate)
|
@@ -242,20 +242,20 @@ React supports all built-in browser SVG components. This includes:
|
242 | 242 |
|
243 | 243 | <Note>
|
244 | 244 |
|
245 |
| -Similar to the [DOM standard,](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) React uses a `camelCase` convention for prop names. For example, you'll write `tabIndex` instead of `tabindex`. You can convert existing SVG to JSX with an [online converter.](https://transform.tools/) |
246 |
| - |
247 |
| -Namespaced attributes also have to be written without the colon: |
248 |
| - |
249 |
| -* `xlink:actuate` becomes `xlinkActuate`. |
250 |
| -* `xlink:arcrole` becomes `xlinkArcrole`. |
251 |
| -* `xlink:href` becomes `xlinkHref`. |
252 |
| -* `xlink:role` becomes `xlinkRole`. |
253 |
| -* `xlink:show` becomes `xlinkShow`. |
254 |
| -* `xlink:title` becomes `xlinkTitle`. |
255 |
| -* `xlink:type` becomes `xlinkType`. |
256 |
| -* `xml:base` becomes `xmlBase`. |
257 |
| -* `xml:lang` becomes `xmlLang`. |
258 |
| -* `xml:space` becomes `xmlSpace`. |
259 |
| -* `xmlns:xlink` becomes `xmlnsXlink`. |
| 245 | +Vastaaavasti kuten [DOM standardissa,](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) React käyttää `camelCase`-konventiota propsien nimissä. Esimerkiksi, kirjoitat `tabIndex` sen sijaan, että kirjoittaisit `tabindex`. Voit muuntaa olemassaolevaa SVG:ää JSX:ksi [verkkokonvertterilla.](https://transform.tools/) |
| 246 | + |
| 247 | +Attribuutit nimitilalla täytyy myös kirjoittaa ilman kaksoispistettä: |
| 248 | + |
| 249 | +* `xlink:actuate` tulee `xlinkActuate`. |
| 250 | +* `xlink:arcrole` tulee `xlinkArcrole`. |
| 251 | +* `xlink:href` tulee `xlinkHref`. |
| 252 | +* `xlink:role` tulee `xlinkRole`. |
| 253 | +* `xlink:show` tulee `xlinkShow`. |
| 254 | +* `xlink:title` tulee `xlinkTitle`. |
| 255 | +* `xlink:type` tulee `xlinkType`. |
| 256 | +* `xml:base` tulee `xmlBase`. |
| 257 | +* `xml:lang` tulee `xmlLang`. |
| 258 | +* `xml:space` tulee `xmlSpace`. |
| 259 | +* `xmlns:xlink` tulee `xmlnsXlink`. |
260 | 260 |
|
261 | 261 | </Note>
|
0 commit comments