Skip to content

Commit

Permalink
Translate all embeded examples of Forwarding Refs docs.
Browse files Browse the repository at this point in the history
  • Loading branch information
agallio committed Nov 2, 2020
1 parent b378915 commit 0a06734
Show file tree
Hide file tree
Showing 5 changed files with 15 additions and 15 deletions.
4 changes: 2 additions & 2 deletions examples/forwarding-refs/customized-display-name.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ function logProps(Component) {
return <LogProps {...props} forwardedRef={ref} />;
}

// Give this component a more helpful display name in DevTools.
// e.g. "ForwardRef(logProps(MyComponent))"
// Beri komponen ini nama tampilan yang lebih berguna di DevTools.
// misalnya, "ForwardRef(logProps(MyComponent))"
// highlight-range{1-2}
const name = Component.displayName || Component.name;
forwardRef.displayName = `logProps(${name})`;
Expand Down
10 changes: 5 additions & 5 deletions examples/forwarding-refs/fancy-button-ref.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ import FancyButton from './FancyButton';
// highlight-next-line
const ref = React.createRef();

// The FancyButton component we imported is the LogProps HOC.
// Even though the rendered output will be the same,
// Our ref will point to LogProps instead of the inner FancyButton component!
// This means we can't call e.g. ref.current.focus()
// Komponen FancyButton yang kita impor adalah HOC LogProps.
// Meskipun keluaran yang dirender akan sama,
// Ref kita akan menunjuk ke komponen LogProps daripada komponen FancyButton!
// Ini berarti kita tidak dapat memanggil ref, seperti ref.current.focus()
// highlight-range{4}
<FancyButton
label="Click Me"
label="Klik saya!"
handleClick={handleClick}
ref={ref}
/>;
4 changes: 2 additions & 2 deletions examples/forwarding-refs/fancy-button-simple-ref.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,6 @@ const FancyButton = React.forwardRef((props, ref) => (
</button>
));

// You can now get a ref directly to the DOM button:
// Sekarang Anda bisa mendapatkan ref langsung ke button DOM:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;
<FancyButton ref={ref}>Klik saya!</FancyButton>;
4 changes: 2 additions & 2 deletions examples/forwarding-refs/fancy-button.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
8 changes: 4 additions & 4 deletions examples/forwarding-refs/log-props-after.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 <Component ref={forwardedRef} {...rest} />;
}
}

// 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 <LogProps {...props} forwardedRef={ref} />;
Expand Down

0 comments on commit 0a06734

Please sign in to comment.