Skip to content

Commit 0a06734

Browse files
committed
Translate all embeded examples of Forwarding Refs docs.
1 parent b378915 commit 0a06734

File tree

5 files changed

+15
-15
lines changed

5 files changed

+15
-15
lines changed

examples/forwarding-refs/customized-display-name.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ function logProps(Component) {
77
return <LogProps {...props} forwardedRef={ref} />;
88
}
99

10-
// Give this component a more helpful display name in DevTools.
11-
// e.g. "ForwardRef(logProps(MyComponent))"
10+
// Beri komponen ini nama tampilan yang lebih berguna di DevTools.
11+
// misalnya, "ForwardRef(logProps(MyComponent))"
1212
// highlight-range{1-2}
1313
const name = Component.displayName || Component.name;
1414
forwardRef.displayName = `logProps(${name})`;

examples/forwarding-refs/fancy-button-ref.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import FancyButton from './FancyButton';
33
// highlight-next-line
44
const ref = React.createRef();
55

6-
// The FancyButton component we imported is the LogProps HOC.
7-
// Even though the rendered output will be the same,
8-
// Our ref will point to LogProps instead of the inner FancyButton component!
9-
// This means we can't call e.g. ref.current.focus()
6+
// Komponen FancyButton yang kita impor adalah HOC LogProps.
7+
// Meskipun keluaran yang dirender akan sama,
8+
// Ref kita akan menunjuk ke komponen LogProps daripada komponen FancyButton!
9+
// Ini berarti kita tidak dapat memanggil ref, seperti ref.current.focus()
1010
// highlight-range{4}
1111
<FancyButton
12-
label="Click Me"
12+
label="Klik saya!"
1313
handleClick={handleClick}
1414
ref={ref}
1515
/>;

examples/forwarding-refs/fancy-button-simple-ref.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@ const FancyButton = React.forwardRef((props, ref) => (
55
</button>
66
));
77

8-
// You can now get a ref directly to the DOM button:
8+
// Sekarang Anda bisa mendapatkan ref langsung ke button DOM:
99
const ref = React.createRef();
10-
<FancyButton ref={ref}>Click me!</FancyButton>;
10+
<FancyButton ref={ref}>Klik saya!</FancyButton>;

examples/forwarding-refs/fancy-button.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ class FancyButton extends React.Component {
66
// ...
77
}
88

9-
// Rather than exporting FancyButton, we export LogProps.
10-
// It will render a FancyButton though.
9+
// Daripada mengekspor FancyButton, kita mengekspor LogProps.
10+
// LogProps tetap akan me-render FancyButton.
1111
// highlight-next-line
1212
export default logProps(FancyButton);

examples/forwarding-refs/log-props-after.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@ function logProps(Component) {
99
// highlight-next-line
1010
const {forwardedRef, ...rest} = this.props;
1111

12-
// Assign the custom prop "forwardedRef" as a ref
12+
// Masukan prop kustom "forwardedRef" sebagai ref
1313
// highlight-next-line
1414
return <Component ref={forwardedRef} {...rest} />;
1515
}
1616
}
1717

18-
// Note the second param "ref" provided by React.forwardRef.
19-
// We can pass it along to LogProps as a regular prop, e.g. "forwardedRef"
20-
// And it can then be attached to the Component.
18+
// Catat param kedua "ref" yang disediakan oleh React.forwardRef.
19+
// Kita dapat meneruskannya ke LogProps sebagai regular prop, misalnya "forwardedRef"
20+
// Dan kemudian dapat dilampirkan ke Komponen.
2121
// highlight-range{1-3}
2222
return React.forwardRef((props, ref) => {
2323
return <LogProps {...props} forwardedRef={ref} />;

0 commit comments

Comments
 (0)