From 12630ee2f63243664359bec3dd82993d622d9260 Mon Sep 17 00:00:00 2001 From: Rian Priskanova <33197541+rianonehub@users.noreply.github.com> Date: Tue, 16 May 2023 17:26:38 +0700 Subject: [PATCH 1/4] initial translate --- src/content/reference/react/cloneElement.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cloneElement.md b/src/content/reference/react/cloneElement.md index 86711f4d8..dc1f8af1f 100644 --- a/src/content/reference/react/cloneElement.md +++ b/src/content/reference/react/cloneElement.md @@ -4,7 +4,7 @@ title: cloneElement -Using `cloneElement` is uncommon and can lead to fragile code. [See common alternatives.](#alternatives) +Menggunakan `cloneElement` is uncommon and can lead to fragile code. [See common alternatives.](#alternatives) From 88e61805555281e8efc2a905f1df4da47a984827 Mon Sep 17 00:00:00 2001 From: rianonehub Date: Wed, 24 May 2023 00:12:56 +0700 Subject: [PATCH 2/4] translate #547 --- src/content/reference/react/cloneElement.md | 103 ++++++++++---------- 1 file changed, 51 insertions(+), 52 deletions(-) diff --git a/src/content/reference/react/cloneElement.md b/src/content/reference/react/cloneElement.md index dc1f8af1f..69ae53c23 100644 --- a/src/content/reference/react/cloneElement.md +++ b/src/content/reference/react/cloneElement.md @@ -4,13 +4,13 @@ title: cloneElement -Menggunakan `cloneElement` is uncommon and can lead to fragile code. [See common alternatives.](#alternatives) +Menggunakan `cloneElement` adalah hal yang jarang terjadi dan dapat menyebabkan kode yang rentan. [Lihat alternatif yang umum.](#alternatives) -`cloneElement` lets you create a new React element using another element as a starting point. +`cloneElement` memungkinkan anda untuk membuat elemen React baru dengan menggunakan elemen lain sebagai titik awal. ```js const clonedElement = cloneElement(element, props, ...children) @@ -22,11 +22,11 @@ const clonedElement = cloneElement(element, props, ...children) --- -## Reference {/*reference*/} +## Referensi {/*reference*/} ### `cloneElement(element, props, ...children)` {/*cloneelement*/} -Call `cloneElement` to create a React element based on the `element`, but with different `props` and `children`: +Panggil `cloneElement` untuk membuat elemen React berdasarkan `element`, tetapi dengan `props` dan `children` yang berbeda: ```js import { cloneElement } from 'react'; @@ -43,42 +43,42 @@ const clonedElement = cloneElement( console.log(clonedElement); // Goodbye ``` -[See more examples below.](#usage) +[Lihat lebih banyak contoh di bawah ini.](#usage) -#### Parameters {/*parameters*/} +#### Parameter {/*parameters*/} -* `element`: The `element` argument must be a valid React element. For example, it could be a JSX node like ``, the result of calling [`createElement`](/reference/react/createElement), or the result of another `cloneElement` call. +* `element`: Argumen `element` harus merupakan elemen React yang valid. Misalnya, dapat berupa simpul JSX seperti ``, hasil dari pemanggilan [`createElement`](/reference/react/createElement), atau hasil dari pemanggilan `cloneElement` lainnya. -* `props`: The `props` argument must either be an object or `null`. If you pass `null`, the cloned element will retain all of the original `element.props`. Otherwise, for every prop in the `props` object, the returned element will "prefer" the value from `props` over the value from `element.props`. The rest of the props will be filled from the original `element.props`. If you pass `props.key` or `props.ref`, they will replace the original ones. +* `props`: Argumen `props` harus berupa objek atau `null`. Jika anda mengoper `null`, elemen yang di-kloning akan mempertahankan semua `element.props` yang orisinal. Sebaliknya, untuk setiap _prop_ di objek `props`, elemen yang dikembalikan akan "memilih" nilai dari `props` daripada nilai dari `element.props`. Sisa _props_ lainnya akan diisi dari `element.props` yang orisinal. Jika anda mengoper `props.key` atau `props.ref`, mereka akan menggantikan yang orisinal. -* **optional** `...children`: Zero or more child nodes. They can be any React nodes, including React elements, strings, numbers, [portals](/reference/react-dom/createPortal), empty nodes (`null`, `undefined`, `true`, and `false`), and arrays of React nodes. If you don't pass any `...children` arguments, the original `element.props.children` will be preserved. +* **opsional** `...children`: Nol atau lebih simpul anak. Bisa dari simpul React apa pun, termasuk elemen React, _string_, dan _number_. [_portal_](/reference/react-dom/createPortal), simpul kosong (`null`, `undefined`, `true`, dan `false`), dan senarai dari simpul-simpul React. Jika anda tidak mengoper argumen `...children` apa pun, `element.props.children` yang orisinal akan tetap dipertahankan. -#### Returns {/*returns*/} +#### Kembalian {/*returns*/} -`cloneElement` returns a React element object with a few properties: +`cloneElement` mengembalikan objek elemen React dengan beberapa properti: -* `type`: Same as `element.type`. -* `props`: The result of shallowly merging `element.props` with the overriding `props` you have passed. -* `ref`: The original `element.ref`, unless it was overridden by `props.ref`. -* `key`: The original `element.key`, unless it was overridden by `props.key`. +* `type`: Sama seperti `element.type`. +* `props`: Hasil dari penggabungan dangkal antara `element.props` dengan `props` yang anda oper untuk menimpanya. +* `ref`: `element.ref` yang orisinal, kecuali telah ditimpa oleh `props.ref`. +* `key`: `element.key`, yang orisinal, kecuali telah ditimpa oleh `props.key`. -Usually, you'll return the element from your component or make it a child of another element. Although you may read the element's properties, it's best to treat every element as opaque after it's created, and only render it. +Biasanya, anda akan mengembalikan elemen dari sebuah komponen atau membuatnya sebagai anak dari elemen lain. Meskipun anda mungkin membaca properti elemen tersebut, sebaiknya anda memperlakukan setiap elemen sebagai objek tersembunyi setelah dibuat, dan hanya me-*render*-nya. -#### Caveats {/*caveats*/} +#### Catatan penting {/*caveats*/} -* Cloning an element **does not modify the original element.** +* Mengkloning sebuah elemen **tidak mengubah elemen yang orisinal**. -* You should only **pass children as multiple arguments to `cloneElement` if they are all statically known,** like `cloneElement(element, null, child1, child2, child3)`. If your children are dynamic, pass the entire array as the third argument: `cloneElement(element, null, listItems)`. This ensures that React will [warn you about missing `key`s](/learn/rendering-lists#keeping-list-items-in-order-with-key) for any dynamic lists. For static lists this is not necessary because they never reorder. +* Sebaiknya anda hanya **mengoper _children_ sebagai beberapa argumen ke `cloneElement` jika semuanya diketahui secara statis,** seperti `cloneElement(element, null, child1, child2, child3)`. Jika _children_ anda dinamis, oper seluruh senarai sebagai argumen ketiga: `cloneElement(element, null, listItems)`. Ini memastikan bahwa React akan [memperingatkan anda tentang `key` yang hilang](/learn/rendering-lists#keeping-list-items-in-order-with-key) untuk setiap _list_ dinamis. Untuk _list_ statis hal tersebut tidak diperlukan karena tidak pernah diurutkan ulang. -* `cloneElement` makes it harder to trace the data flow, so **try the [alternatives](#alternatives) instead.** +* `cloneElement` membuat pelacakan aliran data lebih sulit, jadi **cobalah beberapa [alternatif](#alternatives) sebagai gantinya.** --- -## Usage {/*usage*/} +## Penggunaan {/*usage*/} -### Overriding props of an element {/*overriding-props-of-an-element*/} +### Menimpa _props_ dari suatu elemen {/*overriding-props-of-an-element*/} -To override the props of some React element, pass it to `cloneElement` with the props you want to override: +Untuk menimpa _prop_ dari beberapa elemen React, oper ke `cloneElement` dengan _props_ yang ingin anda timpa: ```js [[1, 5, ""], [2, 6, "{ isHighlighted: true }"], [3, 4, "clonedElement"]] import { cloneElement } from 'react'; @@ -90,11 +90,11 @@ const clonedElement = cloneElement( ); ``` -Here, the resulting cloned element will be ``. +Hasil dari elemen yang dikloning akan menjadi ``. -**Let's walk through an example to see when it's useful.** +**Mari telusuri contoh untuk melihat kapan hal tersebut berguna.** -Imagine a `List` component that renders its [`children`](/learn/passing-props-to-a-component#passing-jsx-as-children) as a list of selectable rows with a "Next" button that changes which row is selected. The `List` component needs to render the selected `Row` differently, so it clones every `` child that it has received, and adds an extra `isHighlighted: true` or `isHighlighted: false` prop: +Bayangkan komponen `List` yang me-_render_ [`children`](/learn/passing-props-to-a-component#passing-jsx-as-children)nya sebagai daftar baris yang dapat dipilih dengan tombol "Next" yang dapat merubah baris mana yang dipilih. Komponen `List` perlu me-_render_ `Row` yang dipilih secara terpisah, lalu mengkloning setiap anak `` yang telah diterima, dan menambahkan _prop_ `isHighlighted: true` atau `isHighlighted: false`: ```js {6-8} export default function List({ children }) { @@ -108,7 +108,7 @@ export default function List({ children }) { )} ``` -Let's say the original JSX received by `List` looks like this: +Katakanlah JSX asli yang diterima oleh `List` terlihat seperti ini: ```js {2-4} @@ -118,7 +118,7 @@ Let's say the original JSX received by `List` looks like this: ``` -By cloning its children, the `List` can pass extra information to every `Row` inside. The result looks like this: +Dengan mengkloning anaknya, `List` dapat meneruskan informasi tambahan ke setiap `Row` di dalamnya. Hasilnya terlihat seperti ini: ```js {4,8,12} @@ -137,7 +137,7 @@ By cloning its children, the `List` can pass extra information to every `Row` in ``` -Notice how pressing "Next" updates the state of the `List`, and highlights a different row: +Perhatikan saat menekan "Next" akan memperbarui _state_ dari `List`, dan menyorot baris yang berbeda: @@ -232,21 +232,21 @@ button { -To summarize, the `List` cloned the `` elements it received and added an extra prop to them. +Ringkasnya, `List` mengkloning elemen `` yang diterimanya dan menambahkan _prop_ tambahan ke dalamnya. -Cloning children makes it hard to tell how the data flows through your app. Try one of the [alternatives.](#alternatives) +Mengkloning _children_ mempersulit untuk mengetahui bagaimana aliran data di aplikasi anda. Coba salah satu [alternatif.](#alternatives) --- -## Alternatives {/*alternatives*/} +## Alternatif {/*alternatives*/} -### Passing data with a render prop {/*passing-data-with-a-render-prop*/} +### Mengoper data dengan _render prop_ {/*passing-data-with-a-render-prop*/} -Instead of using `cloneElement`, consider accepting a *render prop* like `renderItem`. Here, `List` receives `renderItem` as a prop. `List` calls `renderItem` for every item and passes `isHighlighted` as an argument: +Daripada menggunakan `cloneElement`, pertimbangkan untuk menerima *render prop* seperti `renderItem`. Di sini, `List` menerima `renderItem` sebagai _prop_. `List` memanggil `renderItem` untuk setiap item dan mengoper `isHighlighted` sebagai argumen: ```js {1,7} export default function List({ items, renderItem }) { @@ -259,7 +259,7 @@ export default function List({ items, renderItem }) { })} ``` -The `renderItem` prop is called a "render prop" because it's a prop that specifies how to render something. For example, you can pass a `renderItem` implementation that renders a `` with the given `isHighlighted` value: +_Prop_ `renderItem` disebut "render prop" karena merupakan _prop_ yang menentukan cara me-_render_ sesuatu. Misalnya, anda dapat mengoper `renderItem` yang me-_render_ `` dengan nilai `isHighlighted` yang diberikan: ```js {3,7} ``` -The end result is the same as with `cloneElement`: +Hasil akhirnya sama dengan `cloneElement`: ```js {4,8,12} @@ -293,7 +293,7 @@ The end result is the same as with `cloneElement`: ``` -However, you can clearly trace where the `isHighlighted` value is coming from. +Namun, anda dapat dengan mudah melacak dari mana nilai `isHighlighted` berasal. @@ -389,22 +389,21 @@ button { -This pattern is preferred to `cloneElement` because it is more explicit. +Pola ini lebih anjurkan daripada `cloneElement` karena lebih eksplisit. --- -### Passing data through context {/*passing-data-through-context*/} +### Mengoper data melalui _context_ {/*passing-data-through-context*/} -Another alternative to `cloneElement` is to [pass data through context.](/learn/passing-data-deeply-with-context) +Alternatif lain untuk `cloneElement` adalah [mengoper data melalui _context_.](/learn/passing-data-deeply-with-context) - -For example, you can call [`createContext`](/reference/react/createContext) to define a `HighlightContext`: +Sebagai contoh, anda dapat memanggil [`createContext`](/reference/react/createContext) untuk mendefinisikan `HighlightContext`: ```js export const HighlightContext = createContext(false); ``` -Your `List` component can wrap every item it renders into a `HighlightContext` provider: +Komponen `List` dapat menggabungkan setiap item yang di-_render_ ke dalam _provider_ `HighlightContext`: ```js {8,10} export default function List({ items, renderItem }) { @@ -421,7 +420,7 @@ export default function List({ items, renderItem }) { })} ``` -With this approach, `Row` does not need to receive an `isHighlighted` prop at all. Instead, it reads the context: +Dengan pendekatan ini, `Row` tidak perlu menerima _prop_ `isHighlighted` sama sekali. Sebaliknya, dengan membaca _context_-nya: ```js Row.js {2} export default function Row({ title }) { @@ -429,7 +428,7 @@ export default function Row({ title }) { // ... ```` -This allows the calling component to not know or worry about passing `isHighlighted` to ``: +Hal ini memungkinkan komponen pemanggil untuk tidak mengetahui atau peduli tentang pengoperan `isHighlighted` ke ``: ```js {4} ``` -Instead, `List` and `Row` coordinate the highlighting logic through context. +Sebagai gantinya, `List` dan `Row` mengoordinasikan logika penyorotan melalui _context_. @@ -550,13 +549,13 @@ button { -[Learn more about passing data through context.](/reference/react/useContext#passing-data-deeply-into-the-tree) +[Pelajari lebih lanjut tentang mengoper data melalui _context_.](/reference/react/useContext#passing-data-deeply-into-the-tree) --- -### Extracting logic into a custom Hook {/*extracting-logic-into-a-custom-hook*/} +### Mengekstraksi logika ke dalam Hook kustom {/*extracting-logic-into-a-custom-hook*/} -Another approach you can try is to extract the "non-visual" logic into your own Hook, and use the information returned by your Hook to decide what to render. For example, you could write a `useList` custom Hook like this: +Pendekatan lain yang dapat anda coba adalah mengekstrak logika "non-visual" ke dalam Hook anda sendiri, dan menggunakan informasi yang dikembalikan oleh Hook anda untuk memutuskan apa yang akan di-_render_. Misalnya, anda dapat menulis Hook kustom `useList` seperti ini: ```js import { useState } from 'react'; @@ -575,7 +574,7 @@ export default function useList(items) { } ``` -Then you could use it like this: +Lalu anda dapat menggunakannya seperti ini: ```js {2,9,13} export default function App() { @@ -598,7 +597,7 @@ export default function App() { } ``` -The data flow is explicit, but the state is inside the `useList` custom Hook that you can use from any component: +Aliran datanya eksplisit, tetapi _state_ ada di dalam Hook kustom `useList` yang dapat anda gunakan dari komponen apa pun: @@ -691,4 +690,4 @@ button { -This approach is particularly useful if you want to reuse this logic between different components. +Pendekatan ini sangat berguna jika anda ingin menggunakan kembali logika ini di komponen yang berbeda. \ No newline at end of file From 7bf596a0c209151f98634313479cf7638e8ca0a5 Mon Sep 17 00:00:00 2001 From: rianonehub Date: Mon, 5 Jun 2023 00:14:17 +0700 Subject: [PATCH 3/4] fix italic and heading #547 --- src/content/reference/react/cloneElement.md | 40 ++++++++++----------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/src/content/reference/react/cloneElement.md b/src/content/reference/react/cloneElement.md index 8e529cdcb..bc2d2b9f3 100644 --- a/src/content/reference/react/cloneElement.md +++ b/src/content/reference/react/cloneElement.md @@ -49,9 +49,9 @@ console.log(clonedElement); // Goodbye * `element`: Argumen `element` harus merupakan elemen React yang valid. Misalnya, dapat berupa simpul JSX seperti ``, hasil dari pemanggilan [`createElement`](/reference/react/createElement), atau hasil dari pemanggilan `cloneElement` lainnya. -* `props`: Argumen `props` harus berupa objek atau `null`. Jika anda mengoper `null`, elemen yang di-kloning akan mempertahankan semua `element.props` yang orisinal. Sebaliknya, untuk setiap _prop_ di objek `props`, elemen yang dikembalikan akan "memilih" nilai dari `props` daripada nilai dari `element.props`. Sisa _props_ lainnya akan diisi dari `element.props` yang orisinal. Jika anda mengoper `props.key` atau `props.ref`, mereka akan menggantikan yang orisinal. +* `props`: Argumen `props` harus berupa objek atau `null`. Jika anda mengoper `null`, elemen yang di-kloning akan mempertahankan semua `element.props` yang orisinal. Sebaliknya, untuk setiap *prop* di objek `props`, elemen yang dikembalikan akan "memilih" nilai dari `props` daripada nilai dari `element.props`. Sisa *props* lainnya akan diisi dari `element.props` yang orisinal. Jika anda mengoper `props.key` atau `props.ref`, mereka akan menggantikan yang orisinal. -* **opsional** `...children`: Nol atau lebih simpul anak. Bisa dari simpul React apa pun, termasuk elemen React, _string_, dan _number_. [_portal_](/reference/react-dom/createPortal), simpul kosong (`null`, `undefined`, `true`, dan `false`), dan senarai dari simpul-simpul React. Jika anda tidak mengoper argumen `...children` apa pun, `element.props.children` yang orisinal akan tetap dipertahankan. +* **opsional** `...children`: Nol atau lebih simpul anak. Bisa dari simpul React apa pun, termasuk elemen React, *string*, dan *number*. [*portal*](/reference/react-dom/createPortal), simpul kosong (`null`, `undefined`, `true`, dan `false`), dan senarai dari simpul-simpul React. Jika anda tidak mengoper argumen `...children` apa pun, `element.props.children` yang orisinal akan tetap dipertahankan. #### Kembalian {/*returns*/} @@ -68,7 +68,7 @@ Biasanya, anda akan mengembalikan elemen dari sebuah komponen atau membuatnya se * Mengkloning sebuah elemen **tidak mengubah elemen yang orisinal**. -* Sebaiknya anda hanya **mengoper _children_ sebagai beberapa argumen ke `cloneElement` jika semuanya diketahui secara statis,** seperti `cloneElement(element, null, child1, child2, child3)`. Jika _children_ anda dinamis, oper seluruh senarai sebagai argumen ketiga: `cloneElement(element, null, listItems)`. Ini memastikan bahwa React akan [memperingatkan anda tentang `key` yang hilang](/learn/rendering-lists#keeping-list-items-in-order-with-key) untuk setiap _list_ dinamis. Untuk _list_ statis hal tersebut tidak diperlukan karena tidak pernah diurutkan ulang. +* Sebaiknya anda hanya **mengoper *children* sebagai beberapa argumen ke `cloneElement` jika semuanya diketahui secara statis,** seperti `cloneElement(element, null, child1, child2, child3)`. Jika *children* anda dinamis, oper seluruh senarai sebagai argumen ketiga: `cloneElement(element, null, listItems)`. Ini memastikan bahwa React akan [memperingatkan anda tentang `key` yang hilang](/learn/rendering-lists#keeping-list-items-in-order-with-key) untuk setiap *list* dinamis. Untuk *list* statis hal tersebut tidak diperlukan karena tidak pernah diurutkan ulang. * `cloneElement` membuat pelacakan aliran data lebih sulit, jadi **cobalah beberapa [alternatif](#alternatives) sebagai gantinya.** @@ -76,9 +76,9 @@ Biasanya, anda akan mengembalikan elemen dari sebuah komponen atau membuatnya se ## Penggunaan {/*usage*/} -### Menimpa _props_ dari suatu elemen {/*overriding-props-of-an-element*/} +### Menimpa props dari suatu elemen {/*overriding-props-of-an-element*/} -Untuk menimpa _prop_ dari beberapa elemen React, oper ke `cloneElement` dengan _props_ yang ingin anda timpa: +Untuk menimpa *prop* dari beberapa elemen React, oper ke `cloneElement` dengan *props* yang ingin anda timpa: ```js [[1, 5, ""], [2, 6, "{ isHighlighted: true }"], [3, 4, "clonedElement"]] import { cloneElement } from 'react'; @@ -94,7 +94,7 @@ Hasil dari elemen yang dikloning akan menjadi `` yang telah diterima, dan menambahkan _prop_ `isHighlighted: true` atau `isHighlighted: false`: +Bayangkan komponen `List` yang me-*render* [`children`](/learn/passing-props-to-a-component#passing-jsx-as-children)nya sebagai daftar baris yang dapat dipilih dengan tombol "Next" yang dapat merubah baris mana yang dipilih. Komponen `List` perlu me-*render* `Row` yang dipilih secara terpisah, lalu mengkloning setiap anak `` yang telah diterima, dan menambahkan *prop* `isHighlighted: true` atau `isHighlighted: false`: ```js {6-8} export default function List({ children }) { @@ -137,7 +137,7 @@ Dengan mengkloning anaknya, `List` dapat meneruskan informasi tambahan ke setiap ``` -Perhatikan saat menekan "Next" akan memperbarui _state_ dari `List`, dan menyorot baris yang berbeda: +Perhatikan saat menekan "Next" akan memperbarui *state* dari `List`, dan menyorot baris yang berbeda: @@ -232,11 +232,11 @@ button { -Ringkasnya, `List` mengkloning elemen `` yang diterimanya dan menambahkan _prop_ tambahan ke dalamnya. +Ringkasnya, `List` mengkloning elemen `` yang diterimanya dan menambahkan *prop* tambahan ke dalamnya. -Mengkloning _children_ mempersulit untuk mengetahui bagaimana aliran data di aplikasi anda. Coba salah satu [alternatif.](#alternatives) +Mengkloning *children* mempersulit untuk mengetahui bagaimana aliran data di aplikasi anda. Coba salah satu [alternatif.](#alternatives) @@ -244,9 +244,9 @@ Mengkloning _children_ mempersulit untuk mengetahui bagaimana aliran data di apl ## Alternatif {/*alternatives*/} -### Mengoper data dengan _render prop_ {/*passing-data-with-a-render-prop*/} +### Mengoper data dengan render prop {/*passing-data-with-a-render-prop*/} -Daripada menggunakan `cloneElement`, pertimbangkan untuk menerima *render prop* seperti `renderItem`. Di sini, `List` menerima `renderItem` sebagai _prop_. `List` memanggil `renderItem` untuk setiap item dan mengoper `isHighlighted` sebagai argumen: +Daripada menggunakan `cloneElement`, pertimbangkan untuk menerima *render prop* seperti `renderItem`. Di sini, `List` menerima `renderItem` sebagai *prop*. `List` memanggil `renderItem` untuk setiap item dan mengoper `isHighlighted` sebagai argumen: ```js {1,7} export default function List({ items, renderItem }) { @@ -259,7 +259,7 @@ export default function List({ items, renderItem }) { })} ``` -_Prop_ `renderItem` disebut "render prop" karena merupakan _prop_ yang menentukan cara me-_render_ sesuatu. Misalnya, anda dapat mengoper `renderItem` yang me-_render_ `` dengan nilai `isHighlighted` yang diberikan: +*Prop* `renderItem` disebut "render prop" karena merupakan *prop* yang menentukan cara me-*render* sesuatu. Misalnya, anda dapat mengoper `renderItem` yang me-*render* `` dengan nilai `isHighlighted` yang diberikan: ```js {3,7} ``` -Sebagai gantinya, `List` dan `Row` mengoordinasikan logika penyorotan melalui _context_. +Sebagai gantinya, `List` dan `Row` mengoordinasikan logika penyorotan melalui *context*. @@ -549,13 +549,13 @@ button { -[Pelajari lebih lanjut tentang mengoper data melalui _context_.](/reference/react/useContext#passing-data-deeply-into-the-tree) +[Pelajari lebih lanjut tentang mengoper data melalui *context*.](/reference/react/useContext#passing-data-deeply-into-the-tree) --- ### Mengekstraksi logika ke dalam Hook kustom {/*extracting-logic-into-a-custom-hook*/} -Pendekatan lain yang dapat anda coba adalah mengekstrak logika "non-visual" ke dalam Hook anda sendiri, dan menggunakan informasi yang dikembalikan oleh Hook anda untuk memutuskan apa yang akan di-_render_. Misalnya, anda dapat menulis Hook kustom `useList` seperti ini: +Pendekatan lain yang dapat anda coba adalah mengekstrak logika "non-visual" ke dalam Hook anda sendiri, dan menggunakan informasi yang dikembalikan oleh Hook anda untuk memutuskan apa yang akan di-*render*. Misalnya, anda dapat menulis Hook kustom `useList` seperti ini: ```js import { useState } from 'react'; @@ -597,7 +597,7 @@ export default function App() { } ``` -Aliran datanya eksplisit, tetapi _state_ ada di dalam Hook kustom `useList` yang dapat anda gunakan dari komponen apa pun: +Aliran datanya eksplisit, tetapi *state* ada di dalam Hook kustom `useList` yang dapat anda gunakan dari komponen apa pun: From ab2a141c0f7266c95d369611d5fd3e0a571ef320 Mon Sep 17 00:00:00 2001 From: rianonehub Date: Wed, 7 Jun 2023 11:25:56 +0700 Subject: [PATCH 4/4] "anda" -> "Anda" #547 --- src/content/reference/react/cloneElement.md | 30 ++++++++++----------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/content/reference/react/cloneElement.md b/src/content/reference/react/cloneElement.md index bc2d2b9f3..dd8e322cb 100644 --- a/src/content/reference/react/cloneElement.md +++ b/src/content/reference/react/cloneElement.md @@ -10,7 +10,7 @@ Menggunakan `cloneElement` adalah hal yang jarang terjadi dan dapat menyebabkan -`cloneElement` memungkinkan anda untuk membuat elemen React baru dengan menggunakan elemen lain sebagai titik awal. +`cloneElement` memungkinkan Anda untuk membuat elemen React baru dengan menggunakan elemen lain sebagai titik awal. ```js const clonedElement = cloneElement(element, props, ...children) @@ -49,26 +49,26 @@ console.log(clonedElement); // Goodbye * `element`: Argumen `element` harus merupakan elemen React yang valid. Misalnya, dapat berupa simpul JSX seperti ``, hasil dari pemanggilan [`createElement`](/reference/react/createElement), atau hasil dari pemanggilan `cloneElement` lainnya. -* `props`: Argumen `props` harus berupa objek atau `null`. Jika anda mengoper `null`, elemen yang di-kloning akan mempertahankan semua `element.props` yang orisinal. Sebaliknya, untuk setiap *prop* di objek `props`, elemen yang dikembalikan akan "memilih" nilai dari `props` daripada nilai dari `element.props`. Sisa *props* lainnya akan diisi dari `element.props` yang orisinal. Jika anda mengoper `props.key` atau `props.ref`, mereka akan menggantikan yang orisinal. +* `props`: Argumen `props` harus berupa objek atau `null`. Jika Anda mengoper `null`, elemen yang di-kloning akan mempertahankan semua `element.props` yang orisinal. Sebaliknya, untuk setiap *prop* di objek `props`, elemen yang dikembalikan akan "memilih" nilai dari `props` daripada nilai dari `element.props`. Sisa *props* lainnya akan diisi dari `element.props` yang orisinal. Jika Anda mengoper `props.key` atau `props.ref`, mereka akan menggantikan yang orisinal. -* **opsional** `...children`: Nol atau lebih simpul anak. Bisa dari simpul React apa pun, termasuk elemen React, *string*, dan *number*. [*portal*](/reference/react-dom/createPortal), simpul kosong (`null`, `undefined`, `true`, dan `false`), dan senarai dari simpul-simpul React. Jika anda tidak mengoper argumen `...children` apa pun, `element.props.children` yang orisinal akan tetap dipertahankan. +* **opsional** `...children`: Nol atau lebih simpul anak. Bisa dari simpul React apa pun, termasuk elemen React, *string*, dan *number*. [*portal*](/reference/react-dom/createPortal), simpul kosong (`null`, `undefined`, `true`, dan `false`), dan senarai dari simpul-simpul React. Jika Anda tidak mengoper argumen `...children` apa pun, `element.props.children` yang orisinal akan tetap dipertahankan. #### Kembalian {/*returns*/} `cloneElement` mengembalikan objek elemen React dengan beberapa properti: * `type`: Sama seperti `element.type`. -* `props`: Hasil dari penggabungan dangkal antara `element.props` dengan `props` yang anda oper untuk menimpanya. +* `props`: Hasil dari penggabungan dangkal antara `element.props` dengan `props` yang Anda oper untuk menimpanya. * `ref`: `element.ref` yang orisinal, kecuali telah ditimpa oleh `props.ref`. * `key`: `element.key`, yang orisinal, kecuali telah ditimpa oleh `props.key`. -Biasanya, anda akan mengembalikan elemen dari sebuah komponen atau membuatnya sebagai anak dari elemen lain. Meskipun anda mungkin membaca properti elemen tersebut, sebaiknya anda memperlakukan setiap elemen sebagai objek tersembunyi setelah dibuat, dan hanya me-*render*-nya. +Biasanya, Anda akan mengembalikan elemen dari sebuah komponen atau membuatnya sebagai anak dari elemen lain. Meskipun Anda mungkin membaca properti elemen tersebut, sebaiknya Anda memperlakukan setiap elemen sebagai objek tersembunyi setelah dibuat, dan hanya me-*render*-nya. #### Catatan penting {/*caveats*/} * Mengkloning sebuah elemen **tidak mengubah elemen yang orisinal**. -* Sebaiknya anda hanya **mengoper *children* sebagai beberapa argumen ke `cloneElement` jika semuanya diketahui secara statis,** seperti `cloneElement(element, null, child1, child2, child3)`. Jika *children* anda dinamis, oper seluruh senarai sebagai argumen ketiga: `cloneElement(element, null, listItems)`. Ini memastikan bahwa React akan [memperingatkan anda tentang `key` yang hilang](/learn/rendering-lists#keeping-list-items-in-order-with-key) untuk setiap *list* dinamis. Untuk *list* statis hal tersebut tidak diperlukan karena tidak pernah diurutkan ulang. +* Sebaiknya Anda hanya **mengoper *children* sebagai beberapa argumen ke `cloneElement` jika semuanya diketahui secara statis,** seperti `cloneElement(element, null, child1, child2, child3)`. Jika *children* Anda dinamis, oper seluruh senarai sebagai argumen ketiga: `cloneElement(element, null, listItems)`. Ini memastikan bahwa React akan [memperingatkan Anda tentang `key` yang hilang](/learn/rendering-lists#keeping-list-items-in-order-with-key) untuk setiap *list* dinamis. Untuk *list* statis hal tersebut tidak diperlukan karena tidak pernah diurutkan ulang. * `cloneElement` membuat pelacakan aliran data lebih sulit, jadi **cobalah beberapa [alternatif](#alternatives) sebagai gantinya.** @@ -78,7 +78,7 @@ Biasanya, anda akan mengembalikan elemen dari sebuah komponen atau membuatnya se ### Menimpa props dari suatu elemen {/*overriding-props-of-an-element*/} -Untuk menimpa *prop* dari beberapa elemen React, oper ke `cloneElement` dengan *props* yang ingin anda timpa: +Untuk menimpa *prop* dari beberapa elemen React, oper ke `cloneElement` dengan *props* yang ingin Anda timpa: ```js [[1, 5, ""], [2, 6, "{ isHighlighted: true }"], [3, 4, "clonedElement"]] import { cloneElement } from 'react'; @@ -236,7 +236,7 @@ Ringkasnya, `List` mengkloning elemen `` yang diterimanya dan menambahkan -Mengkloning *children* mempersulit untuk mengetahui bagaimana aliran data di aplikasi anda. Coba salah satu [alternatif.](#alternatives) +Mengkloning *children* mempersulit untuk mengetahui bagaimana aliran data di aplikasi Anda. Coba salah satu [alternatif.](#alternatives) @@ -259,7 +259,7 @@ export default function List({ items, renderItem }) { })} ``` -*Prop* `renderItem` disebut "render prop" karena merupakan *prop* yang menentukan cara me-*render* sesuatu. Misalnya, anda dapat mengoper `renderItem` yang me-*render* `` dengan nilai `isHighlighted` yang diberikan: +*Prop* `renderItem` disebut "render prop" karena merupakan *prop* yang menentukan cara me-*render* sesuatu. Misalnya, Anda dapat mengoper `renderItem` yang me-*render* `` dengan nilai `isHighlighted` yang diberikan: ```js {3,7} ``` -Namun, anda dapat dengan mudah melacak dari mana nilai `isHighlighted` berasal. +Namun, Anda dapat dengan mudah melacak dari mana nilai `isHighlighted` berasal. @@ -397,7 +397,7 @@ Pola ini lebih anjurkan daripada `cloneElement` karena lebih eksplisit. Alternatif lain untuk `cloneElement` adalah [mengoper data melalui *context*.](/learn/passing-data-deeply-with-context) -Sebagai contoh, anda dapat memanggil [`createContext`](/reference/react/createContext) untuk mendefinisikan `HighlightContext`: +Sebagai contoh, Anda dapat memanggil [`createContext`](/reference/react/createContext) untuk mendefinisikan `HighlightContext`: ```js export const HighlightContext = createContext(false); @@ -555,7 +555,7 @@ button { ### Mengekstraksi logika ke dalam Hook kustom {/*extracting-logic-into-a-custom-hook*/} -Pendekatan lain yang dapat anda coba adalah mengekstrak logika "non-visual" ke dalam Hook anda sendiri, dan menggunakan informasi yang dikembalikan oleh Hook anda untuk memutuskan apa yang akan di-*render*. Misalnya, anda dapat menulis Hook kustom `useList` seperti ini: +Pendekatan lain yang dapat Anda coba adalah mengekstrak logika "non-visual" ke dalam Hook Anda sendiri, dan menggunakan informasi yang dikembalikan oleh Hook Anda untuk memutuskan apa yang akan di-*render*. Misalnya, Anda dapat menulis Hook kustom `useList` seperti ini: ```js import { useState } from 'react'; @@ -574,7 +574,7 @@ export default function useList(items) { } ``` -Lalu anda dapat menggunakannya seperti ini: +Lalu Anda dapat menggunakannya seperti ini: ```js {2,9,13} export default function App() { @@ -597,7 +597,7 @@ export default function App() { } ``` -Aliran datanya eksplisit, tetapi *state* ada di dalam Hook kustom `useList` yang dapat anda gunakan dari komponen apa pun: +Aliran datanya eksplisit, tetapi *state* ada di dalam Hook kustom `useList` yang dapat Anda gunakan dari komponen apa pun: @@ -690,4 +690,4 @@ button { -Pendekatan ini sangat berguna jika anda ingin menggunakan kembali logika ini di komponen yang berbeda. \ No newline at end of file +Pendekatan ini sangat berguna jika Anda ingin menggunakan kembali logika ini di komponen yang berbeda. \ No newline at end of file