Skip to content

Commit 78cb5a2

Browse files
committed
Translate Components
1 parent 6bd1219 commit 78cb5a2

File tree

8 files changed

+558
-549
lines changed

8 files changed

+558
-549
lines changed

GLOSSARY.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,3 +43,5 @@
4343
- **codebase**: koodipohja
4444
- **property**: en keksinyt järkevää suomennosta, property
4545
- **scope**: käyttöalue
46+
- **bubbles**: kuplii (bublling in JavaScript)
47+
- **capture**: nappaus (capture in JavaScript)

src/content/reference/react-dom/components/common.md

Lines changed: 210 additions & 210 deletions
Large diffs are not rendered by default.

src/content/reference/react-dom/components/index.md

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,40 @@
11
---
2-
title: "React DOM Components"
2+
title: "React DOM komponentit"
33
---
44

55
<Intro>
66

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.
88

99
</Intro>
1010

1111
---
1212

13-
## Common components {/*common-components*/}
13+
## Yleiset komponentit {/*common-components*/}
1414

15-
All of the built-in browser components support some props and events.
15+
Kaikki selaimen sisäänrakennetut komponentit tukevat joitain propseja ja tapahtumia.
1616

17-
* [Common components (e.g. `<div>`)](/reference/react-dom/components/common)
17+
* [Yleiset komponentit (kuten `<div>`)](/reference/react-dom/components/common)
1818

19-
This includes React-specific props like `ref` and `dangerouslySetInnerHTML`.
19+
Tämä sisältää myös Reactin omat propsit, kuten `ref` ja `dangerouslySetInnerHTML`.
2020

2121
---
2222

23-
## Form components {/*form-components*/}
23+
## Lomakekomponentit {/*form-components*/}
2424

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:
2626

2727
* [`<input>`](/reference/react-dom/components/input)
2828
* [`<select>`](/reference/react-dom/components/select)
2929
* [`<textarea>`](/reference/react-dom/components/textarea)
3030

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)*
3232

3333
---
3434

35-
## All HTML components {/*all-html-components*/}
35+
## Kaikki HTML komponentit {/*all-html-components*/}
3636

37-
React supports all built-in browser HTML components. This includes:
37+
React tukee kaikkia selaimen sisäänrakennettuja HTML komponentteja. Tämä sisältää:
3838

3939
* [`<aside>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside)
4040
* [`<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:
140140

141141
<Note>
142142

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)
144144

145145
</Note>
146146

147147
---
148148

149-
### Custom HTML elements {/*custom-html-elements*/}
149+
### Mukautetut HTML elementit {/*custom-html-elements*/}
150150

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:
152152

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.
155155

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ä.
157157

158158
<Note>
159159

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)
161161

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:
163163

164164
- `react@experimental`
165165
- `react-dom@experimental`
166166

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.
168168

169169
</Note>
170170
---
171171

172-
## All SVG components {/*all-svg-components*/}
172+
## Kaikki SVG komponentit {/*all-svg-components*/}
173173

174-
React supports all built-in browser SVG components. This includes:
174+
React tukee kaikkia selaimen sisäänrakennettuja SVG komponentteja. Tämä sisältää:
175175

176176
* [`<a>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a)
177177
* [`<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:
242242

243243
<Note>
244244

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`.
260260

261261
</Note>

0 commit comments

Comments
 (0)