You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/docs/render-props.md
+15-15
Original file line number
Diff line number
Diff line change
@@ -16,11 +16,11 @@ Sebuah komponen dengan _props render_ mengambil suatu fungsi yang mengembalikan
16
16
17
17
_Library_ yang menggunakan _props render_ termasuk [React Router](https://reacttraining.com/react-router/web/api/Route/Route-render-methods) dan [Downshift](https://github.com/paypal/downshift).
18
18
19
-
Pada dokumen ini, kita akan mendiskusikan mengapa _props render_ berguna, dan bagaimana menuliskan milik Anda sendiri.
19
+
Pada dokumen ini kita akan mendiskusikan mengapa _props render_ berguna serta bagaimana cara menulisnya.
20
20
21
21
## Gunakan _Props Render_ untuk _*Urusan Lintas-Sektoral*_ {#use-render-props-for-cross-cutting-concerns}
22
22
23
-
Komponen merupakan unit utama dari penggunakan kembali kode di React, namun tidak selalu jelas bagaimana membagikan _state_ atau perilaku tertentu yang dimiliki suatu komponen ke komponen lainnya yang membutuhkan _state_ yang sama itu.
23
+
Komponen merupakan unit utama dari penggunaan kembali kode di React, namun tidak selalu jelas bagaimana membagikan _state_ atau perilaku tertentu yang dimiliki suatu komponen ke komponen lainnya yang membutuhkan _state_ yang sama itu.
24
24
25
25
Sebagai contoh, komponen berikut ini mengikuti posisi tetikus di suatu aplikasi _web_:
26
26
@@ -42,15 +42,15 @@ class MouseTracker extends React.Component {
<p>Posisi tetikus saat ini adalah ({this.state.x}, {this.state.y})</p>
47
47
</div>
48
48
);
49
49
}
50
50
}
51
51
```
52
52
53
-
Ketika kursor bergerak di layar, komponen menampilkan koordinat (x, y) dari kursor di sebuah `<p>`.
53
+
Ketika kursor bergerak di layar, komponen menampilkan koordinat (x, y) dari kursor di sebuah `<p>`.
54
54
55
55
Kemudian muncul pertanyaan: Bagaimana kita bisa menggunakan kembali perilaku ini pada komponen lainnya? Dengan kata lain, apabila ada komponen lain yang membutuhkan informasi tentang posisi kursor, dapatkah kita merangkum perilaku ini sehingga kita dapat dengan mudah membagikan informasi posisi kursor kepada komponen tersebut?
56
56
@@ -87,7 +87,7 @@ class MouseTracker extends React.Component {
87
87
render() {
88
88
return (
89
89
<div>
90
-
<h1>Gerakkan tetikus!</h1>
90
+
<h1>Gerak-gerakkan tetikus!</h1>
91
91
<Mouse />
92
92
</div>
93
93
);
@@ -200,7 +200,7 @@ class MouseTracker extends React.Component {
200
200
render() {
201
201
return (
202
202
<div>
203
-
<h1>Gerakkan tetikus!</h1>
203
+
<h1>Gerak-gerakkan tetikus!</h1>
204
204
<Mouse render={mouse=> (
205
205
<Cat mouse={mouse} />
206
206
)}/>
@@ -210,13 +210,13 @@ class MouseTracker extends React.Component {
210
210
}
211
211
```
212
212
213
-
Dengan begini, alih-alih mengkloning komponen `<Mouse>` dan menulis secara eksplisit sesuatu yang berbeda di dalam metode `render` untuk setiap kasus penggunaan, kita memberikan suatu props `render` kepada komponen `<Mouse>` yang dapat digunakan untuk menentukan apa yang harus di_render_ secara dinamis.
213
+
Dengan begini, alih-alih mengkloning komponen `<Mouse>` dan menulis secara eksplisit sesuatu yang berbeda di dalam metode `render` untuk setiap kasus penggunaan, kita memberikan suatu props `render` kepada komponen `<Mouse>` yang dapat digunakan untuk menentukan apa yang harus di-_render_ secara dinamis.
214
214
215
215
Secara lebih konkrit, **sebuah _props render_ adalah suatu _prop_ berupa sebuah fungsi yang digunakan suatu komponen untuk mengetahui apa yang harus ia _render_.**
216
216
217
-
Teknik ini membuat perilaku yang perlu kita bagikan menjadi amat _portabel_. Untuk mendapatkan perilaku tersebut, _render_-lah sebuah `<Mouse>` dengan sebuah _props_`render` yang memberitahunya apa yang harus di-_render_ dengan posisi (x, y) kursor saat ini.
217
+
Teknik ini membuat perilaku yang perlu kita bagikan menjadi amat portabel. Untuk mendapatkan perilaku tersebut, _render_-lah sebuah `<Mouse>` dengan sebuah _props_`render` yang memberitahunya apa yang harus di-_render_ dengan posisi (x, y) kursor saat ini.
218
218
219
-
Satu hal menarik tentang props render adalah bahwa Anda dapat mengimplementasikan kebanyakan [komponen tingkat tinggi/higher-order components](/docs/higher-order-components.html) (HOC) menggunakan komponen biasa dengan sebuah _props render_. Sebagai contoh, jika Anda lebih memilih untuk memiliki sebuah HOC `withMouse` daripada komponen `<Mouse>`, Anda dapat dengan mudah membuatnya menggunakan komponen `<Mouse>` biasa dengan suatu _props render_:
219
+
Satu hal menarik tentang _props render_ adalah bahwa Anda dapat mengimplementasikan kebanyakan [komponen tingkat tinggi/higher-order components](/docs/higher-order-components.html) (HOC) menggunakan komponen biasa dengan sebuah _props render_. Sebagai contoh, jika Anda lebih memilih untuk memiliki sebuah HOC `withMouse` daripada komponen `<Mouse>`, Anda dapat dengan mudah membuatnya menggunakan komponen `<Mouse>` biasa dengan suatu _props render_:
220
220
221
221
```js
222
222
// If you really want a HOC for some reason, you can easily
@@ -262,7 +262,7 @@ Dan ingat, props `children` sesungguhnya tidak perlu disebutkan secara eksplisit
262
262
263
263
Anda akan melihat teknik ini digunakan di API [react-motion](https://github.com/chenglou/react-motion).
264
264
265
-
Karena teknik ini sedikit tidak biasa, Anda mungkin akan ingin menyatakan secara eksplisit bahwa props `children` haruslah suatu fungsi pada `propTypes` Anda ketika mendesain suatu API seperti ini.
265
+
Karena teknik ini sedikit tidak biasa, Anda mungkin ingin menyatakan secara eksplisit bahwa props `children` haruslah suatu fungsi pada `propTypes` Anda ketika mendesain suatu API seperti ini.
266
266
267
267
```js
268
268
Mouse.propTypes= {
@@ -273,7 +273,7 @@ Mouse.propTypes = {
273
273
274
274
### Berhati-hatilah ketika menggunakan Props Render dengan React.PureComponent {#be-careful-when-using-render-props-with-reactpurecomponent}
275
275
276
-
Menggunakan sebuah _props render_ dapat menghilangkan keuntungan yang didapatkan dengan menggunakan [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) jika Anda membuat fungsi di dalam metode `render`. Hal ini disebabkan karena perbandingan props yang dangkal (_shallow prop comparison_) pada PureComponent akan selalu mengembalikan nilai `false` untuk props baru, dan setiap `render` dalam kasus ini akan menghasilkan nilai baru untuk _props render_.
276
+
Menggunakan sebuah _props render_ dapat menghilangkan keuntungan yang didapatkan dengan menggunakan [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) jika Anda membuat fungsi di dalam metode `render`. Hal ini disebabkan karena perbandingan _props_ yang dangkal (_shallow prop comparison_) pada PureComponent akan selalu mengembalikan nilai `false` untuk props baru, dan setiap `render` dalam kasus ini akan menghasilkan nilai baru untuk _props render_.
277
277
278
278
Sebagai contoh, melanjutkan dengan komponen `<Mouse>` dari pembahasan di atas, jika `Mouse` meng-_extend_`React.PureComponent` alih-alih `React.Component`, contoh kita akan menjadi seperti berikut:
279
279
@@ -290,7 +290,7 @@ class MouseTracker extends React.Component {
290
290
291
291
{/*
292
292
Ini tidak baik! Nilai dari prop `render`
293
-
akan selalu berbeda pada setiap render
293
+
akan selalu berbeda pada setiap render.
294
294
*/}
295
295
<Mouse render={mouse=> (
296
296
<Cat mouse={mouse} />
@@ -301,9 +301,9 @@ class MouseTracker extends React.Component {
301
301
}
302
302
```
303
303
304
-
Dalam contoh ini, setiap kali `<MouseTracker>` di-_render_, ia akan menghasilkan sebuah fungsi baru sebagai nilai dari props`<Mouse render>`, sehingga menghilangkan efek `<Mouse>` yang meng-_extend_`React.PureComponent` sejak awal!
304
+
Dalam contoh ini, setiap kali `<MouseTracker>` di-_render_, ia akan menghasilkan sebuah fungsi baru sebagai nilai dari _props_`<Mouse render>`, sehingga menghilangkan efek `<Mouse>` yang meng-_extend_`React.PureComponent` sejak awal!
305
305
306
-
Untu mengatasi permasalahan ini, Anda sekali waktu dapat mendefinisikan props ini sebagai _instance_ dari sebuah metode, seperti contoh berikut:
306
+
Untuk mengatasi permasalahan ini, Anda sesekali dapat mendefinisikan _props_ ini sebagai _instance_ dari sebuah metode, seperti contoh berikut:
307
307
308
308
```js
309
309
classMouseTrackerextendsReact.Component {
@@ -326,5 +326,5 @@ class MouseTracker extends React.Component {
326
326
}
327
327
```
328
328
329
-
Pada kasus-kasus di mana Anda tidak dapat mendefinisikan props secara statis (e.g. karena Anda harus menutup _props_ dan/atau _state_ dari komponen tertentu) `<Mouse>` seharusnya meng-_extend_`React.Component` saja.
329
+
Pada kasus-kasus di mana Anda tidak dapat mendefinisikan _props_ secara statis (misalnya karena Anda harus menutup _props_ dan/atau _state_ dari komponen tertentu) `<Mouse>` seharusnya meng-_extend_`React.Component` saja.
0 commit comments