Skip to content

Commit ac3ae32

Browse files
authored
Apply suggestions from code review
Co-Authored-By: imiro <ajim1417@gmail.com>
1 parent e898f77 commit ac3ae32

File tree

1 file changed

+15
-15
lines changed

1 file changed

+15
-15
lines changed

Diff for: content/docs/render-props.md

+15-15
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,11 @@ Sebuah komponen dengan _props render_ mengambil suatu fungsi yang mengembalikan
1616

1717
_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).
1818

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

2121
## Gunakan _Props Render_ untuk _*Urusan Lintas-Sektoral*_ {#use-render-props-for-cross-cutting-concerns}
2222

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

2525
Sebagai contoh, komponen berikut ini mengikuti posisi tetikus di suatu aplikasi _web_:
2626

@@ -42,15 +42,15 @@ class MouseTracker extends React.Component {
4242
render() {
4343
return (
4444
<div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
45-
<h1>Gerakkan tetikus!</h1>
45+
<h1>Gerak-gerakkan tetikus!</h1>
4646
<p>Posisi tetikus saat ini adalah ({this.state.x}, {this.state.y})</p>
4747
</div>
4848
);
4949
}
5050
}
5151
```
5252

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

5555
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?
5656

@@ -87,7 +87,7 @@ class MouseTracker extends React.Component {
8787
render() {
8888
return (
8989
<div>
90-
<h1>Gerakkan tetikus!</h1>
90+
<h1>Gerak-gerakkan tetikus!</h1>
9191
<Mouse />
9292
</div>
9393
);
@@ -200,7 +200,7 @@ class MouseTracker extends React.Component {
200200
render() {
201201
return (
202202
<div>
203-
<h1>Gerakkan tetikus!</h1>
203+
<h1>Gerak-gerakkan tetikus!</h1>
204204
<Mouse render={mouse => (
205205
<Cat mouse={mouse} />
206206
)}/>
@@ -210,13 +210,13 @@ class MouseTracker extends React.Component {
210210
}
211211
```
212212

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

215215
Secara lebih konkrit, **sebuah _props render_ adalah suatu _prop_ berupa sebuah fungsi yang digunakan suatu komponen untuk mengetahui apa yang harus ia _render_.**
216216

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

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_:
220220

221221
```js
222222
// 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
262262

263263
Anda akan melihat teknik ini digunakan di API [react-motion](https://github.com/chenglou/react-motion).
264264

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

267267
```js
268268
Mouse.propTypes = {
@@ -273,7 +273,7 @@ Mouse.propTypes = {
273273

274274
### Berhati-hatilah ketika menggunakan Props Render dengan React.PureComponent {#be-careful-when-using-render-props-with-reactpurecomponent}
275275

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_.
277277

278278
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:
279279

@@ -290,7 +290,7 @@ class MouseTracker extends React.Component {
290290

291291
{/*
292292
Ini tidak baik! Nilai dari prop `render`
293-
akan selalu berbeda pada setiap render
293+
akan selalu berbeda pada setiap render.
294294
*/}
295295
<Mouse render={mouse => (
296296
<Cat mouse={mouse} />
@@ -301,9 +301,9 @@ class MouseTracker extends React.Component {
301301
}
302302
```
303303

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!
305305

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

308308
```js
309309
class MouseTracker extends React.Component {
@@ -326,5 +326,5 @@ class MouseTracker extends React.Component {
326326
}
327327
```
328328

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

0 commit comments

Comments
 (0)