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.

Cách Sử Dụng Forwarding Refs

Để 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...