Forwarding Refs
trong React đển làm gì?
Forwarding Refs
trong React đển làm gì?
Forwarding Refs trong React là một kỹ thuật cho phép bạn chuyển một ref
tự động qua một component để nó có thể truy cập đến một phần tử DOM con hoặc một instance của class component con. Điều này thường cần thiết khi bạn muốn một component cha có thể tương tác trực tiếp với một phần tử DOM hoặc component con mà không cần phải thêm các props trung gian hoặc logic bổ sung.
Để sử dụng forwarding refs, bạn sẽ sử dụng hàm React.forwardRef
để tạo một component. Hàm này nhận vào một hàm render và trả về một component React. Hàm render này nhận vào props
và ref
như là tham số và trả về một React element.
Ví dụ:
const MyInput = React.forwardRef((props, ref) => (
<input ref={ref} {...props} />
));
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}
focusInput = () => {
this.inputRef.current.focus();
};
render() {
return (
<>
<MyInput ref={this.inputRef} />
<button onClick={this.focusInput}>Foc...
middle
Chưa có bình luận nào