From c0cbab6728faa958614856dda0907e2cd98d523c Mon Sep 17 00:00:00 2001 From: ilham89 Date: Thu, 1 Jun 2023 15:02:14 +0700 Subject: [PATCH 1/7] docs: translation legalcy APIs > children > pitfall opening --- src/content/reference/react/Children.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/Children.md b/src/content/reference/react/Children.md index 3683cb7cca..38994d4695 100644 --- a/src/content/reference/react/Children.md +++ b/src/content/reference/react/Children.md @@ -4,7 +4,7 @@ title: Children -Using `Children` is uncommon and can lead to fragile code. [See common alternatives.](#alternatives) +Menggunakan `Children` jarang terjadi dan dapat menyebabkan kode rapuh. [Lihat alternatif yang umum.](#alternatives) From 8c3ed60550cff991c18bf5fdb1b21455e51f5e70 Mon Sep 17 00:00:00 2001 From: Chris Qiang Date: Sat, 26 Aug 2023 21:12:05 +0700 Subject: [PATCH 2/7] feat: translate children page (WIP) Current translated line: 682 --- src/content/reference/react/Children.md | 237 ++++++++++++------------ 1 file changed, 118 insertions(+), 119 deletions(-) diff --git a/src/content/reference/react/Children.md b/src/content/reference/react/Children.md index 38994d4695..b1f26c68b6 100644 --- a/src/content/reference/react/Children.md +++ b/src/content/reference/react/Children.md @@ -4,13 +4,13 @@ title: Children -Menggunakan `Children` jarang terjadi dan dapat menyebabkan kode rapuh. [Lihat alternatif yang umum.](#alternatives) +Menggunakan `Children` tidaklah umum dan dapat menyebabkan kode yang mudah rusak. [Lihat alternatif umum.](#alternatives) -`Children` lets you manipulate and transform the JSX you received as the [`children` prop.](/learn/passing-props-to-a-component#passing-jsx-as-children) +`Children` memungkinkan Anda memanipulasi dan mengubah JSX yang Anda terima sebagai [prop `children`.](/learn/passing-props-to-a-component#passing-jsx-as-children) ```js const mappedChildren = Children.map(children, child => @@ -27,11 +27,11 @@ const mappedChildren = Children.map(children, child => --- -## Reference {/*reference*/} +## Referensi {/*reference*/} ### `Children.count(children)` {/*children-count*/} -Call `Children.count(children)` to count the number of children in the `children` data structure. +Panggil `Children.count(children)` untuk menghitung jumlah anak dalam struktur data `children`. ```js RowList.js active import { Children } from 'react'; @@ -39,32 +39,32 @@ import { Children } from 'react'; function RowList({ children }) { return ( <> -

Total rows: {Children.count(children)}

+

Jumlah baris: {Children.count(children)}

... ); } ``` -[See more examples below.](#counting-children) +[Lihat contoh lainnya di bawah ini.](#counting-children) -#### Parameters {/*children-count-parameters*/} +#### Parameter {/*children-count-parameters*/} -* `children`: The value of the [`children` prop](/learn/passing-props-to-a-component#passing-jsx-as-children) received by your component. +* `children`: Nilai dari [prop `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) yang diterima oleh komponen Anda. -#### Returns {/*children-count-returns*/} +#### Kembalian {/*children-count-returns*/} -The number of nodes inside these `children`. +Jumlah simpul dalam `children` ini. -#### Caveats {/*children-count-caveats*/} +#### Catatan Penting {/*children-count-caveats*/} -- Empty nodes (`null`, `undefined`, and Booleans), strings, numbers, and [React elements](/reference/react/createElement) count as individual nodes. Arrays don't count as individual nodes, but their children do. **The traversal does not go deeper than React elements:** they don't get rendered, and their children aren't traversed. [Fragments](/reference/react/Fragment) don't get traversed. +- Simpul kosong (`null`, `undefined`, dan *Boolean*), *string*, angka, dan [elemen React](/reference/react/createElement) dihitung sebagai simpul individu. Larik tidak dihitung sebagai simpul individu, tetapi anak-anaknya dihitung sebagai simpul individu. **Penjelajahan tidak masuk lebih dalam dari elemen React:** mereka tidak di-render, dan anak-anaknya tidak dijelajahi. [Fragmen](/reference/react/Fragment) tidak dijelajahi. --- ### `Children.forEach(children, fn, thisArg?)` {/*children-foreach*/} -Call `Children.forEach(children, fn, thisArg?)` to run some code for each child in the `children` data structure. +Panggil `Children.forEach(children, fn, thisArg?)` untuk menjalankan beberapa kode untuk setiap anak dalam struktur data `children`. ```js RowList.js active import { Children } from 'react'; @@ -78,27 +78,27 @@ function SeparatorList({ children }) { // ... ``` -[See more examples below.](#running-some-code-for-each-child) +[Lihat contoh lainnya di bawah ini.](#running-some-code-for-each-child) -#### Parameters {/*children-foreach-parameters*/} +#### Parameter {/*children-foreach-parameters*/} -* `children`: The value of the [`children` prop](/learn/passing-props-to-a-component#passing-jsx-as-children) received by your component. -* `fn`: The function you want to run for each child, similar to the [array `forEach` method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) callback. It will be called with the child as the first argument and its index as the second argument. The index starts at `0` and increments on each call. -* **optional** `thisArg`: The [`this` value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) with which the `fn` function should be called. If omitted, it's `undefined`. +* `children`: Nilai dari [prop `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) yang diterima oleh komponen Anda. +* `fn`: Fungsi yang ingin Anda jalankan untuk setiap anak, serupa dengan metode *callback* dari [larik `forEach`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach). Fungsi ini akan dipanggil dengan anak sebagai argumen pertama dan indeksnya sebagai argumen kedua. Indeks dimulai dari `0` dan bertambah pada setiap pemanggilan. +* **opsional** `thisArg`: Nilai [`this`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) yang digunakan untuk memanggil fungsi `fn`. Jika diabaikan, maka akan menjadi `undefined`. -#### Returns {/*children-foreach-returns*/} +#### Kembalian {/*children-foreach-returns*/} -`Children.forEach` returns `undefined`. +`Children.forEach` mengembalikan `undefined`. -#### Caveats {/*children-foreach-caveats*/} +#### Catatan Penting {/*children-foreach-caveats*/} -- Empty nodes (`null`, `undefined`, and Booleans), strings, numbers, and [React elements](/reference/react/createElement) count as individual nodes. Arrays don't count as individual nodes, but their children do. **The traversal does not go deeper than React elements:** they don't get rendered, and their children aren't traversed. [Fragments](/reference/react/Fragment) don't get traversed. +- Simpul kosong (`null`, `undefined`, dan *Boolean*), *string*, angka, dan [elemen React](/reference/react/createElement) dihitung sebagai simpul individual. Larik tidak dihitung sebagai simpul individu, tetapi anak-anaknya dihitung sebagai simpul individu. **Penjelajahan tidak masuk lebih dalam dari elemen React:** mereka tidak di-*render*, dan anak-anaknya tidak dijelajahi. [Fragmen](/reference/react/Fragment) tidak dijelajahi. --- ### `Children.map(children, fn, thisArg?)` {/*children-map*/} -Call `Children.map(children, fn, thisArg?)` to map or transform each child in the `children` data structure. +Panggil `Children.map(children, fn, thisArg?)` untuk memetakan atau mentransformasi setiap anak dalam struktur data `children`. ```js RowList.js active import { Children } from 'react'; @@ -116,32 +116,32 @@ function RowList({ children }) { } ``` -[See more examples below.](#transforming-children) +[Lihat contoh lainnya di bawah ini.](#transforming-children) -#### Parameters {/*children-map-parameters*/} +#### Parameter {/*children-map-parameters*/} -* `children`: The value of the [`children` prop](/learn/passing-props-to-a-component#passing-jsx-as-children) received by your component. -* `fn`: The mapping function, similar to the [array `map` method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) callback. It will be called with the child as the first argument and its index as the second argument. The index starts at `0` and increments on each call. You need to return a React node from this function. This may be an empty node (`null`, `undefined`, or a Boolean), a string, a number, a React element, or an array of other React nodes. -* **optional** `thisArg`: The [`this` value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) with which the `fn` function should be called. If omitted, it's `undefined`. +* `children`: Nilai dari [prop `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) yang diterima oleh komponen Anda. +* `fn`: Fungsi pemetaan, mirip dengan metode *callback* dari [larik `map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Fungsi ini akan dipanggil dengan anak sebagai argumen pertama dan indeksnya sebagai argumen kedua. Indeks dimulai dari `0` dan bertambah pada setiap pemanggilan. Anda harus mengembalikan sebuah simpul React dari fungsi ini. Node ini dapat berupa node kosong (`null`, `undefined`, atau *Boolean*), *string*, angka, elemen React, atau larik simpul React lainnya. +* **opsional** `thisArg`: Nilai [`this`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) yang digunakan untuk memanggil fungsi `fn`. Jika diabaikan, maka akan menjadi `undefined`. -#### Returns {/*children-map-returns*/} +#### Kembalian {/*children-map-returns*/} -If `children` is `null` or `undefined`, returns the same value. +Jika `children` adalah `null` atau `undefined`, akan mengembalikan nilai yang sama. -Otherwise, returns a flat array consisting of the nodes you've returned from the `fn` function. The returned array will contain all nodes you returned except for `null` and `undefined`. +Jika tidak, kembalikan larik *flat* yang terdiri dari simpul yang Anda kembalikan dari fungsi `fn`. Larik yang dikembalikan akan berisi semua simpul yang Anda kembalikan kecuali `null` dan `undefined`. -#### Caveats {/*children-map-caveats*/} +#### Catatan Penting {/*children-map-caveats*/} -- Empty nodes (`null`, `undefined`, and Booleans), strings, numbers, and [React elements](/reference/react/createElement) count as individual nodes. Arrays don't count as individual nodes, but their children do. **The traversal does not go deeper than React elements:** they don't get rendered, and their children aren't traversed. [Fragments](/reference/react/Fragment) don't get traversed. +- Simpul kosong (`null`, `undefined`, dan *Boolean*), *string*, angka, dan [elemen React](/reference/react/createElement) dihitung sebagai simpul individual. Larik tidak dihitung sebagai simpul individu, tetapi anak-anaknya dihitung sebagai simpul individu. **Penjelajahan tidak masuk lebih dalam dari elemen React:** mereka tidak di-*render*, dan anak-anaknya tidak dijelajahi. [Fragmen](/reference/react/Fragment) tidak dijelajahi. -- If you return an element or an array of elements with keys from `fn`, **the returned elements' keys will be automatically combined with the key of the corresponding original item from `children`.** When you return multiple elements from `fn` in an array, their keys only need to be unique locally amongst each other. +- Jika Anda mengembalikan sebuah elemen atau larik elemen dengan kunci dari `fn`, **kunci elemen yang dikembalikan akan secara otomatis digabungkan dengan kunci item asli yang sesuai dari `children`.** Jika Anda mengembalikan beberapa elemen dari `fn` dalam sebuah larik, kuncinya hanya perlu unik secara lokal satu sama lain. --- ### `Children.only(children)` {/*children-only*/} -Call `Children.only(children)` to assert that `children` represent a single React element. +Panggil `Children.only(children)` untuk menyatakan bahwa `children` merepresentasikan satu elemen React. ```js function Box({ children }) { @@ -149,25 +149,25 @@ function Box({ children }) { // ... ``` -#### Parameters {/*children-only-parameters*/} +#### Parameter {/*children-only-parameters*/} -* `children`: The value of the [`children` prop](/learn/passing-props-to-a-component#passing-jsx-as-children) received by your component. +* `children`: Nilai dari [prop `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) yang diterima oleh komponen Anda. -#### Returns {/*children-only-returns*/} +#### Kembalian {/*children-only-returns*/} -If `children` [is a valid element,](/reference/react/isValidElement) returns that element. +Jika `children` [adalah elemen yang valid,](/reference/react/isValidElement) kembalikan elemen tersebut. -Otherwise, throws an error. +Jika tidak, akan lemparkan sebuah *error*. -#### Caveats {/*children-only-caveats*/} +#### Catatan Penting {/*children-only-caveats*/} -- This method always **throws if you pass an array (such as the return value of `Children.map`) as `children`.** In other words, it enforces that `children` is a single React element, not that it's an array with a single element. +- Metode ini selalu **melempar jika Anda mengoper sebuah array (seperti nilai kembalian dari `Children.map`) sebagai `children`.** Dengan kata lain, metode ini memaksakan bahwa `children` adalah sebuah elemen React, bukan sebuah array dengan satu elemen. --- ### `Children.toArray(children)` {/*children-toarray*/} -Call `Children.toArray(children)` to create an array out of the `children` data structure. +Panggil `Children.toArray(children)` untuk membuat larik dari struktur data `children`. ```js ReversedList.js active import { Children } from 'react'; @@ -178,25 +178,25 @@ export default function ReversedList({ children }) { // ... ``` -#### Parameters {/*children-toarray-parameters*/} +#### Parameter {/*children-toarray-parameters*/} -* `children`: The value of the [`children` prop](/learn/passing-props-to-a-component#passing-jsx-as-children) received by your component. +* `children`: Nilai dari [prop `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) yang diterima oleh komponen Anda. -#### Returns {/*children-toarray-returns*/} +#### Kembalian {/*children-toarray-returns*/} -Returns a flat array of elements in `children`. +Mengembalikan larik yang *flat* dari elemen dalam `children`. -#### Caveats {/*children-toarray-caveats*/} +#### Catatan Penting {/*children-toarray-caveats*/} -- Empty nodes (`null`, `undefined`, and Booleans) will be omitted in the returned array. **The returned elements' keys will be calculated from the original elements' keys and their level of nesting and position.** This ensures that flattening the array does not introduce changes in behavior. +- Simpul kosong (`null`, `undefined`, dan *Boolean*) akan dihilangkan dalam larik yang dikembalikan. **Kunci elemen yang dikembalikan akan dihitung dari kunci elemen asli dan tingkat persarangan serta posisinya.** Hal ini memastikan bahwa pe-*flatten*-an larik tidak mengakibatkan perubahan perilaku. --- -## Usage {/*usage*/} +## Penggunaan {/*usage*/} -### Transforming children {/*transforming-children*/} +### Mentransformasikan anak-anak {/*transforming-children*/} -To transform the children JSX that your component [receives as the `children` prop,](/learn/passing-props-to-a-component#passing-jsx-as-children) call `Children.map`: +Untuk mentransformasi anak-anak JSX yang diterima komponen Anda [sebagai prop `children`,](/learn/passing-props-to-a-component#passing-jsx-as-children) panggil `Children.map`: ```js {6,10} import { Children } from 'react'; @@ -214,33 +214,33 @@ function RowList({ children }) { } ``` -In the example above, the `RowList` wraps every child it receives into a `
` container. For example, let's say the parent component passes three `

` tags as the `children` prop to `RowList`: +Pada contoh di atas, `RowList` membungkus setiap anak yang diterimanya ke dalam wadah `

`. Sebagai contoh, anggaplah komponen induk meneruskan tiga tag `

` sebagai props `children` ke `RowList`: ```js -

This is the first item.

-

This is the second item.

-

This is the third item.

+

Ini adalah item pertama.

+

Ini adalah item kedua

+

Ini adalah item ketiga.

``` -Then, with the `RowList` implementation above, the final rendered result will look like this: +Kemudian, dengan implementasi `RowList` di atas, hasil akhir yang di-*render* akan terlihat seperti ini: ```js
-

This is the first item.

+

Ini adalah item pertama.

-

This is the second item.

+

Ini adalah item kedua

-

This is the third item.

+

Ini adalah item ketiga.

``` -`Children.map` is similar to [to transforming arrays with `map()`.](/learn/rendering-lists) The difference is that the `children` data structure is considered *opaque.* This means that even if it's sometimes an array, you should not assume it's an array or any other particular data type. This is why you should use `Children.map` if you need to transform it. +`Children.map` mirip dengan [mentransformasi array dengan `map()`.](/learn/rendering-lists) Perbedaannya adalah bahwa struktur data `children` dianggap sebagai *buram*. Artinya, meskipun terkadang `children` berupa array, Anda tidak boleh mengasumsikannya sebagai array atau tipe data tertentu lainnya. Inilah sebabnya mengapa Anda harus menggunakan `Children.map` jika Anda perlu melakukan transformasi. @@ -250,9 +250,9 @@ import RowList from './RowList.js'; export default function App() { return ( -

This is the first item.

-

This is the second item.

-

This is the third item.

+

Ini adalah item pertama.

+

Ini adalah item kedua

+

Ini adalah item ketiga.

); } @@ -293,24 +293,24 @@ export default function RowList({ children }) { -#### Why is the children prop not always an array? {/*why-is-the-children-prop-not-always-an-array*/} +#### Mengapa prop *children* tidak selalu berupa larik? {/*why-is-the-children-prop-not-always-an-array*/} -In React, the `children` prop is considered an *opaque* data structure. This means that you shouldn't rely on how it is structured. To transform, filter, or count children, you should use the `Children` methods. +Dalam React, prop `children` dianggap sebagai struktur data *buram*. Artinya, Anda tidak boleh bergantung pada cara penytrukturannya. Untuk mengubah, memfilter, atau menghitung anak, Anda harus menggunakan metode-metode `Children`. -In practice, the `children` data structure is often represented as an array internally. However, if there is only a single child, then React won't create an extra array since this would lead to unnecessary memory overhead. As long as you use the `Children` methods instead of directly introspecting the `children` prop, your code will not break even if React changes how the data structure is actually implemented. +Pada praktiknya, struktur data `children` sering kali direpresentasikan sebagai sebuah larik secara internal. Namun, jika hanya ada satu child, maka React tidak akan membuat larik tambahan karena hal ini akan menyebabkan overhead memori yang tidak diperlukan. Selama Anda menggunakan metode `Children` dan tidak secara langsung mengintrospeksi prop `children`, kode Anda tidak akan rusak meskipun React mengganti bagaimana struktur datanya diimplementasikan. -Even when `children` is an array, `Children.map` has useful special behavior. For example, `Children.map` combines the [keys](/learn/rendering-lists#keeping-list-items-in-order-with-key) on the returned elements with the keys on the `children` you've passed to it. This ensures the original JSX children don't "lose" keys even if they get wrapped like in the example above. +Bahkan saat `children` berupa sebuah larik, `Children.map` memiliki perilaku khusus yang membantu. Sebagai contoh, `Children.map` menggabungkan [beberapa *key*](/learn/rendering-lists#keeping-list-items-in-order-with-key) pada elemen yang dikembalikan dengan kunci pada `children` yang telah Anda berikan padanya. Hal ini memastikan anak JSX asli tidak "kehilangan" kunci meskipun dibungkus seperti pada contoh di atas. -The `children` data structure **does not include rendered output** of the components you pass as JSX. In the example below, the `children` received by the `RowList` only contains two items rather than three: +Struktur data `children` **tidak termasuk output yang di-*render*** dari komponen yang Anda berikan sebagai JSX. Pada contoh di bawah ini, `children` yang diterima oleh `RowList` hanya berisi dua item, bukan tiga: -1. `

This is the first item.

` +1. `

Ini adalah item pertama.

` 2. `` -This is why only two row wrappers are generated in this example: +Inilah alasan mengapa hanya dua pembungkus baris yang dihasilkan dalam contoh ini: @@ -320,7 +320,7 @@ import RowList from './RowList.js'; export default function App() { return ( -

This is the first item.

+

Ini adalah item pertama.

); @@ -329,8 +329,8 @@ export default function App() { function MoreRows() { return ( <> -

This is the second item.

-

This is the third item.

+

Ini adalah item kedua

+

Ini adalah item ketiga.

); } @@ -369,15 +369,15 @@ export default function RowList({ children }) {
-**There is no way to get the rendered output of an inner component** like `` when manipulating `children`. This is why [it's usually better to use one of the alternative solutions.](#alternatives) +**Tidak ada cara untuk mendapatkan keluaran yang di-*render* dari komponen dalam,** seperti `` saat memanipulasi `children`. Inilah mengapa [biasanya lebih baik menggunakan salah satu solusi alternatif.](#alternatives)
--- -### Running some code for each child {/*running-some-code-for-each-child*/} +### Menjalankan beberapa kode untuk setiap anak {/*running-some-code-for-each-child*/} -Call `Children.forEach` to iterate over each child in the `children` data structure. It does not return any value and is similar to the [array `forEach` method.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) You can use it to run custom logic like constructing your own array. +Panggil `Children.forEach` untuk mengulang setiap anak dalam struktur data `children`. Metode ini tidak mengembalikan nilai apa pun dan mirip dengan metode [larik `forEach`.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) Anda dapat menggunakannya untuk menjalankan logika khusus seperti membuat larik Anda sendiri. @@ -387,9 +387,9 @@ import SeparatorList from './SeparatorList.js'; export default function App() { return ( -

This is the first item.

-

This is the second item.

-

This is the third item.

+

Ini adalah item pertama.

+

Ini adalah item kedua

+

Ini adalah item ketiga.

); } @@ -404,7 +404,7 @@ export default function SeparatorList({ children }) { result.push(child); result.push(
); }); - result.pop(); // Remove the last separator + result.pop(); // Hapus *separator* terakhir return result; } ``` @@ -413,15 +413,15 @@ export default function SeparatorList({ children }) { -As mentioned earlier, there is no way to get the rendered output of an inner component when manipulating `children`. This is why [it's usually better to use one of the alternative solutions.](#alternatives) +Seperti yang telah disebutkan sebelumnya, tidak ada cara untuk mendapatkan hasil render dari komponen dalam ketika memanipulasi `children`. Inilah sebabnya mengapa [biasanya lebih baik menggunakan salah satu solusi alternatif.](#alternatives) --- -### Counting children {/*counting-children*/} +### Menghitung anak-anak {/*counting-children*/} -Call `Children.count(children)` to calculate the number of children. +Panggil `Children.count(children)` untuk menghitung jumlah anak. @@ -431,9 +431,9 @@ import RowList from './RowList.js'; export default function App() { return ( -

This is the first item.

-

This is the second item.

-

This is the third item.

+

Ini adalah item pertama.

+

Ini adalah item kedua

+

Ini adalah item ketiga.

); } @@ -446,7 +446,7 @@ export default function RowList({ children }) { return (

- Total rows: {Children.count(children)} + Jumlah baris: {Children.count(children)}

{Children.map(children, child =>
@@ -484,15 +484,15 @@ export default function RowList({ children }) { -As mentioned earlier, there is no way to get the rendered output of an inner component when manipulating `children`. This is why [it's usually better to use one of the alternative solutions.](#alternatives) +Seperti yang telah disebutkan sebelumnya, tidak ada cara untuk mendapatkan hasil render dari komponen dalam ketika memanipulasi `children`. Inilah sebabnya mengapa [biasanya lebih baik menggunakan salah satu solusi alternatif.](#alternatives) --- -### Converting children to an array {/*converting-children-to-an-array*/} +### Mengonversi anak menjadi larik {/*converting-children-to-an-array*/} -Call `Children.toArray(children)` to turn the `children` data structure into a regular JavaScript array. This lets you manipulate the array with built-in array methods like [`filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), [`sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort), or [`reverse`.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) +Panggil `Children.toArray(children)` untuk mengubah struktur data `children` menjadi larik JavaScript biasa. Hal ini memungkinkan Anda memanipulasi larik dengan metode larik bawaan seperti [`filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), [`sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort), atau [`reverse`.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) @@ -502,9 +502,9 @@ import ReversedList from './ReversedList.js'; export default function App() { return ( -

This is the first item.

-

This is the second item.

-

This is the third item.

+

Ini adalah item pertama.

+

Ini adalah item kedua

+

Ini adalah item ketiga.

); } @@ -524,31 +524,31 @@ export default function ReversedList({ children }) { -As mentioned earlier, there is no way to get the rendered output of an inner component when manipulating `children`. This is why [it's usually better to use one of the alternative solutions.](#alternatives) +Seperti yang telah disebutkan sebelumnya, tidak ada cara untuk mendapatkan hasil render dari komponen dalam ketika memanipulasi `children`. Inilah sebabnya mengapa [biasanya lebih baik menggunakan salah satu solusi alternatif.](#alternatives) --- -## Alternatives {/*alternatives*/} +## Alternatif {/*alternatives*/} -This section describes alternatives to the `Children` API (with capital `C`) that's imported like this: +Bagian ini menjelaskan alternatif untuk API `Children` (dengan huruf kapital `C`) yang diimpor seperti berikut ini: ```js import { Children } from 'react'; ``` -Don't confuse it with [using the `children` prop](/learn/passing-props-to-a-component#passing-jsx-as-children) (lowercase `c`), which is good and encouraged. +Jangan tertukar dengan [penggunaan prop `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) (huruf kecil `c`), yang merupakan hal yang baik dan dianjurkan. -### Exposing multiple components {/*exposing-multiple-components*/} +### Mengekspos beberapa komponen {/*exposing-multiple-components*/} -Manipulating children with the `Children` methods often leads to fragile code. When you pass children to a component in JSX, you don't usually expect the component to manipulate or transform the individual children. +Memanipulasi anak dengan metode `Children` sering kali menghasilkan kode yang mudah rusak. Ketika Anda mengoper *children* ke sebuah komponen di JSX, biasanya Anda tidak mengharapkan komponen tersebut untuk memanipulasi atau mengubah masing-masing *children*. -When you can, try to avoid using the `Children` methods. For example, if you want every child of `RowList` to be wrapped in `
`, export a `Row` component, and manually wrap every row into it like this: +Jika memungkinkan, hindari penggunaan metode `Children`. Misalnya, jika Anda ingin setiap anak dari `RowList` dibungkus dengan `
`, ekspor komponen `Row`, dan secara manual membungkus setiap baris ke dalamnya seperti ini: @@ -559,13 +559,13 @@ export default function App() { return ( -

This is the first item.

+

Ini adalah item pertama.

-

This is the second item.

+

Ini adalah item kedua

-

This is the third item.

+

Ini adalah item ketiga.

); @@ -607,7 +607,7 @@ export function Row({ children }) {
-Unlike using `Children.map`, this approach does not wrap every child automatically. **However, this approach has a significant benefit compared to the [earlier example with `Children.map`](#transforming-children) because it works even if you keep extracting more components.** For example, it still works if you extract your own `MoreRows` component: +Tidak seperti menggunakan `Children.map`, pendekatan ini tidak membungkus setiap anak secara otomatis. **Namun, pendekatan ini memiliki manfaat yang signifikan dibandingkan dengan [contoh sebelumnya dengan `Children.map`](#transforming-children) karena pendekatan ini tetap bekerja meskipun Anda terus mengekstrak lebih banyak komponen, sebagai contoh, pendekatan ini tetap bekerja jika Anda mengekstrak komponen `MoreRows` Anda sendiri: @@ -618,7 +618,7 @@ export default function App() { return ( -

This is the first item.

+

Ini adalah item pertama.

@@ -629,10 +629,10 @@ function MoreRows() { return ( <> -

This is the second item.

+

Ini adalah item kedua

-

This is the third item.

+

Ini adalah item ketiga.

); @@ -674,13 +674,12 @@ export function Row({ children }) {
-This wouldn't work with `Children.map` because it would "see" `` as a single child (and a single row). - +Hal ini tidak akan bekerja dengan `Children.map` karena fungsi tersebut akan "melihat" `` sebagai satu anak (dan satu baris). --- -### Accepting an array of objects as a prop {/*accepting-an-array-of-objects-as-a-prop*/} +### Menerima larik objek sebagai *prop* {/*accepting-an-array-of-objects-as-a-prop*/} -You can also explicitly pass an array as a prop. For example, this `RowList` accepts a `rows` array as a prop: +Anda juga bisa secara eksplisit mengoper larik sebagai prop. Sebagai contoh, `RowList` ini menerima larik `baris` sebagai prop: @@ -690,9 +689,9 @@ import { RowList, Row } from './RowList.js'; export default function App() { return ( This is the first item.

}, - { id: 'second', content:

This is the second item.

}, - { id: 'third', content:

This is the third item.

} + { id: 'first', content:

Ini adalah item pertama.

}, + { id: 'second', content:

Ini adalah item kedua

}, + { id: 'third', content:

Ini adalah item ketiga.

} ]} /> ); } @@ -744,17 +743,17 @@ export default function App() { { id: 'first', header: 'First', - content:

This is the first item.

+ content:

Ini adalah item pertama.

}, { id: 'second', header: 'Second', - content:

This is the second item.

+ content:

Ini adalah item kedua

}, { id: 'third', header: 'Third', - content:

This is the third item.

+ content:

Ini adalah item ketiga.

} ]} /> ); @@ -876,7 +875,7 @@ export function RowList({ rowIds, renderRow }) { return (

- Total rows: {rowIds.length} + Jumlah baris: {rowIds.length}

{rowIds.map((rowId, index) => From f84ec1c68402759cf8b634245f88fa769fb4a1b3 Mon Sep 17 00:00:00 2001 From: Chris Qiang Date: Sun, 27 Aug 2023 04:38:31 +0700 Subject: [PATCH 3/7] =?UTF-8?q?fix:=20item=20=E2=86=92=20butir?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/reference/react/Children.md | 68 ++++++++++++------------- 1 file changed, 34 insertions(+), 34 deletions(-) diff --git a/src/content/reference/react/Children.md b/src/content/reference/react/Children.md index b1f26c68b6..c81f01a470 100644 --- a/src/content/reference/react/Children.md +++ b/src/content/reference/react/Children.md @@ -218,9 +218,9 @@ Pada contoh di atas, `RowList` membungkus setiap anak yang diterimanya ke dalam ```js -

Ini adalah item pertama.

-

Ini adalah item kedua

-

Ini adalah item ketiga.

+

Ini adalah butir pertama.

+

Ini adalah butir kedua

+

Ini adalah butir ketiga.

``` @@ -229,13 +229,13 @@ Kemudian, dengan implementasi `RowList` di atas, hasil akhir yang di-*render* ak ```js
-

Ini adalah item pertama.

+

Ini adalah butir pertama.

-

Ini adalah item kedua

+

Ini adalah butir kedua

-

Ini adalah item ketiga.

+

Ini adalah butir ketiga.

``` @@ -250,9 +250,9 @@ import RowList from './RowList.js'; export default function App() { return ( -

Ini adalah item pertama.

-

Ini adalah item kedua

-

Ini adalah item ketiga.

+

Ini adalah butir pertama.

+

Ini adalah butir kedua

+

Ini adalah butir ketiga.

); } @@ -307,7 +307,7 @@ Bahkan saat `children` berupa sebuah larik, `Children.map` memiliki perilaku khu Struktur data `children` **tidak termasuk output yang di-*render*** dari komponen yang Anda berikan sebagai JSX. Pada contoh di bawah ini, `children` yang diterima oleh `RowList` hanya berisi dua item, bukan tiga: -1. `

Ini adalah item pertama.

` +1. `

Ini adalah butir pertama.

` 2. `` Inilah alasan mengapa hanya dua pembungkus baris yang dihasilkan dalam contoh ini: @@ -320,7 +320,7 @@ import RowList from './RowList.js'; export default function App() { return ( -

Ini adalah item pertama.

+

Ini adalah butir pertama.

); @@ -329,8 +329,8 @@ export default function App() { function MoreRows() { return ( <> -

Ini adalah item kedua

-

Ini adalah item ketiga.

+

Ini adalah butir kedua

+

Ini adalah butir ketiga.

); } @@ -387,9 +387,9 @@ import SeparatorList from './SeparatorList.js'; export default function App() { return ( -

Ini adalah item pertama.

-

Ini adalah item kedua

-

Ini adalah item ketiga.

+

Ini adalah butir pertama.

+

Ini adalah butir kedua

+

Ini adalah butir ketiga.

); } @@ -431,9 +431,9 @@ import RowList from './RowList.js'; export default function App() { return ( -

Ini adalah item pertama.

-

Ini adalah item kedua

-

Ini adalah item ketiga.

+

Ini adalah butir pertama.

+

Ini adalah butir kedua

+

Ini adalah butir ketiga.

); } @@ -502,9 +502,9 @@ import ReversedList from './ReversedList.js'; export default function App() { return ( -

Ini adalah item pertama.

-

Ini adalah item kedua

-

Ini adalah item ketiga.

+

Ini adalah butir pertama.

+

Ini adalah butir kedua

+

Ini adalah butir ketiga.

); } @@ -559,13 +559,13 @@ export default function App() { return ( -

Ini adalah item pertama.

+

Ini adalah butir pertama.

-

Ini adalah item kedua

+

Ini adalah butir kedua

-

Ini adalah item ketiga.

+

Ini adalah butir ketiga.

); @@ -618,7 +618,7 @@ export default function App() { return ( -

Ini adalah item pertama.

+

Ini adalah butir pertama.

@@ -629,10 +629,10 @@ function MoreRows() { return ( <> -

Ini adalah item kedua

+

Ini adalah butir kedua

-

Ini adalah item ketiga.

+

Ini adalah butir ketiga.

); @@ -689,9 +689,9 @@ import { RowList, Row } from './RowList.js'; export default function App() { return ( Ini adalah item pertama.

}, - { id: 'second', content:

Ini adalah item kedua

}, - { id: 'third', content:

Ini adalah item ketiga.

} + { id: 'first', content:

Ini adalah butir pertama.

}, + { id: 'second', content:

Ini adalah butir kedua

}, + { id: 'third', content:

Ini adalah butir ketiga.

} ]} /> ); } @@ -743,17 +743,17 @@ export default function App() { { id: 'first', header: 'First', - content:

Ini adalah item pertama.

+ content:

Ini adalah butir pertama.

}, { id: 'second', header: 'Second', - content:

Ini adalah item kedua

+ content:

Ini adalah butir kedua

}, { id: 'third', header: 'Third', - content:

Ini adalah item ketiga.

+ content:

Ini adalah butir ketiga.

} ]} /> ); From 786b8778ddbe529e5f86fd56a8fa566c9e27013d Mon Sep 17 00:00:00 2001 From: Chris Qiang Date: Sun, 27 Aug 2023 04:54:43 +0700 Subject: [PATCH 4/7] fix: finishing up the reset of the translation of Children --- src/content/reference/react/Children.md | 70 ++++++++++++------------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/src/content/reference/react/Children.md b/src/content/reference/react/Children.md index c81f01a470..4257dc3c31 100644 --- a/src/content/reference/react/Children.md +++ b/src/content/reference/react/Children.md @@ -10,7 +10,7 @@ Menggunakan `Children` tidaklah umum dan dapat menyebabkan kode yang mudah rusak -`Children` memungkinkan Anda memanipulasi dan mengubah JSX yang Anda terima sebagai [prop `children`.](/learn/passing-props-to-a-component#passing-jsx-as-children) +`Children` memungkinkan Anda memanipulasi dan mengubah JSX yang Anda terima sebagai [*prop* `children`.](/learn/passing-props-to-a-component#passing-jsx-as-children) ```js const mappedChildren = Children.map(children, child => @@ -50,7 +50,7 @@ function RowList({ children }) { #### Parameter {/*children-count-parameters*/} -* `children`: Nilai dari [prop `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) yang diterima oleh komponen Anda. +* `children`: Nilai dari [*prop* `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) yang diterima oleh komponen Anda. #### Kembalian {/*children-count-returns*/} @@ -58,7 +58,7 @@ Jumlah simpul dalam `children` ini. #### Catatan Penting {/*children-count-caveats*/} -- Simpul kosong (`null`, `undefined`, dan *Boolean*), *string*, angka, dan [elemen React](/reference/react/createElement) dihitung sebagai simpul individu. Larik tidak dihitung sebagai simpul individu, tetapi anak-anaknya dihitung sebagai simpul individu. **Penjelajahan tidak masuk lebih dalam dari elemen React:** mereka tidak di-render, dan anak-anaknya tidak dijelajahi. [Fragmen](/reference/react/Fragment) tidak dijelajahi. +- Simpul kosong (`null`, `undefined`, dan *Boolean*), *string*, angka, dan [elemen React](/reference/react/createElement) dihitung sebagai simpul individu. Larik tidak dihitung sebagai simpul individu, tetapi anak-anaknya dihitung sebagai simpul individu. **Penjelajahan tidak masuk lebih dalam dari elemen React:** mereka tidak di-*render*, dan anak-anaknya tidak dijelajahi. [Fragmen](/reference/react/Fragment) tidak dijelajahi. --- @@ -82,7 +82,7 @@ function SeparatorList({ children }) { #### Parameter {/*children-foreach-parameters*/} -* `children`: Nilai dari [prop `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) yang diterima oleh komponen Anda. +* `children`: Nilai dari [*prop* `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) yang diterima oleh komponen Anda. * `fn`: Fungsi yang ingin Anda jalankan untuk setiap anak, serupa dengan metode *callback* dari [larik `forEach`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach). Fungsi ini akan dipanggil dengan anak sebagai argumen pertama dan indeksnya sebagai argumen kedua. Indeks dimulai dari `0` dan bertambah pada setiap pemanggilan. * **opsional** `thisArg`: Nilai [`this`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) yang digunakan untuk memanggil fungsi `fn`. Jika diabaikan, maka akan menjadi `undefined`. @@ -120,7 +120,7 @@ function RowList({ children }) { #### Parameter {/*children-map-parameters*/} -* `children`: Nilai dari [prop `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) yang diterima oleh komponen Anda. +* `children`: Nilai dari [*prop* `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) yang diterima oleh komponen Anda. * `fn`: Fungsi pemetaan, mirip dengan metode *callback* dari [larik `map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Fungsi ini akan dipanggil dengan anak sebagai argumen pertama dan indeksnya sebagai argumen kedua. Indeks dimulai dari `0` dan bertambah pada setiap pemanggilan. Anda harus mengembalikan sebuah simpul React dari fungsi ini. Node ini dapat berupa node kosong (`null`, `undefined`, atau *Boolean*), *string*, angka, elemen React, atau larik simpul React lainnya. * **opsional** `thisArg`: Nilai [`this`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) yang digunakan untuk memanggil fungsi `fn`. Jika diabaikan, maka akan menjadi `undefined`. @@ -151,7 +151,7 @@ function Box({ children }) { #### Parameter {/*children-only-parameters*/} -* `children`: Nilai dari [prop `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) yang diterima oleh komponen Anda. +* `children`: Nilai dari [*prop* `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) yang diterima oleh komponen Anda. #### Kembalian {/*children-only-returns*/} @@ -180,7 +180,7 @@ export default function ReversedList({ children }) { #### Parameter {/*children-toarray-parameters*/} -* `children`: Nilai dari [prop `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) yang diterima oleh komponen Anda. +* `children`: Nilai dari [*prop* `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) yang diterima oleh komponen Anda. #### Kembalian {/*children-toarray-returns*/} @@ -196,7 +196,7 @@ Mengembalikan larik yang *flat* dari elemen dalam `children`. ### Mentransformasikan anak-anak {/*transforming-children*/} -Untuk mentransformasi anak-anak JSX yang diterima komponen Anda [sebagai prop `children`,](/learn/passing-props-to-a-component#passing-jsx-as-children) panggil `Children.map`: +Untuk mentransformasi anak-anak JSX yang diterima komponen Anda [sebagai *prop* `children`,](/learn/passing-props-to-a-component#passing-jsx-as-children) panggil `Children.map`: ```js {6,10} import { Children } from 'react'; @@ -214,7 +214,7 @@ function RowList({ children }) { } ``` -Pada contoh di atas, `RowList` membungkus setiap anak yang diterimanya ke dalam wadah `
`. Sebagai contoh, anggaplah komponen induk meneruskan tiga tag `

` sebagai props `children` ke `RowList`: +Pada contoh di atas, `RowList` membungkus setiap anak yang diterimanya ke dalam wadah `

`. Sebagai contoh, anggaplah komponen induk meneruskan tiga tag `

` sebagai *props* `children` ke `RowList`: ```js @@ -293,11 +293,11 @@ export default function RowList({ children }) { -#### Mengapa prop *children* tidak selalu berupa larik? {/*why-is-the-children-prop-not-always-an-array*/} +#### Mengapa *prop* *children* tidak selalu berupa larik? {/*why-is-the-children-prop-not-always-an-array*/} -Dalam React, prop `children` dianggap sebagai struktur data *buram*. Artinya, Anda tidak boleh bergantung pada cara penytrukturannya. Untuk mengubah, memfilter, atau menghitung anak, Anda harus menggunakan metode-metode `Children`. +Dalam React, *prop* `children` dianggap sebagai struktur data *buram*. Artinya, Anda tidak boleh bergantung pada cara penytrukturannya. Untuk mengubah, memfilter, atau menghitung anak, Anda harus menggunakan metode-metode `Children`. -Pada praktiknya, struktur data `children` sering kali direpresentasikan sebagai sebuah larik secara internal. Namun, jika hanya ada satu child, maka React tidak akan membuat larik tambahan karena hal ini akan menyebabkan overhead memori yang tidak diperlukan. Selama Anda menggunakan metode `Children` dan tidak secara langsung mengintrospeksi prop `children`, kode Anda tidak akan rusak meskipun React mengganti bagaimana struktur datanya diimplementasikan. +Pada praktiknya, struktur data `children` sering kali direpresentasikan sebagai sebuah larik secara internal. Namun, jika hanya ada satu child, maka React tidak akan membuat larik tambahan karena hal ini akan menyebabkan overhead memori yang tidak diperlukan. Selama Anda menggunakan metode `Children` dan tidak secara langsung mengintrospeksi *prop* `children`, kode Anda tidak akan rusak meskipun React mengganti bagaimana struktur datanya diimplementasikan. Bahkan saat `children` berupa sebuah larik, `Children.map` memiliki perilaku khusus yang membantu. Sebagai contoh, `Children.map` menggabungkan [beberapa *key*](/learn/rendering-lists#keeping-list-items-in-order-with-key) pada elemen yang dikembalikan dengan kunci pada `children` yang telah Anda berikan padanya. Hal ini memastikan anak JSX asli tidak "kehilangan" kunci meskipun dibungkus seperti pada contoh di atas. @@ -413,7 +413,7 @@ export default function SeparatorList({ children }) { -Seperti yang telah disebutkan sebelumnya, tidak ada cara untuk mendapatkan hasil render dari komponen dalam ketika memanipulasi `children`. Inilah sebabnya mengapa [biasanya lebih baik menggunakan salah satu solusi alternatif.](#alternatives) +Seperti yang telah disebutkan sebelumnya, tidak ada cara untuk mendapatkan hasil *render* dari komponen dalam ketika memanipulasi `children`. Inilah sebabnya mengapa [biasanya lebih baik menggunakan salah satu solusi alternatif.](#alternatives) @@ -484,7 +484,7 @@ export default function RowList({ children }) { -Seperti yang telah disebutkan sebelumnya, tidak ada cara untuk mendapatkan hasil render dari komponen dalam ketika memanipulasi `children`. Inilah sebabnya mengapa [biasanya lebih baik menggunakan salah satu solusi alternatif.](#alternatives) +Seperti yang telah disebutkan sebelumnya, tidak ada cara untuk mendapatkan hasil *render* dari komponen dalam ketika memanipulasi `children`. Inilah sebabnya mengapa [biasanya lebih baik menggunakan salah satu solusi alternatif.](#alternatives) @@ -524,7 +524,7 @@ export default function ReversedList({ children }) { -Seperti yang telah disebutkan sebelumnya, tidak ada cara untuk mendapatkan hasil render dari komponen dalam ketika memanipulasi `children`. Inilah sebabnya mengapa [biasanya lebih baik menggunakan salah satu solusi alternatif.](#alternatives) +Seperti yang telah disebutkan sebelumnya, tidak ada cara untuk mendapatkan hasil *render* dari komponen dalam ketika memanipulasi `children`. Inilah sebabnya mengapa [biasanya lebih baik menggunakan salah satu solusi alternatif.](#alternatives) @@ -540,7 +540,7 @@ Bagian ini menjelaskan alternatif untuk API `Children` (dengan huruf kapital `C` import { Children } from 'react'; ``` -Jangan tertukar dengan [penggunaan prop `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) (huruf kecil `c`), yang merupakan hal yang baik dan dianjurkan. +Jangan tertukar dengan [penggunaan *prop* `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) (huruf kecil `c`), yang merupakan hal yang baik dan dianjurkan. @@ -679,7 +679,7 @@ Hal ini tidak akan bekerja dengan `Children.map` karena fungsi tersebut akan "me ### Menerima larik objek sebagai *prop* {/*accepting-an-array-of-objects-as-a-prop*/} -Anda juga bisa secara eksplisit mengoper larik sebagai prop. Sebagai contoh, `RowList` ini menerima larik `baris` sebagai prop: +Anda juga bisa secara eksplisit mengoper larik sebagai *prop*. Sebagai contoh, `RowList` ini menerima larik `baris` sebagai *prop*: @@ -728,9 +728,9 @@ export function RowList({ rows }) { -Since `rows` is a regular JavaScript array, the `RowList` component can use built-in array methods like [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) on it. +Karena `rows` adalah larik JavaScript biasa, komponen `RowList` dapat menggunakan metode larik bawaan seperti [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) di dalamnya. -This pattern is especially useful when you want to be able to pass more information as structured data together with children. In the below example, the `TabSwitcher` component receives an array of objects as the `tabs` prop: +Pola ini sangat berguna ketika Anda ingin memberikan lebih banyak informasi sebagai data terstruktur bersama dengan anak. Pada contoh di bawah ini, komponen `TabSwitcher` menerima larik objek sebagai *prop* `tabs`: @@ -788,13 +788,13 @@ export default function TabSwitcher({ tabs }) { -Unlike passing the children as JSX, this approach lets you associate some extra data like `header` with each item. Because you are working with the `tabs` directly, and it is an array, you do not need the `Children` methods. +Tidak seperti mengoper anak-anak sebagai JSX, pendekatan ini memungkinkan Anda untuk mengasosiasikan beberapa data tambahan seperti `header` dengan setiap item. Karena Anda bekerja dengan `tabs` secara langsung, dan `tabs` adalah sebuah larik sehingga Anda tidak memerlukan metode `Children`. --- -### Calling a render prop to customize rendering {/*calling-a-render-prop-to-customize-rendering*/} +### Memanggil *render* *prop* untuk menyesuaikan *rendering* {/*calling-a-render-prop-to-customize-rendering*/} -Instead of producing JSX for every single item, you can also pass a function that returns JSX, and call that function when necessary. In this example, the `App` component passes a `renderContent` function to the `TabSwitcher` component. The `TabSwitcher` component calls `renderContent` only for the selected tab: +Daripada menghasilkan JSX untuk setiap item, Anda juga bisa mengoper fungsi yang mengembalikan JSX, dan memanggil fungsi tersebut bila diperlukan. Pada contoh ini, komponen `Aplikasi` mengoper fungsi `renderContent` ke komponen `TabSwitcher`. Komponen `TabSwitcher` memanggil `renderContent` hanya untuk tab yang dipilih: @@ -804,12 +804,12 @@ import TabSwitcher from './TabSwitcher.js'; export default function App() { return ( { return tabId[0].toUpperCase() + tabId.slice(1); }} renderContent={tabId => { - return

This is the {tabId} item.

; + return

Ini adalah butir {tabId}.

; }} /> ); @@ -843,9 +843,9 @@ export default function TabSwitcher({ tabIds, getHeader, renderContent }) { -A prop like `renderContent` is called a *render prop* because it is a prop that specifies how to render a piece of the user interface. However, there is nothing special about it: it is a regular prop which happens to be a function. +Sebuah *prop* seperti `renderContent` disebut sebagai *render prop* karena merupakan *prop* yang menentukan bagaimana cara me-*render* sebuah bagian dari antarmuka pengguna. Namun, tidak ada yang aneh dengan *prop* ini: *prop* ini adalah *prop* biasa yang kebetulan merupakan sebuah fungsi. -Render props are functions, so you can pass information to them. For example, this `RowList` component passes the `id` and the `index` of each row to the `renderRow` render prop, which uses `index` to highlight even rows: +*Render props* adalah fungsi, sehingga Anda dapat meneruskan informasi kepada mereka. Misalnya, komponen `RowList` ini meneruskan `id` dan `index` dari setiap baris ke *props* *render* `renderRow`, yang menggunakan `index` untuk menonjolkan baris genap: @@ -855,11 +855,11 @@ import { RowList, Row } from './RowList.js'; export default function App() { return ( { return ( -

This is the {id} item.

+

Ini adalah butir {tabId}.

); }} @@ -926,23 +926,23 @@ export function Row({ children, isHighlighted }) {
-This is another example of how parent and child components can cooperate without manipulating the children. +Demikianlah contoh lain bagaimana komponen induk dan anak dapat bekerja sama tanpa memanipulasi anak-anaknya. --- -## Troubleshooting {/*troubleshooting*/} +## Pemecahan Masalah {/*troubleshooting*/} -### I pass a custom component, but the `Children` methods don't show its render result {/*i-pass-a-custom-component-but-the-children-methods-dont-show-its-render-result*/} +### Saya mengoper komponen kustom, tetapi *method* `Children` tidak menampilkan hasil *render*-nya {/*i-pass-a-custom-component-but-the-children-methods-dont-show-its-render-result*/} -Suppose you pass two children to `RowList` like this: +Misalkan Anda mengoper dua anak ke `RowList` seperti ini: ```js -

First item

+

Butir pertama

``` -If you do `Children.count(children)` inside `RowList`, you will get `2`. Even if `MoreRows` renders 10 different items, or if it returns `null`, `Children.count(children)` will still be `2`. From the `RowList`'s perspective, it only "sees" the JSX it has received. It does not "see" the internals of the `MoreRows` component. +Jika Anda melakukan `Children.count(children)` di dalam `RowList`, Anda akan mendapatkan `2`. Bahkan jika `MoreRows` me-*render* 10 item yang berbeda, atau jika mengembalikan `null`, `Children.count(children)` akan tetap menjadi `2`. Dari sudut pandang `RowList`, ia hanya "melihat" JSX yang diterimanya. Ia tidak "melihat" bagian internal komponen `MoreRows`. -The limitation makes it hard to extract a component. This is why [alternatives](#alternatives) are preferred to using `Children`. +Limitasi ini menyulitkan untuk mengekstrak sebuah komponen. Inilah sebabnya mengapa [alternatif](#alternatif) lebih disarankan daripada menggunakan `Children`. \ No newline at end of file From 9b8402a1fe4163a9e864fdc3462613f0c63af2ba Mon Sep 17 00:00:00 2001 From: Chris Qiang Date: Sun, 27 Aug 2023 05:31:19 +0700 Subject: [PATCH 5/7] fix: translation finalization --- src/content/reference/react/Children.md | 57 +++++++++++++------------ 1 file changed, 29 insertions(+), 28 deletions(-) diff --git a/src/content/reference/react/Children.md b/src/content/reference/react/Children.md index 4257dc3c31..776b9e377e 100644 --- a/src/content/reference/react/Children.md +++ b/src/content/reference/react/Children.md @@ -4,7 +4,7 @@ title: Children -Menggunakan `Children` tidaklah umum dan dapat menyebabkan kode yang mudah rusak. [Lihat alternatif umum.](#alternatives) +Menggunakan `Children` tidaklah umum dan dapat membuat kode Anda mudah rusak. [Lihat alternatif umum.](#alternatives) @@ -58,7 +58,7 @@ Jumlah simpul dalam `children` ini. #### Catatan Penting {/*children-count-caveats*/} -- Simpul kosong (`null`, `undefined`, dan *Boolean*), *string*, angka, dan [elemen React](/reference/react/createElement) dihitung sebagai simpul individu. Larik tidak dihitung sebagai simpul individu, tetapi anak-anaknya dihitung sebagai simpul individu. **Penjelajahan tidak masuk lebih dalam dari elemen React:** mereka tidak di-*render*, dan anak-anaknya tidak dijelajahi. [Fragmen](/reference/react/Fragment) tidak dijelajahi. +- Simpul kosong (`null`, `undefined`, dan *Boolean*), *string*, angka, dan [elemen React](/reference/react/createElement) dihitung sebagai simpul individu. Larik tidak dihitung sebagai simpul individu, tetapi anak-anaknya dihitung sebagai simpul individu. ***Traversal* tidak masuk lebih dalam dari elemen React:** mereka tidak di-*render*, dan anak-anaknya tidak di-*traverse*. [Fragmen](/reference/react/Fragment) tidak di-*traverse*. --- @@ -83,8 +83,8 @@ function SeparatorList({ children }) { #### Parameter {/*children-foreach-parameters*/} * `children`: Nilai dari [*prop* `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) yang diterima oleh komponen Anda. -* `fn`: Fungsi yang ingin Anda jalankan untuk setiap anak, serupa dengan metode *callback* dari [larik `forEach`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach). Fungsi ini akan dipanggil dengan anak sebagai argumen pertama dan indeksnya sebagai argumen kedua. Indeks dimulai dari `0` dan bertambah pada setiap pemanggilan. -* **opsional** `thisArg`: Nilai [`this`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) yang digunakan untuk memanggil fungsi `fn`. Jika diabaikan, maka akan menjadi `undefined`. +* `fn`: Fungsi yang ingin Anda jalankan untuk setiap anak, serupa dengan *method callback* dari [larik `forEach`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach). Fungsi ini akan dipanggil dengan anak sebagai argumen pertama dan indeksnya sebagai argumen kedua. Indeks dimulai dari `0` dan bertambah pada setiap pemanggilan. +* **opsional** `thisArg`: Nilai [`this`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) yang digunakan untuk memanggil fungsi `fn`. Jika diabaikan, maka nilainya akan menjadi `undefined`. #### Kembalian {/*children-foreach-returns*/} @@ -92,7 +92,7 @@ function SeparatorList({ children }) { #### Catatan Penting {/*children-foreach-caveats*/} -- Simpul kosong (`null`, `undefined`, dan *Boolean*), *string*, angka, dan [elemen React](/reference/react/createElement) dihitung sebagai simpul individual. Larik tidak dihitung sebagai simpul individu, tetapi anak-anaknya dihitung sebagai simpul individu. **Penjelajahan tidak masuk lebih dalam dari elemen React:** mereka tidak di-*render*, dan anak-anaknya tidak dijelajahi. [Fragmen](/reference/react/Fragment) tidak dijelajahi. +- Simpul kosong (`null`, `undefined`, dan *Boolean*), *string*, angka, dan [elemen React](/reference/react/createElement) dihitung sebagai simpul individual. Larik tidak dihitung sebagai simpul individu, tetapi anak-anaknya dihitung sebagai simpul individu. ***Traversal* tidak masuk lebih dalam dari elemen React:** mereka tidak di-*render*, dan anak-anaknya tidak di-*traverse*. [Fragmen](/reference/react/Fragment) tidak di-*traverse*. --- @@ -121,18 +121,18 @@ function RowList({ children }) { #### Parameter {/*children-map-parameters*/} * `children`: Nilai dari [*prop* `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) yang diterima oleh komponen Anda. -* `fn`: Fungsi pemetaan, mirip dengan metode *callback* dari [larik `map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Fungsi ini akan dipanggil dengan anak sebagai argumen pertama dan indeksnya sebagai argumen kedua. Indeks dimulai dari `0` dan bertambah pada setiap pemanggilan. Anda harus mengembalikan sebuah simpul React dari fungsi ini. Node ini dapat berupa node kosong (`null`, `undefined`, atau *Boolean*), *string*, angka, elemen React, atau larik simpul React lainnya. -* **opsional** `thisArg`: Nilai [`this`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) yang digunakan untuk memanggil fungsi `fn`. Jika diabaikan, maka akan menjadi `undefined`. +* `fn`: Fungsi pemetaan, mirip dengan *method callback* dari [larik `map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Fungsi ini akan dipanggil dengan anak sebagai argumen pertama dan indeksnya sebagai argumen kedua. Indeks dimulai dari `0` dan bertambah pada setiap pemanggilan. Anda harus mengembalikan sebuah simpul React dari fungsi ini. Simpul ini dapat berupa simpul kosong (`null`, `undefined`, atau *Boolean*), *string*, angka, elemen React, atau larik simpul React lainnya. +* **opsional** `thisArg`: Nilai [`this`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) yang digunakan untuk memanggil fungsi `fn`. Jika diabaikan, maka nilainya akan menjadi `undefined`. #### Kembalian {/*children-map-returns*/} -Jika `children` adalah `null` atau `undefined`, akan mengembalikan nilai yang sama. +Jika `children` adalah `null` atau `undefined`, maka *method* ini akan mengembalikan nilai yang sama. -Jika tidak, kembalikan larik *flat* yang terdiri dari simpul yang Anda kembalikan dari fungsi `fn`. Larik yang dikembalikan akan berisi semua simpul yang Anda kembalikan kecuali `null` dan `undefined`. +Jika tidak, *method* ini akan mengembalikan larik *flat* yang terdiri dari simpul yang Anda kembalikan dari fungsi `fn`. Larik yang dikembalikan akan berisi semua simpul yang Anda kembalikan kecuali `null` dan `undefined`. #### Catatan Penting {/*children-map-caveats*/} -- Simpul kosong (`null`, `undefined`, dan *Boolean*), *string*, angka, dan [elemen React](/reference/react/createElement) dihitung sebagai simpul individual. Larik tidak dihitung sebagai simpul individu, tetapi anak-anaknya dihitung sebagai simpul individu. **Penjelajahan tidak masuk lebih dalam dari elemen React:** mereka tidak di-*render*, dan anak-anaknya tidak dijelajahi. [Fragmen](/reference/react/Fragment) tidak dijelajahi. +- Simpul kosong (`null`, `undefined`, dan *Boolean*), *string*, angka, dan [elemen React](/reference/react/createElement) dihitung sebagai simpul individual. Larik tidak dihitung sebagai simpul individu, tetapi anak-anaknya dihitung sebagai simpul individu. ***Traversal* tidak masuk lebih dalam dari elemen React:** mereka tidak di-*render*, dan anak-anaknya tidak di-*traverse*. [Fragmen](/reference/react/Fragment) tidak di-*traverse*. - Jika Anda mengembalikan sebuah elemen atau larik elemen dengan kunci dari `fn`, **kunci elemen yang dikembalikan akan secara otomatis digabungkan dengan kunci item asli yang sesuai dari `children`.** Jika Anda mengembalikan beberapa elemen dari `fn` dalam sebuah larik, kuncinya hanya perlu unik secara lokal satu sama lain. @@ -155,13 +155,13 @@ function Box({ children }) { #### Kembalian {/*children-only-returns*/} -Jika `children` [adalah elemen yang valid,](/reference/react/isValidElement) kembalikan elemen tersebut. +Jika `children` [adalah elemen yang valid,](/reference/react/isValidElement) elemen tersebut akan dikembalikan. -Jika tidak, akan lemparkan sebuah *error*. +Jika tidak, maka lemparkan sebuah *error*. #### Catatan Penting {/*children-only-caveats*/} -- Metode ini selalu **melempar jika Anda mengoper sebuah array (seperti nilai kembalian dari `Children.map`) sebagai `children`.** Dengan kata lain, metode ini memaksakan bahwa `children` adalah sebuah elemen React, bukan sebuah array dengan satu elemen. +- *Method* ini akan selalu **melempar jika Anda mengoper sebuah larik (seperti nilai kembalian dari `Children.map`) sebagai `children`.** Dengan kata lain, *method* ini memaksakan bahwa `children` adalah sebuah elemen React, bukan sebuah larik dengan satu elemen. --- @@ -214,7 +214,7 @@ function RowList({ children }) { } ``` -Pada contoh di atas, `RowList` membungkus setiap anak yang diterimanya ke dalam wadah `
`. Sebagai contoh, anggaplah komponen induk meneruskan tiga tag `

` sebagai *props* `children` ke `RowList`: +Pada contoh di atas, `RowList` membungkus setiap anak yang diterimanya ke dalam wadah `

`. Sebagai contoh, anggaplah komponen induk meneruskan tiga *tag* `

` sebagai *props* `children` ke `RowList`: ```js @@ -240,7 +240,7 @@ Kemudian, dengan implementasi `RowList` di atas, hasil akhir yang di-*render* ak

``` -`Children.map` mirip dengan [mentransformasi array dengan `map()`.](/learn/rendering-lists) Perbedaannya adalah bahwa struktur data `children` dianggap sebagai *buram*. Artinya, meskipun terkadang `children` berupa array, Anda tidak boleh mengasumsikannya sebagai array atau tipe data tertentu lainnya. Inilah sebabnya mengapa Anda harus menggunakan `Children.map` jika Anda perlu melakukan transformasi. +`Children.map` mirip dengan [mentransformasi larik dengan `map()`.](/learn/rendering-lists) Perbedaannya adalah bahwa struktur data `children` dianggap sebagai *buram*. Artinya, meskipun terkadang `children` berupa larik, Anda tidak boleh mengasumsikannya sebagai larik atau tipe data tertentu lainnya. Inilah sebabnya mengapa Anda harus menggunakan `Children.map` jika Anda perlu melakukan transformasi. @@ -295,17 +295,17 @@ export default function RowList({ children }) { #### Mengapa *prop* *children* tidak selalu berupa larik? {/*why-is-the-children-prop-not-always-an-array*/} -Dalam React, *prop* `children` dianggap sebagai struktur data *buram*. Artinya, Anda tidak boleh bergantung pada cara penytrukturannya. Untuk mengubah, memfilter, atau menghitung anak, Anda harus menggunakan metode-metode `Children`. +Dalam React, *prop* `children` dianggap sebagai struktur data *buram*. Artinya, Anda tidak boleh bergantung pada cara penytrukturannya. Untuk mengubah, memfilter, atau menghitung anak, Anda harus menggunakan *method-method* `Children`. -Pada praktiknya, struktur data `children` sering kali direpresentasikan sebagai sebuah larik secara internal. Namun, jika hanya ada satu child, maka React tidak akan membuat larik tambahan karena hal ini akan menyebabkan overhead memori yang tidak diperlukan. Selama Anda menggunakan metode `Children` dan tidak secara langsung mengintrospeksi *prop* `children`, kode Anda tidak akan rusak meskipun React mengganti bagaimana struktur datanya diimplementasikan. +Pada praktiknya, struktur data `children` sering kali direpresentasikan sebagai sebuah larik secara internal. Namun, jika hanya ada satu *child*, maka React tidak akan membuat larik tambahan karena hal ini akan menyebabkan *overhead* memori yang tidak diperlukan. Selama Anda menggunakan *method* pada `Children` dan tidak secara langsung mengintrospeksi *prop* `children`, kode Anda tidak akan rusak meskipun React mengganti bagaimana struktur datanya diimplementasikan. -Bahkan saat `children` berupa sebuah larik, `Children.map` memiliki perilaku khusus yang membantu. Sebagai contoh, `Children.map` menggabungkan [beberapa *key*](/learn/rendering-lists#keeping-list-items-in-order-with-key) pada elemen yang dikembalikan dengan kunci pada `children` yang telah Anda berikan padanya. Hal ini memastikan anak JSX asli tidak "kehilangan" kunci meskipun dibungkus seperti pada contoh di atas. +Bahkan saat `children` berupa sebuah larik, `Children.map` memiliki perilaku khusus yang membantu. Sebagai contoh, `Children.map` menggabungkan [beberapa *key*](/learn/rendering-lists#keeping-list-items-in-order-with-key) pada elemen yang dikembalikan dengan kunci pada `children` yang telah Anda berikan padanya. Hal ini memastikan anak JSX yang asli tidak "kehilangan" kunci meskipun dibungkus seperti pada contoh di atas. -Struktur data `children` **tidak termasuk output yang di-*render*** dari komponen yang Anda berikan sebagai JSX. Pada contoh di bawah ini, `children` yang diterima oleh `RowList` hanya berisi dua item, bukan tiga: +Struktur data `children` **tidak termasuk keluaran yang di-*render*** dari komponen yang Anda berikan sebagai JSX. Pada contoh di bawah ini, `children` yang diterima oleh `RowList` hanya berisi dua butir, bukan tiga: 1. `

Ini adalah butir pertama.

` 2. `` @@ -377,7 +377,7 @@ export default function RowList({ children }) { ### Menjalankan beberapa kode untuk setiap anak {/*running-some-code-for-each-child*/} -Panggil `Children.forEach` untuk mengulang setiap anak dalam struktur data `children`. Metode ini tidak mengembalikan nilai apa pun dan mirip dengan metode [larik `forEach`.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) Anda dapat menggunakannya untuk menjalankan logika khusus seperti membuat larik Anda sendiri. +Panggil `Children.forEach` untuk melakukan iterasi pada setiap anak dalam struktur data `children`. *Method* ini tidak mengembalikan nilai apa pun dan mirip dengan *method* [larik `forEach`.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) Anda dapat menggunakannya untuk menjalankan logika khusus seperti membuat larik Anda sendiri. @@ -492,7 +492,7 @@ Seperti yang telah disebutkan sebelumnya, tidak ada cara untuk mendapatkan hasil ### Mengonversi anak menjadi larik {/*converting-children-to-an-array*/} -Panggil `Children.toArray(children)` untuk mengubah struktur data `children` menjadi larik JavaScript biasa. Hal ini memungkinkan Anda memanipulasi larik dengan metode larik bawaan seperti [`filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), [`sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort), atau [`reverse`.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) +Panggil `Children.toArray(children)` untuk mengubah struktur data `children` menjadi larik JavaScript biasa. Hal ini memungkinkan Anda memanipulasi larik dengan *method* larik bawaan seperti [`filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), [`sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort), atau [`reverse`.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) @@ -546,9 +546,9 @@ Jangan tertukar dengan [penggunaan *prop* `children`](/learn/passing-props-to-a- ### Mengekspos beberapa komponen {/*exposing-multiple-components*/} -Memanipulasi anak dengan metode `Children` sering kali menghasilkan kode yang mudah rusak. Ketika Anda mengoper *children* ke sebuah komponen di JSX, biasanya Anda tidak mengharapkan komponen tersebut untuk memanipulasi atau mengubah masing-masing *children*. +Memanipulasi anak dengan *method* pada `Children` sering kali menghasilkan kode yang mudah rusak. Ketika Anda mengoper *children* ke sebuah komponen di JSX, biasanya Anda tidak mengharapkan komponen tersebut untuk memanipulasi atau mengubah masing-masing *children*. -Jika memungkinkan, hindari penggunaan metode `Children`. Misalnya, jika Anda ingin setiap anak dari `RowList` dibungkus dengan `
`, ekspor komponen `Row`, dan secara manual membungkus setiap baris ke dalamnya seperti ini: +Jika memungkinkan, hindari penggunaan *method* pada `Children`. Misalnya, jika Anda ingin setiap anak dari `RowList` dibungkus dengan `
`, ekspor komponen `Row`, dan secara manual membungkus setiap baris ke dalamnya seperti ini: @@ -607,7 +607,7 @@ export function Row({ children }) { -Tidak seperti menggunakan `Children.map`, pendekatan ini tidak membungkus setiap anak secara otomatis. **Namun, pendekatan ini memiliki manfaat yang signifikan dibandingkan dengan [contoh sebelumnya dengan `Children.map`](#transforming-children) karena pendekatan ini tetap bekerja meskipun Anda terus mengekstrak lebih banyak komponen, sebagai contoh, pendekatan ini tetap bekerja jika Anda mengekstrak komponen `MoreRows` Anda sendiri: +Tidak seperti menggunakan `Children.map`, pendekatan ini tidak membungkus setiap anak secara otomatis. **Namun, pendekatan ini memiliki keunggulan yang signifikan dibandingkan dengan [contoh sebelumnya dengan `Children.map`](#transforming-children) karena pendekatan ini tetap bekerja meskipun Anda terus mengekstrak lebih banyak komponen.** Sebagai contoh, pendekatan ini tetap bekerja jika Anda mengekstrak komponen `MoreRows` Anda sendiri: @@ -675,6 +675,7 @@ export function Row({ children }) { Hal ini tidak akan bekerja dengan `Children.map` karena fungsi tersebut akan "melihat" `` sebagai satu anak (dan satu baris). + --- ### Menerima larik objek sebagai *prop* {/*accepting-an-array-of-objects-as-a-prop*/} @@ -728,7 +729,7 @@ export function RowList({ rows }) { -Karena `rows` adalah larik JavaScript biasa, komponen `RowList` dapat menggunakan metode larik bawaan seperti [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) di dalamnya. +Karena `rows` adalah larik JavaScript biasa, komponen `RowList` dapat menggunakan *method* larik bawaan seperti [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) di dalamnya. Pola ini sangat berguna ketika Anda ingin memberikan lebih banyak informasi sebagai data terstruktur bersama dengan anak. Pada contoh di bawah ini, komponen `TabSwitcher` menerima larik objek sebagai *prop* `tabs`: @@ -788,7 +789,7 @@ export default function TabSwitcher({ tabs }) { -Tidak seperti mengoper anak-anak sebagai JSX, pendekatan ini memungkinkan Anda untuk mengasosiasikan beberapa data tambahan seperti `header` dengan setiap item. Karena Anda bekerja dengan `tabs` secara langsung, dan `tabs` adalah sebuah larik sehingga Anda tidak memerlukan metode `Children`. +Tidak seperti mengoper anak-anak sebagai JSX, pendekatan ini memungkinkan Anda untuk mengasosiasikan beberapa data tambahan seperti `header` dengan setiap item. Karena Anda bekerja dengan `tabs` secara langsung, dan `tabs` adalah sebuah larik sehingga Anda tidak memerlukan *method* `Children`. --- @@ -859,7 +860,7 @@ export default function App() { renderRow={(id, index) => { return ( -

Ini adalah butir {tabId}.

+

Ini adalah butir {id}.

); }} @@ -943,6 +944,6 @@ Misalkan Anda mengoper dua anak ke `RowList` seperti ini: ``` -Jika Anda melakukan `Children.count(children)` di dalam `RowList`, Anda akan mendapatkan `2`. Bahkan jika `MoreRows` me-*render* 10 item yang berbeda, atau jika mengembalikan `null`, `Children.count(children)` akan tetap menjadi `2`. Dari sudut pandang `RowList`, ia hanya "melihat" JSX yang diterimanya. Ia tidak "melihat" bagian internal komponen `MoreRows`. +Jika Anda melakukan `Children.count(children)` di dalam `RowList`, Anda akan mendapatkan `2`. Bahkan jika `MoreRows` me-*render* 10 butir yang berbeda, atau jika mengembalikan `null`, `Children.count(children)` akan tetap menjadi `2`. Dari sudut pandang `RowList`, ia hanya "melihat" JSX yang diterimanya. Ia tidak "melihat" bagian internal komponen `MoreRows`. Limitasi ini menyulitkan untuk mengekstrak sebuah komponen. Inilah sebabnya mengapa [alternatif](#alternatif) lebih disarankan daripada menggunakan `Children`. \ No newline at end of file From 9be069c516056d9a010665b964d3a93b2007a7a4 Mon Sep 17 00:00:00 2001 From: Chris Qiang Date: Sun, 27 Aug 2023 06:04:26 +0700 Subject: [PATCH 6/7] =?UTF-8?q?fix:=20Larik=20=E2=86=92=20Senarai?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/reference/react/Children.md | 46 ++++++++++++------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/src/content/reference/react/Children.md b/src/content/reference/react/Children.md index 776b9e377e..d2235aaf2e 100644 --- a/src/content/reference/react/Children.md +++ b/src/content/reference/react/Children.md @@ -58,7 +58,7 @@ Jumlah simpul dalam `children` ini. #### Catatan Penting {/*children-count-caveats*/} -- Simpul kosong (`null`, `undefined`, dan *Boolean*), *string*, angka, dan [elemen React](/reference/react/createElement) dihitung sebagai simpul individu. Larik tidak dihitung sebagai simpul individu, tetapi anak-anaknya dihitung sebagai simpul individu. ***Traversal* tidak masuk lebih dalam dari elemen React:** mereka tidak di-*render*, dan anak-anaknya tidak di-*traverse*. [Fragmen](/reference/react/Fragment) tidak di-*traverse*. +- Simpul kosong (`null`, `undefined`, dan *Boolean*), *string*, angka, dan [elemen React](/reference/react/createElement) dihitung sebagai simpul individu. Senarai tidak dihitung sebagai simpul individu, tetapi anak-anaknya dihitung sebagai simpul individu. ***Traversal* tidak masuk lebih dalam dari elemen React:** mereka tidak di-*render*, dan anak-anaknya tidak di-*traverse*. [Fragmen](/reference/react/Fragment) tidak di-*traverse*. --- @@ -83,7 +83,7 @@ function SeparatorList({ children }) { #### Parameter {/*children-foreach-parameters*/} * `children`: Nilai dari [*prop* `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) yang diterima oleh komponen Anda. -* `fn`: Fungsi yang ingin Anda jalankan untuk setiap anak, serupa dengan *method callback* dari [larik `forEach`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach). Fungsi ini akan dipanggil dengan anak sebagai argumen pertama dan indeksnya sebagai argumen kedua. Indeks dimulai dari `0` dan bertambah pada setiap pemanggilan. +* `fn`: Fungsi yang ingin Anda jalankan untuk setiap anak, serupa dengan *method callback* dari [senarai `forEach`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach). Fungsi ini akan dipanggil dengan anak sebagai argumen pertama dan indeksnya sebagai argumen kedua. Indeks dimulai dari `0` dan bertambah pada setiap pemanggilan. * **opsional** `thisArg`: Nilai [`this`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) yang digunakan untuk memanggil fungsi `fn`. Jika diabaikan, maka nilainya akan menjadi `undefined`. #### Kembalian {/*children-foreach-returns*/} @@ -92,7 +92,7 @@ function SeparatorList({ children }) { #### Catatan Penting {/*children-foreach-caveats*/} -- Simpul kosong (`null`, `undefined`, dan *Boolean*), *string*, angka, dan [elemen React](/reference/react/createElement) dihitung sebagai simpul individual. Larik tidak dihitung sebagai simpul individu, tetapi anak-anaknya dihitung sebagai simpul individu. ***Traversal* tidak masuk lebih dalam dari elemen React:** mereka tidak di-*render*, dan anak-anaknya tidak di-*traverse*. [Fragmen](/reference/react/Fragment) tidak di-*traverse*. +- Simpul kosong (`null`, `undefined`, dan *Boolean*), *string*, angka, dan [elemen React](/reference/react/createElement) dihitung sebagai simpul individual. Senarai tidak dihitung sebagai simpul individu, tetapi anak-anaknya dihitung sebagai simpul individu. ***Traversal* tidak masuk lebih dalam dari elemen React:** mereka tidak di-*render*, dan anak-anaknya tidak di-*traverse*. [Fragmen](/reference/react/Fragment) tidak di-*traverse*. --- @@ -121,20 +121,20 @@ function RowList({ children }) { #### Parameter {/*children-map-parameters*/} * `children`: Nilai dari [*prop* `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) yang diterima oleh komponen Anda. -* `fn`: Fungsi pemetaan, mirip dengan *method callback* dari [larik `map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Fungsi ini akan dipanggil dengan anak sebagai argumen pertama dan indeksnya sebagai argumen kedua. Indeks dimulai dari `0` dan bertambah pada setiap pemanggilan. Anda harus mengembalikan sebuah simpul React dari fungsi ini. Simpul ini dapat berupa simpul kosong (`null`, `undefined`, atau *Boolean*), *string*, angka, elemen React, atau larik simpul React lainnya. +* `fn`: Fungsi pemetaan, mirip dengan *method callback* dari [senarai `map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Fungsi ini akan dipanggil dengan anak sebagai argumen pertama dan indeksnya sebagai argumen kedua. Indeks dimulai dari `0` dan bertambah pada setiap pemanggilan. Anda harus mengembalikan sebuah simpul React dari fungsi ini. Simpul ini dapat berupa simpul kosong (`null`, `undefined`, atau *Boolean*), *string*, angka, elemen React, atau senarai simpul React lainnya. * **opsional** `thisArg`: Nilai [`this`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) yang digunakan untuk memanggil fungsi `fn`. Jika diabaikan, maka nilainya akan menjadi `undefined`. #### Kembalian {/*children-map-returns*/} Jika `children` adalah `null` atau `undefined`, maka *method* ini akan mengembalikan nilai yang sama. -Jika tidak, *method* ini akan mengembalikan larik *flat* yang terdiri dari simpul yang Anda kembalikan dari fungsi `fn`. Larik yang dikembalikan akan berisi semua simpul yang Anda kembalikan kecuali `null` dan `undefined`. +Jika tidak, *method* ini akan mengembalikan senarai *flat* yang terdiri dari simpul yang Anda kembalikan dari fungsi `fn`. Senarai yang dikembalikan akan berisi semua simpul yang Anda kembalikan kecuali `null` dan `undefined`. #### Catatan Penting {/*children-map-caveats*/} -- Simpul kosong (`null`, `undefined`, dan *Boolean*), *string*, angka, dan [elemen React](/reference/react/createElement) dihitung sebagai simpul individual. Larik tidak dihitung sebagai simpul individu, tetapi anak-anaknya dihitung sebagai simpul individu. ***Traversal* tidak masuk lebih dalam dari elemen React:** mereka tidak di-*render*, dan anak-anaknya tidak di-*traverse*. [Fragmen](/reference/react/Fragment) tidak di-*traverse*. +- Simpul kosong (`null`, `undefined`, dan *Boolean*), *string*, angka, dan [elemen React](/reference/react/createElement) dihitung sebagai simpul individual. Senarai tidak dihitung sebagai simpul individu, tetapi anak-anaknya dihitung sebagai simpul individu. ***Traversal* tidak masuk lebih dalam dari elemen React:** mereka tidak di-*render*, dan anak-anaknya tidak di-*traverse*. [Fragmen](/reference/react/Fragment) tidak di-*traverse*. -- Jika Anda mengembalikan sebuah elemen atau larik elemen dengan kunci dari `fn`, **kunci elemen yang dikembalikan akan secara otomatis digabungkan dengan kunci item asli yang sesuai dari `children`.** Jika Anda mengembalikan beberapa elemen dari `fn` dalam sebuah larik, kuncinya hanya perlu unik secara lokal satu sama lain. +- Jika Anda mengembalikan sebuah elemen atau senarai elemen dengan kunci dari `fn`, **kunci elemen yang dikembalikan akan secara otomatis digabungkan dengan kunci item asli yang sesuai dari `children`.** Jika Anda mengembalikan beberapa elemen dari `fn` dalam sebuah senarai, kuncinya hanya perlu unik secara lokal satu sama lain. --- @@ -161,13 +161,13 @@ Jika tidak, maka lemparkan sebuah *error*. #### Catatan Penting {/*children-only-caveats*/} -- *Method* ini akan selalu **melempar jika Anda mengoper sebuah larik (seperti nilai kembalian dari `Children.map`) sebagai `children`.** Dengan kata lain, *method* ini memaksakan bahwa `children` adalah sebuah elemen React, bukan sebuah larik dengan satu elemen. +- *Method* ini akan selalu **melempar jika Anda mengoper sebuah senarai (seperti nilai kembalian dari `Children.map`) sebagai `children`.** Dengan kata lain, *method* ini memaksakan bahwa `children` adalah sebuah elemen React, bukan sebuah senarai dengan satu elemen. --- ### `Children.toArray(children)` {/*children-toarray*/} -Panggil `Children.toArray(children)` untuk membuat larik dari struktur data `children`. +Panggil `Children.toArray(children)` untuk membuat senarai dari struktur data `children`. ```js ReversedList.js active import { Children } from 'react'; @@ -184,11 +184,11 @@ export default function ReversedList({ children }) { #### Kembalian {/*children-toarray-returns*/} -Mengembalikan larik yang *flat* dari elemen dalam `children`. +Mengembalikan senarai yang *flat* dari elemen dalam `children`. #### Catatan Penting {/*children-toarray-caveats*/} -- Simpul kosong (`null`, `undefined`, dan *Boolean*) akan dihilangkan dalam larik yang dikembalikan. **Kunci elemen yang dikembalikan akan dihitung dari kunci elemen asli dan tingkat persarangan serta posisinya.** Hal ini memastikan bahwa pe-*flatten*-an larik tidak mengakibatkan perubahan perilaku. +- Simpul kosong (`null`, `undefined`, dan *Boolean*) akan dihilangkan dalam senarai yang dikembalikan. **Kunci elemen yang dikembalikan akan dihitung dari kunci elemen asli dan tingkat persarangan serta posisinya.** Hal ini memastikan bahwa pe-*flatten*-an senarai tidak mengakibatkan perubahan perilaku. --- @@ -240,7 +240,7 @@ Kemudian, dengan implementasi `RowList` di atas, hasil akhir yang di-*render* ak
``` -`Children.map` mirip dengan [mentransformasi larik dengan `map()`.](/learn/rendering-lists) Perbedaannya adalah bahwa struktur data `children` dianggap sebagai *buram*. Artinya, meskipun terkadang `children` berupa larik, Anda tidak boleh mengasumsikannya sebagai larik atau tipe data tertentu lainnya. Inilah sebabnya mengapa Anda harus menggunakan `Children.map` jika Anda perlu melakukan transformasi. +`Children.map` mirip dengan [mentransformasi senarai dengan `map()`.](/learn/rendering-lists) Perbedaannya adalah bahwa struktur data `children` dianggap sebagai *buram*. Artinya, meskipun terkadang `children` berupa senarai, Anda tidak boleh mengasumsikannya sebagai senarai atau tipe data tertentu lainnya. Inilah sebabnya mengapa Anda harus menggunakan `Children.map` jika Anda perlu melakukan transformasi. @@ -293,13 +293,13 @@ export default function RowList({ children }) { -#### Mengapa *prop* *children* tidak selalu berupa larik? {/*why-is-the-children-prop-not-always-an-array*/} +#### Mengapa *prop* *children* tidak selalu berupa senarai? {/*why-is-the-children-prop-not-always-an-array*/} Dalam React, *prop* `children` dianggap sebagai struktur data *buram*. Artinya, Anda tidak boleh bergantung pada cara penytrukturannya. Untuk mengubah, memfilter, atau menghitung anak, Anda harus menggunakan *method-method* `Children`. -Pada praktiknya, struktur data `children` sering kali direpresentasikan sebagai sebuah larik secara internal. Namun, jika hanya ada satu *child*, maka React tidak akan membuat larik tambahan karena hal ini akan menyebabkan *overhead* memori yang tidak diperlukan. Selama Anda menggunakan *method* pada `Children` dan tidak secara langsung mengintrospeksi *prop* `children`, kode Anda tidak akan rusak meskipun React mengganti bagaimana struktur datanya diimplementasikan. +Pada praktiknya, struktur data `children` sering kali direpresentasikan sebagai sebuah senarai secara internal. Namun, jika hanya ada satu *child*, maka React tidak akan membuat senarai tambahan karena hal ini akan menyebabkan *overhead* memori yang tidak diperlukan. Selama Anda menggunakan *method* pada `Children` dan tidak secara langsung mengintrospeksi *prop* `children`, kode Anda tidak akan rusak meskipun React mengganti bagaimana struktur datanya diimplementasikan. -Bahkan saat `children` berupa sebuah larik, `Children.map` memiliki perilaku khusus yang membantu. Sebagai contoh, `Children.map` menggabungkan [beberapa *key*](/learn/rendering-lists#keeping-list-items-in-order-with-key) pada elemen yang dikembalikan dengan kunci pada `children` yang telah Anda berikan padanya. Hal ini memastikan anak JSX yang asli tidak "kehilangan" kunci meskipun dibungkus seperti pada contoh di atas. +Bahkan saat `children` berupa sebuah senarai, `Children.map` memiliki perilaku khusus yang membantu. Sebagai contoh, `Children.map` menggabungkan [beberapa *key*](/learn/rendering-lists#keeping-list-items-in-order-with-key) pada elemen yang dikembalikan dengan kunci pada `children` yang telah Anda berikan padanya. Hal ini memastikan anak JSX yang asli tidak "kehilangan" kunci meskipun dibungkus seperti pada contoh di atas. @@ -377,7 +377,7 @@ export default function RowList({ children }) { ### Menjalankan beberapa kode untuk setiap anak {/*running-some-code-for-each-child*/} -Panggil `Children.forEach` untuk melakukan iterasi pada setiap anak dalam struktur data `children`. *Method* ini tidak mengembalikan nilai apa pun dan mirip dengan *method* [larik `forEach`.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) Anda dapat menggunakannya untuk menjalankan logika khusus seperti membuat larik Anda sendiri. +Panggil `Children.forEach` untuk melakukan iterasi pada setiap anak dalam struktur data `children`. *Method* ini tidak mengembalikan nilai apa pun dan mirip dengan *method* [senarai `forEach`.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) Anda dapat menggunakannya untuk menjalankan logika khusus seperti membuat senarai Anda sendiri. @@ -490,9 +490,9 @@ Seperti yang telah disebutkan sebelumnya, tidak ada cara untuk mendapatkan hasil --- -### Mengonversi anak menjadi larik {/*converting-children-to-an-array*/} +### Mengonversi anak menjadi senarai {/*converting-children-to-an-array*/} -Panggil `Children.toArray(children)` untuk mengubah struktur data `children` menjadi larik JavaScript biasa. Hal ini memungkinkan Anda memanipulasi larik dengan *method* larik bawaan seperti [`filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), [`sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort), atau [`reverse`.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) +Panggil `Children.toArray(children)` untuk mengubah struktur data `children` menjadi senarai JavaScript biasa. Hal ini memungkinkan Anda memanipulasi senarai dengan *method* senarai bawaan seperti [`filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), [`sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort), atau [`reverse`.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) @@ -678,9 +678,9 @@ Hal ini tidak akan bekerja dengan `Children.map` karena fungsi tersebut akan "me --- -### Menerima larik objek sebagai *prop* {/*accepting-an-array-of-objects-as-a-prop*/} +### Menerima senarai objek sebagai *prop* {/*accepting-an-array-of-objects-as-a-prop*/} -Anda juga bisa secara eksplisit mengoper larik sebagai *prop*. Sebagai contoh, `RowList` ini menerima larik `baris` sebagai *prop*: +Anda juga bisa secara eksplisit mengoper senarai sebagai *prop*. Sebagai contoh, `RowList` ini menerima senarai `baris` sebagai *prop*: @@ -729,9 +729,9 @@ export function RowList({ rows }) { -Karena `rows` adalah larik JavaScript biasa, komponen `RowList` dapat menggunakan *method* larik bawaan seperti [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) di dalamnya. +Karena `rows` adalah senarai JavaScript biasa, komponen `RowList` dapat menggunakan *method* senarai bawaan seperti [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) di dalamnya. -Pola ini sangat berguna ketika Anda ingin memberikan lebih banyak informasi sebagai data terstruktur bersama dengan anak. Pada contoh di bawah ini, komponen `TabSwitcher` menerima larik objek sebagai *prop* `tabs`: +Pola ini sangat berguna ketika Anda ingin memberikan lebih banyak informasi sebagai data terstruktur bersama dengan anak. Pada contoh di bawah ini, komponen `TabSwitcher` menerima senarai objek sebagai *prop* `tabs`: @@ -789,7 +789,7 @@ export default function TabSwitcher({ tabs }) { -Tidak seperti mengoper anak-anak sebagai JSX, pendekatan ini memungkinkan Anda untuk mengasosiasikan beberapa data tambahan seperti `header` dengan setiap item. Karena Anda bekerja dengan `tabs` secara langsung, dan `tabs` adalah sebuah larik sehingga Anda tidak memerlukan *method* `Children`. +Tidak seperti mengoper anak-anak sebagai JSX, pendekatan ini memungkinkan Anda untuk mengasosiasikan beberapa data tambahan seperti `header` dengan setiap item. Karena Anda bekerja dengan `tabs` secara langsung, dan `tabs` adalah sebuah senarai sehingga Anda tidak memerlukan *method* `Children`. --- From 1a010babdf87df3e2165cf974ef54ee983afdefa Mon Sep 17 00:00:00 2001 From: Chris Qiang Date: Sun, 27 Aug 2023 07:33:56 +0700 Subject: [PATCH 7/7] fix: union the emphasize on loanwords --- src/content/reference/react/Children.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/reference/react/Children.md b/src/content/reference/react/Children.md index d2235aaf2e..4372eee17a 100644 --- a/src/content/reference/react/Children.md +++ b/src/content/reference/react/Children.md @@ -293,7 +293,7 @@ export default function RowList({ children }) { -#### Mengapa *prop* *children* tidak selalu berupa senarai? {/*why-is-the-children-prop-not-always-an-array*/} +#### Mengapa *prop children* tidak selalu berupa senarai? {/*why-is-the-children-prop-not-always-an-array*/} Dalam React, *prop* `children` dianggap sebagai struktur data *buram*. Artinya, Anda tidak boleh bergantung pada cara penytrukturannya. Untuk mengubah, memfilter, atau menghitung anak, Anda harus menggunakan *method-method* `Children`. @@ -793,7 +793,7 @@ Tidak seperti mengoper anak-anak sebagai JSX, pendekatan ini memungkinkan Anda u --- -### Memanggil *render* *prop* untuk menyesuaikan *rendering* {/*calling-a-render-prop-to-customize-rendering*/} +### Memanggil *render prop* untuk menyesuaikan *rendering* {/*calling-a-render-prop-to-customize-rendering*/} Daripada menghasilkan JSX untuk setiap item, Anda juga bisa mengoper fungsi yang mengembalikan JSX, dan memanggil fungsi tersebut bila diperlukan. Pada contoh ini, komponen `Aplikasi` mengoper fungsi `renderContent` ke komponen `TabSwitcher`. Komponen `TabSwitcher` memanggil `renderContent` hanya untuk tab yang dipilih: @@ -846,7 +846,7 @@ export default function TabSwitcher({ tabIds, getHeader, renderContent }) { Sebuah *prop* seperti `renderContent` disebut sebagai *render prop* karena merupakan *prop* yang menentukan bagaimana cara me-*render* sebuah bagian dari antarmuka pengguna. Namun, tidak ada yang aneh dengan *prop* ini: *prop* ini adalah *prop* biasa yang kebetulan merupakan sebuah fungsi. -*Render props* adalah fungsi, sehingga Anda dapat meneruskan informasi kepada mereka. Misalnya, komponen `RowList` ini meneruskan `id` dan `index` dari setiap baris ke *props* *render* `renderRow`, yang menggunakan `index` untuk menonjolkan baris genap: +*Render props* adalah fungsi, sehingga Anda dapat meneruskan informasi kepada mereka. Misalnya, komponen `RowList` ini meneruskan `id` dan `index` dari setiap baris ke *props render* `renderRow`, yang menggunakan `index` untuk menonjolkan baris genap: