Функция вызова ReactJS другого компонентного реагирующего маршрутизатора

Question

Я реализовал приложение, использующее реагирующий маршрутизатор для обработки маршрутов в моем веб-приложении. Я хочу вызвать функцию logintoggle, которая находится на компоненте Header.js, из функции компонента Hompage.js. App.js содержит все маршруты в одном файле.

Может кто-нибудь объяснить мне, как этого можно достичь с помощью небольшого фрагмента кода?

App.js

render() {
        const { location } = this.props;
        return (
          <IntlProvider
              locale="a"
              messages="s"
          >
             <Fragment>

                  <div>

                    <Headers />
                      <Switch>
                        <Route exact path="/women" component={HomePage} />
                     </Switch>
                    </div>

             </Fragment>
            </IntlProvider>
        );
      }
    }
   export default App;

Заголовок

class Header extends React.Component {
                constructor(props) {

                    super(props);
        }

         logintoggle(tab) {
                if (this.state.activeTab !== tab) {
                    this.setState({
                        activeTab: tab
                    });
                }
            }

    }

Homepage.js

class CheckOut extends Component {

    constructor(props) {
        super(props);

    }
}

Answer 1

Когда вам нужно иметь общее состояние между компонентами, React.Context API - это то, что вам нужно. Это позволяет вам создать отдельный поставщик контекста, который предоставит состояние и методы для манипулирования этим состоянием для всех компонентов, которые вам нужны. В приведенном ниже примере у меня есть переменная состояния LoginContextProvider с activeTab. Я предоставляю activeTab и setActiveTab всем компонентам в дочерних элементах LoginContextProvider. Header изменяется activeTab на 1, Homepage изменяется на 2 и LoginContextDebug представляет фактическое значение activeTab.

const LoginContext = React.createContext(null);

const LoginContextProvider = ({ children }) => {
  const [activeTab, setActiveTab] = React.useState(0);

  return (
    
      {children}
    
  );
};

const Header = () => {
  // Use setActiveTab here
  const { setActiveTab } = React.useContext(LoginContext);

  return (
    
      I am header
       setActiveTab(1)}>Set activeTab to 1
    
  );
};

const Homepage = () => {
  // Use setActiveTab here
  const { setActiveTab } = React.useContext(LoginContext);

  return (
    
      I am homepage
       setActiveTab(2)}>Set activeTab to 2
    
  );
};

const LoginContextDebug = () => {
  const { activeTab } = React.useContext(LoginContext);

  return (
    
      activeTab={activeTab}
    

);};const App = () => ();ReactDOM.render (, document.getElementById ('root'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<div id="root"></div>