فراخوانی متد فرزند از والد در React

mohsen•1 ماه قبل
ارسال شده در
react

برای دسترسی به متدهای کامپوننت فرزند از داخل والد، معمولاً توصیه می‌شود که از روش‌های معمول در React استفاده کنید. یکی از بهترین راه‌ها این است که عملکردها را به کامپوننت فرزند به وسیله props پاس دهید و از کامپوننت فرزند به وسیله رویدادها (Events) یا dispatch به والد پیام ارسال کنید. اما اگر به هر دلیلی نیاز دارید که به متدهای فرزند به طور مستقیم دسترسی پیدا کنید، می‌توانید از refs استفاده کنید.

استفاده از Refs در نسخه های جدیدتر (16.8+)

برای استفاده از refs، باید کامپوننت فرزند را با استفاده از forwardRef تعریف کنید. این اجازه را به والد می‌دهد تا به حتی متدهای فرزند دسترسی داشته باشد. نمونه کد زیر روش مدرن‌تر (استفاده از Hooks) را نشان می‌دهد:

      const { forwardRef, useRef, useImperativeHandle } = React;

const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    getAlert() {
      alert("getAlert from Child");
    }
  }));

  return <h1>Hi</h1>;
});

const Parent = () => {
  const childRef = useRef();

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={() => childRef.current.getAlert()}>Click</button>
    </div>
  );
};

ReactDOM.render(<Parent />, document.getElementById('root'));

استفاده از Class Components در نسخه های قدیمی تر

اگر از Class Components استفاده می‌کنید، می‌توانید به شکل زیر عمل کنید:

      class Parent extends Component {
  constructor(props) {
    super(props);
    this.child = React.createRef();
  }

  onClick = () => {
    this.child.current.getAlert();
  };

  render() {
    return (
      <div>
        <Child ref={this.child} />
        <button onClick={this.onClick}>Click</button>
      </div>
    );
  }
}

class Child extends Component {
  getAlert() {
    alert('getAlert from Child');
  }

  render() {
    return <h1>Hello</h1>;
  }
}

ReactDOM.render(<Parent />, document.getElementById('root'));

استفاده از Callback Style Refs

روش دیگر برای دستیابی به متدهای فرزند، استفاده از callback refs است که به این شکل عمل می‌کند:

      class Parent extends Component {
  render() {
    return (
      <div>
        <Child ref={instance => { this.child = instance; }} />
        <button onClick={() => { this.child.getAlert(); }}>Click</button>
      </div>
    );
  }
}

class Child extends Component {
  getAlert() {
    alert('clicked');
  }

  render() {
    return <h1>Hello</h1>;
  }
}

ReactDOM.render(
  <Parent />,
  document.getElementById('app')
);

روش‌های دیگر

در برخی موارد، شما می‌توانید با استفاده از حالتی از کد که در آن والد وظیفه‌ای را به فرزند می‌دهد، متدهای فرزند را مدیریت کنید. مثلاً می‌توانید از یک متد مشخص در فرزند استفاده کنید که توسط یک پروپ به فرزند ارسال می‌شود و در هنگام لود شدن فرزند، این متد به والد برمی‌گردد. این روش به شما اجازه می‌دهد که بدون نیاز به refs مستقیم به فرزند دسترسی داشته باشید.

در پایان، بسته به نیاز پروژه، می‌توانید از هر یک از این روش‌ها استفاده کنید. نکته‌ای که باید به خاطر داشته باشید این است که استفاده از refs معمولاً نشان‌دهنده طراحی بهتری است که در آن بتوانید عملکردها را به صورت مناسب جابجا کنید.

رای
0
ارسال نظر
مرتب سازی:
اولین نفری باشید که نظر می دهید!