import * as React from "react";
const Forward = React.forwardRef((props, ref: React.Ref<HTMLDivElement>) => (
<div ref={ref} style={{ width: "100%", height: "30px", backgroundColor: "green" }} />
));
function ForwardRef() {
const divRef = React.useRef<HTMLDivElement>(null);
React.useEffect(() => {
if (divRef.current) {
console.log(`forwardRefRef div width: ${divRef.current.clientWidth}`);
}
});
return <Forward ref={divRef} />;
}
export default ForwardRef;
// Lấy ref thông qua props
class WrappedComponent extends Component {
render() {
return (
<input
type="text"
name={this.props.name}
ref={this.props.innerRef}
/>
)
}
}
// Gói componentnt được bọc của chúng tôi với ForwardRef, truyền vào props giá trị của refs
const MyInput = React.forwardRef((props, ref) => {
return (<WrappedComponent innerRef={ref} {...props} />);
});
export default MyInput;