8000 Merge pull request #55 from reactjs/sync-4f9e9a56 · reactjs/lo.react.dev@61ed0f8 · GitHub
[go: up one dir, main page]

Skip to content

Commit 61ed0f8

Browse files
authored
Merge pull request #55 from reactjs/sync-4f9e9a56
Sync with react.dev @ 4f9e9a5
2 parents 3912250 + 49e7704 commit 61ed0f8

File tree

4 files changed

+10
-47
lines changed

4 files changed

+10
-47
lines changed

src/content/learn/conditional-rendering.md

-4
Origina 10000 l file line numberDiff line numberDiff line change
@@ -626,11 +626,7 @@ export default function PackingList() {
626626
627627
ສັງເກດທ່ານຕ້ອງຂຽນ `importance > 0 && ...` ແທນທີ່ຈະເປັນ `importance && ...` ສະນັ້ນຫາກ `importance` ເປັນ `0`, ຜົນລັບຈະບໍ່ສະແດງ `0`!
628628
629-
<<<<<<< HEAD
630629
ໃນວິທີການນີ້, ຈະໃຊ້ເງື່ອນໄຂສອງເງື່ອນໄຂແຍກກັນເພື່ອໃສ່ຊ່ອງວ່າງລະຫວ່າງຊື່ ແລະ label. ອີກວິທີໜຶ່ງ, ທ່ານສາມາດໃຊ້ fragment ທີ່ມີຊ່ອງວ່າງນຳໜ້າ: `importance > 0 && <> <i>...</i></>` ຫຼື ເພີ່ມຊ່ອງວ່າງພາຍໃນ `importance > 0 && <> <i>...</i></>`.
631-
=======
632-
In this solution, two separate conditions are used to insert a space between the name and the importance label. Alternatively, you could use a Fragment with a leading space: `importance > 0 && <> <i>...</i></>` or add a space immediately inside the `<i>`: `importance > 0 && <i> ...</i>`.
633-
>>>>>>> 3563d95efe8719bdae8bbd258e6ab4134753348b
634630
635631
</Solution>
636632

src/content/learn/rendering-lists.md

+3-16
Original file line numberDiff line numberDiff line change
@@ -1086,11 +1086,8 @@ export const recipes = [{
10861086

10871087
#### ລາຍການທີ່ມີໂຕຂັ້ນ {/*list-with-a-separator*/}
10881088

1089-
<<<<<<< HEAD
10901089
ຕົວຢ່າງນີ້ສະແດງ haiku ທີ່ມີຊື່ສຽງໂດຍ Katsushika Hokusai, ໂດຍແຕ່ລະແຖວຈະຢູ່ໃນແທັກ `<p>`. ວຽກຂອງທ່ານແມ່ນຕ້ອງເພີ່ມໂຕຂັ້ນ `<hr />` ລະຫວ່າງແຕ່ລະຫຍໍ້ໜ້າ. ໂຄ່ງສ້າງຜົນລັບຂອງທ່ານຄວນມີລັກສະນະນີ້:
1091-
=======
1092-
This example renders a famous haiku by Tachibana Hokushi, with each line wrapped in a `<p>` tag. Your job is to insert an `<hr />` separator between each paragraph. Your resulting structure should look like this:
1093-
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
1090+
10941091

10951092
```js
10961093
<article>
@@ -1149,11 +1146,8 @@ hr {
11491146

11501147
<Hint>
11511148

1152-
<<<<<<< HEAD
11531149
ທ່ານຈະຕ້ອງແປງ `map` ເປັນ loop ດ້ວຍໂຕເອງ, ຫຼື ໃຊ້ fragment.
1154-
=======
1155-
You'll either need to convert `map` to a manual loop, or use a Fragment.
1156-
>>>>>>> 3563d95efe8719bdae8bbd258e6ab4134753348b
1150+
11571151

11581152
</Hint>
11591153

@@ -1216,11 +1210,7 @@ hr {
12161210

12171211
ການໃຊ້ index ແຖວເກົ່າເປັນ `key` ບໍ່ເຮັດວຽກອີກຕໍ່ໄປເພາະວ່າແຕ່ລະໂຕຂັ້ນ ແລະ ຫຍໍ້ໜ້າແຕ່ລະໂຕຢູ່ໃນ array ດຽວກັນ. ເຖິງຢ່າງໃດກໍຕາມ, ທ່ານສາມາດກຳນົດ key ທີ່ແຕກຕ່າງກັນໃຫ້ແຕ່ລະລາຍການໄດ້ໂດຍໃຊ້ຄຳຕໍ່ທ້າຍເຊັ່ນ `key={i + '-text'}`.
12181212

1219-
<<<<<<< HEAD
12201213
ອີກວິທີໜຶ່ງ, ທ່ານສາມາດສະແດງຜົນ collection ຂອງ fragment ທີ່ປະກອບມີ `<hr />` and `<p>...</p>`. ເຖິງຢ່າງໃດກໍຕາມ, syntax `<>...</>` ບໍ່ຮອງຮັບການສົ່ງຜ່ານ key, ດັ່ງນັ້ນທ່ານຕ້ອງໄດ້ຂຽນ `<Fragment>` ຢ່າງຊັດເຈນ:
1221-
=======
1222-
Alternatively, you could render a collection of Fragments which contain `<hr />` and `<p>...</p>`. However, the `<>...</>` shorthand syntax doesn't support passing keys, so you'd have to write `<Fragment>` explicitly:
1223-
>>>>>>> 3563d95efe8719bdae8bbd258e6ab4134753348b
12241214

12251215
<Sandpack>
12261216

@@ -1266,11 +1256,8 @@ hr {
12661256

12671257
</Sandpack>
12681258

1269-
<<<<<<< HEAD
12701259
ຈື່ໄວ້ວ່າ, fragment (ມັກຂຽນເປັນ `<> </>`) ໃຫ້ທ່ານ group JSX node ໂດຍບໍ່ຕ້ອງເພີ່ມ `<div>`!
1271-
=======
1272-
Remember, Fragments (often written as `<> </>`) let you group JSX nodes without adding extra `<div>`s!
1273-
>>>>>>> 3563d95efe8719bdae8bbd258e6ab4134753348b
1260+
12741261

12751262
</Solution>
12761263

src/content/learn/tutorial-tic-tac-toe.md

+5-26
Original file line numberDiff line numberDiff line change
@@ -337,11 +337,8 @@ import './styles.css';
337337
import App from './App';
338338
```
339339

340-
<<<<<<< HEAD
341340
ແຖວທີ 1-5 ແມ່ນລວມສ່ວນທີ່ຈຳເປັນມາລວມກັນ:
342-
=======
343-
Lines 1-5 bring all the necessary pieces together:
344-
>>>>>>> 3563d95efe8719bdae8bbd258e6ab4134753348b
341+
345342

346343
* React
347344
* Library React ເພື່ອສື່ສານກັບເວັບບາວເຊີ (React DOM)
@@ -370,11 +367,7 @@ export default function Square() {
370367

371368
</ConsoleBlock>
372369

373-
<<<<<<< HEAD
374370
Component React ຕ້ອງການ return ໜຶ່ງ JSX element ແລະ ບໍ່ສາມາດສົ່ງ JSX ທີ່ຕິດພັນຫຼາຍອັນເຊັ່ນ ສອງປຸ່ມກົດ. ເພື່ອແກ້ໄຂບັນຫານີ້ທ່ານສາມາດໃຊ້ *fragments* (`<>` ແລະ `</>`) ເພື່ອລວມ JSX ທີ່ຕິດພັນຫຼາຍອັນດັ່ງນີ້:
375-
=======
376-
React components need to return a single JSX element and not multiple adjacent JSX elements like two buttons. To fix this you can use *Fragments* (`<>` and `</>`) to wrap multiple adjacent JSX elements like this:
377-
>>>>>>> 3563d95efe8719bdae8bbd258e6ab4134753348b
378371

379372
```js {3-6}
380373
export default function Square() {
@@ -1182,11 +1175,8 @@ Too many re-renders. React limits the number of renders to prevent an infinite l
11821175
11831176
ເມື່ອທ່ານຜ່ານ `onSquareClick={handleClick}`, ທ່ານກຳລັງສົ່ງຟັງຊັ່ນ `handleClick` ລົງເປັນ prop. ທ່ານບໍ່ໄດ້ເອີ້ນໃຊ້ມັນ! ແຕ່ຕອນນີ້ທ່ານກຳລັງ *ເອີ້ນໃຊ້* ຟັງຊັ່ນນັ້ນທັນທີ--ສັງເກດວົງເລັບໃນ `handleClick(0)` --ແລະ ນັ້ນແມ່ນສາເຫດທີ່ມັນເຮັດວຽກໄວເກີນໄປ. ທ່ານບໍ່ *ຕ້ອງການ* ເອີ້ນ `handleClick` ຈົນກວ່າຜູ້ໃຊ້ຈະຄິກ!
11841177
1185-
<<<<<<< HEAD
11861178
ທ່ານສາມາດແກ້ໄຂໂດຍການສ້າງຟັງຊັ່ນເຊັ່ນ `handleFirstSquareClick` ທີ່ເອີ້ນ `handleClick(0)`, ຟັງຊັ່ນເຊັ່ນ `handleSeconSquareClick` ທີ່ເອີ້ນ `handleClick(1)` ແລະ ອື່ນໆ. ທ່ານຈະສົ່ງຜ່ານ (ແທນທີ່ຈະເອີ້ນໃຊ້) ຟັງຊັ່ນເຫຼົ່ານີ້ລົງມາເປັນ prop ເຊັ່ນ `onSquareClick={handleFirstSquareClick}`. ນີ້ຈະແກ້ໄຂບັນຫາການ loop ທີ່ບໍ່ສິ້ນສຸດ.
1187-
=======
1188-
You could fix this by creating a function like `handleFirstSquareClick` that calls `handleClick(0)`, a function like `handleSecondSquareClick` that calls `handleClick(1)`, and so on. You would pass (rather than call) these functions down as props like `onSquareClick={handleFirstSquareClick}`. This would solve the infinite loop.
1189-
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
1179+
11901180
11911181
ເຖິງຢ່າງໃດກໍຕາມ, ການກຳນົດຟັງຊັ່ນທີ່ແຕກຕ່າງກັນ 9 ຟັງຊັ່ນ ແລະ ຕັ້ງຊື່ໃຫ້ກັບແຕ່ລະຟັງຊັ່ນນັ້ນມີລາຍລະອຽດຫຼາຍເກີນໄປ, ລອງເຮັດແບບນີ້ແທນ:
11921182
@@ -2088,17 +2078,7 @@ export default function Game() {
20882078
}
20892079
```
20902080
2091-
<<<<<<< HEAD
20922081
ທ່ານສາມາດເບິ່ງໄດ້ວ່າ code ຂອງທ່ານຄວນເປັນແນວໃດໃນດ້ານລຸ່ມນີ້. ສັງເກດວ່າທ່ານຄວນເຫັນຂໍ້ຜິດພາດໃນ console developer tools ທີ່ບອກວ່າ: ``Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Game`.`` ທ່ານຈະແປງຂໍ້ຜິດພາດນີ້ໃນຫົວຂໍ້ຕໍ່ໄປ.
2093-
=======
2094-
You can see what your code should look like below. Note that you should see an error in the developer tools console that says:
2095-
2096-
<ConsoleBlock level="warning">
2097-
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of &#96;Game&#96;.
2098-
</ConsoleBlock>
2099-
2100-
You'll fix this error in the next section.
2101-
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
21022082
21032083
<Sandpack>
21042084
@@ -2291,11 +2271,10 @@ body {
22912271
<li>Alexa: 5 tasks left</li>
22922272
```
22932273
2294-
<<<<<<< HEAD
22952274
ນອກເໜືອຈາກການອັບເດດ count ແລ້ວ, ການອ່ານໂດຍມະນຸດອາດບອກວ່າທ່ານສະຫຼັບຄຳສັ່ງຂອງ Alexa ແລະ Ben ແລະ ເພີ່ມ Claudia ລະຫວ່າງ Alexa ແລະ Ben. ເຖິງຢ່າງໃດກໍຕາມ, React ເປັນໂປຣແກຣມຄອມພິວເຕີ ແລະ ບໍ່ສາມາດຮູ້ວ່າທ່ານຕ້ອງການຫຍັງ, ດັ່ງນັ້ນທ່ານຕ້ອງໄດ້ລະບຸ _key_ property ສຳລັບແຕ່ລະລາຍການໃນລາຍການເພື່ອແຍກຄວາມແຕກຕ່າງລະຫວ່າງແຕ່ລະລາຍການຂອງກັນ ແລະ ກັນ. ຖ້່າຂໍ້ມູນຂອງທ່ານມາຈາກຖານຂໍ້ມູນ, ID ຖານຂໍ້ມູນ Alexa, Ben ແລະ Claudia ສາມາດໃຊ້ເປັນ key ໄດ້.
2296-
=======
2297-
In addition to the updated counts, a human reading this would probably say that you swapped Alexa and Ben's ordering and inserted Claudia between Alexa and Ben. However, React is a computer program and does not know what you intended, so you need to specify a _key_ property for each list item to differentiate each list item from its siblings. If your data was from a database, Alexa, Ben, and Claudia's database IDs could be used as keys.
2298-
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
2275+
2276+
2277+
22992278
23002279
```js {1}
23012280
<li key={user.id}>

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@ To display an input, render the [built-in browser `<input>`](https://developer.m
3434

3535
<Canary>
3636

37-
React's extensions to the `formAction` prop are currently only available in React's Canary and experimental channels. In stable releases of React, `formAction` works only as a [built-in browser HTML component](/reference/react-dom/components#all-html-components). Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
37+
38+
React's extensions to the `formAction` prop are currently only available in React's Canary and experimental channels. In stable releases of React `formAction` works only as a [built-in browser HTML component](https://react.dev/reference/react-dom/components#all-html-components). Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
3839

3940
</Canary>
4041

0 commit comments

Comments
 (0)
0