چگونه می‌توانیم حالت والد را در React بروز کنیم؟

1. ۱. استفاده از کلاس‌ها
2. ۲. استفاده از هوک ها (Hooks)
3. نکات مهم

در React، برای ارتباط بین فرزندان و والدین و به‌روزرسانی حالت والد از طریق فرزندان، معمولاً بهترین روش استفاده از توابع است. در این روش، یک تابع برای به‌روزرسانی حالت والد به فرزندان پاس داده می‌شود و فرزندان می‌توانند از این تابع برای تغییر وضعیت والد استفاده کنند.

برای انجام این کار، می‌توانید از دو رویکرد زیر بسته به کلاس‌ها یا توابع استفاده کنید:

۱. استفاده از کلاس‌ها

در این روش، ابتدا یک تابع برای بروزرسانی وضعیت در کلاس والد تعریف می‌کنیم. این روش باید در سازنده (constructor) به درستی bind شود تا this به والد اشاره کند:

      class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.handler = this.handler.bind(this);
    this.state = {
      someVar: ''
    };
  }

  handler(newValue) {
    this.setState({ someVar: newValue });
  }

  render() {
    return <Child handler={this.handler} />;
  }
}

class Child extends React.Component {
  render() {
    return <button onClick={() => this.props.handler('New value')}>Update Parent</button>;
  }
}

    

با کلیک بر روی دکمه در Child، وضعیت Parent به‌روز می‌شود.

۲. استفاده از هوک ها (Hooks)

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

      import React, { useState } from 'react';

const ParentComponent = () => {
  const [state, setState] = useState('');

  return (
    <ChildComponent stateChanger={setState} />
  );
};

const ChildComponent = ({ stateChanger }) => {
  return (
    <button onClick={() => stateChanger('New data')}>Update Parent</button>
  );
};

    

در این مثال، ChildComponent با استفاده از stateChanger که به آن پاس داده شده، می‌تواند حالت والد (ParentComponent) را بروز کند.

نکات مهم

• Bind کردن تابع: زمانیکه یک تابع به فرزند ارسال می‌شود، باید this به درستی bind شود. این کار اجازه می‌دهد تا this در داخل تابع به والد اشاره کند و از اشکالات جلوگیری کند. می‌توانید این کار را در سازنده (constructor) انجام دهید یا از توابع arrow استفاده کنید، که به طور خودکار this را به والد bind می‌کنند.
• ساختار کامپوننت: در این نوع ارتباطات، توجه به ساختار کامپوننت‌ها مهم است. اگر فرزندان مستقیماً با والد خود ارتباط ندارند، می‌توانید از یک والد مشترک بالاتر استفاده کنید که وضعیت و توابع مورد نیاز را مدیریت کند.

این روش‌ها به ما امکان می‌دهند بدون نیاز به استفاده از Redux، از قابلیت‌های قدرتمند React برای مدیریت حالت استفاده کنیم و ارتباط بین کامپوننت‌ها را ساده‌تر کنیم.