ReactJS调用另一个组件react-router的函数

Question

我已经实现了一个应用程序，它使用 react-router 来处理我的网络应用程序中的路由。我想从 Hompage.js 组件的函数触发 Header.js 组件上的函数 logintoggle 。 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 状态变量。我为 LoginContextProvider 的子项中的所有组件提供 activeTab 和 setActiveTab。 Header 将 activeTab 更改为 1，Homepage 更改为 2，LoginContextDebug 表示实际的 activeTab 值。

const LoginContext = React.createContext(null);

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

  return (
    <LoginContext.Provider value={{ setActiveTab, activeTab }}>
      {children}
    </LoginContext.Provider>
  );
};

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

  return (
    <div>
      <h1>I am header</h1>
      <button onClick={() => setActiveTab(1)}>Set activeTab to 1</button>
    </div>
  );
};

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

  return (
    <div>
      <h1>I am homepage</h1>
      <button onClick={() => setActiveTab(2)}>Set activeTab to 2</button>
    </div>
  );
};

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

  return (
    <pre style={{ padding: 10, background: "lightgray" }}>
      activeTab={activeTab}
    </pre>
  );
};

const App = () => (
  <LoginContextProvider value={null}>
    <Header />
    <Homepage />
    <LoginContextDebug />
  </LoginContextProvider>
);

ReactDOM.render(<App />, 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>

ReactJS调用另一个组件react-router的函数

ReactJS Call Function of another Component react-router

reactjs

react-router

react-router-v4