From d235de1323b5cd5ade538b0a907b6fad1f5f44dd Mon Sep 17 00:00:00 2001 From: agallio Date: Sat, 7 Nov 2020 20:29:43 +0700 Subject: [PATCH] Translate Forwarding Refs (#205) --- content/docs/forwarding-refs.md | 68 +++++++++---------- .../customized-display-name.js | 4 +- examples/forwarding-refs/fancy-button-ref.js | 10 +-- .../fancy-button-simple-ref.js | 4 +- examples/forwarding-refs/fancy-button.js | 4 +- examples/forwarding-refs/log-props-after.js | 8 +-- 6 files changed, 47 insertions(+), 51 deletions(-) diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md index 3318d8499..a77649fd1 100644 --- a/content/docs/forwarding-refs.md +++ b/content/docs/forwarding-refs.md @@ -4,73 +4,69 @@ title: Forwarding Refs permalink: docs/forwarding-refs.html --- -Ref forwarding is a technique for automatically passing a [ref](/docs/refs-and-the-dom.html) through a component to one of its children. This is typically not necessary for most components in the application. However, it can be useful for some kinds of components, especially in reusable component libraries. The most common scenarios are described below. +*Ref forwarding* adalah sebuah teknik untuk meneruskan [ref](/docs/refs-and-the-dom.html) secara otomatis melalui komponen ke salah satu anaknya. Ini biasanya tidak diperlukan untuk sebagian besar komponen dalam aplikasi. Namun, ini bisa berguna untuk beberapa jenis komponen, terutama di pustaka komponen yang dapat digunakan kembali. Skenario paling umum dijelaskan di bawah ini. -## Forwarding refs to DOM components {#forwarding-refs-to-dom-components} +## Mengoper refs ke komponen DOM {#forwarding-refs-to-dom-components} -Consider a `FancyButton` component that renders the native `button` DOM element: +Pertimbangkan sebuah komponen `FancyButton` yang me-render native DOM element yaitu `button`: `embed:forwarding-refs/fancy-button-simple.js` -React components hide their implementation details, including their rendered output. Other components using `FancyButton` **usually will not need to** [obtain a ref](/docs/refs-and-the-dom.html) to the inner `button` DOM element. This is good because it prevents components from relying on each other's DOM structure too much. +Komponen React menyembunyikan detail implementasi mereka, termasuk keluaran render mereka. Komponen-komponen lainnya yang menggunakan `FancyButton` **biasanya tidak perlu untuk** [mendapatkan sebuah ref](/docs/refs-and-the-dom.html) ke dalam DOM element `button`. Ini bagus karena hal ini mencegah komponen untuk bersandar pada struktur DOM komponen lain yang berlebihan. -Although such encapsulation is desirable for application-level components like `FeedStory` or `Comment`, it can be inconvenient for highly reusable "leaf" components like `FancyButton` or `MyTextInput`. These components tend to be used throughout the application in a similar manner as a regular DOM `button` and `input`, and accessing their DOM nodes may be unavoidable for managing focus, selection, or animations. +Meskipun enkapsulasi seperti itu diperlukan oleh komponen yang berada di application-level seperti `FeedStory` atau `Comment`, namun hal tersebut dapat menyulitkan komponen-komponen "leaf" yang sering digunakan kembali seperti `FancyButton` atau `MyTextInput`. Komponen ini cenderung digunakan di seluruh aplikasi dengan cara yang sama seperti regular DOM `button` dan `input`, dan mungkin tidak dapat dihindari mengakses DOM nodes mereka untuk mengelola focus, selection, atau animation. -**Ref forwarding is an opt-in feature that lets some components take a `ref` they receive, and pass it further down (in other words, "forward" it) to a child.** - -In the example below, `FancyButton` uses `React.forwardRef` to obtain the `ref` passed to it, and then forward it to the DOM `button` that it renders: +**Ref forwarding adalah sebuah fitur keikutsertaan yang memperbolehkan beberapa komponen-komponen mengambil sebuah `ref` yang didapatkan, dan menurunkannya (dengan kata lain, "meneruskan" nya) kepada child.** +Pada contoh di bawah ini, `FancyButton` menggunakan `React.forwardRef` untuk mendapatkan `ref` yang diteruskan kepadanya, lalu meneruskannya ke `button` DOM yang di render: `embed:forwarding-refs/fancy-button-simple-ref.js` -This way, components using `FancyButton` can get a ref to the underlying `button` DOM node and access it if necessary—just like if they used a DOM `button` directly. +Dengan cara ini, komponen-komponen yang menggunakan `FancyButton` bisa mendapatkan ref ke DOM node `button` yang mendasarinya dan mengaksesnya jika perlu - sama seperti jika mereka menggunakan `button` DOM secara langsung. -Here is a step-by-step explanation of what happens in the above example: +Berikut adalah penjelasan langkah demi langkah tentang apa yang terjadi pada contoh di atas: -1. We create a [React ref](/docs/refs-and-the-dom.html) by calling `React.createRef` and assign it to a `ref` variable. -1. We pass our `ref` down to `` by specifying it as a JSX attribute. -1. React passes the `ref` to the `(props, ref) => ...` function inside `forwardRef` as a second argument. -1. We forward this `ref` argument down to ` )); -// You can now get a ref directly to the DOM button: +// Sekarang Anda bisa mendapatkan ref langsung ke button DOM: const ref = React.createRef(); -Click me!; +Klik saya!; diff --git a/examples/forwarding-refs/fancy-button.js b/examples/forwarding-refs/fancy-button.js index 9dcd13e16..af8acc502 100644 --- a/examples/forwarding-refs/fancy-button.js +++ b/examples/forwarding-refs/fancy-button.js @@ -6,7 +6,7 @@ class FancyButton extends React.Component { // ... } -// Rather than exporting FancyButton, we export LogProps. -// It will render a FancyButton though. +// Daripada mengekspor FancyButton, kita mengekspor LogProps. +// LogProps tetap akan me-render FancyButton. // highlight-next-line export default logProps(FancyButton); diff --git a/examples/forwarding-refs/log-props-after.js b/examples/forwarding-refs/log-props-after.js index a603bd697..cf5f0c308 100644 --- a/examples/forwarding-refs/log-props-after.js +++ b/examples/forwarding-refs/log-props-after.js @@ -9,15 +9,15 @@ function logProps(Component) { // highlight-next-line const {forwardedRef, ...rest} = this.props; - // Assign the custom prop "forwardedRef" as a ref + // Masukan prop kustom "forwardedRef" sebagai ref // highlight-next-line return ; } } - // Note the second param "ref" provided by React.forwardRef. - // We can pass it along to LogProps as a regular prop, e.g. "forwardedRef" - // And it can then be attached to the Component. + // Catat param kedua "ref" yang disediakan oleh React.forwardRef. + // Kita dapat meneruskannya ke LogProps sebagai regular prop, misalnya "forwardedRef" + // Dan kemudian dapat dilampirkan ke Komponen. // highlight-range{1-3} return React.forwardRef((props, ref) => { return ;