3

我使用 Ionic 5 选项卡模板创建了一个 Ionic React 应用程序。

我想将一个对象从 App 组件传递给选项卡组件。

有什么办法吗？

Tab1 和 Tab2 是我的标签组件。

注意：我希望这个对象在两个 Tab 组件中都使用双向数据绑定，即每当该对象在一个 Tab 组件中更改时，它必须在第二个 Tab 组件中更新。我想在不使用 Redux 或任何第三方的情况下实现它图书馆。

我的 App 组件如下所示：

<IonApp>
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>
            <Route path="/tab1"
                    component=Tab1
                    exact={true} />
            <Route path="/tab2"
                    component=Tab2
                    exact={true} />
          <Route path="/" render={() => <Redirect to="/tab1" />} exact={true} />
        </IonRouterOutlet>
        <IonTabBar slot="bottom">
            <IonTabButton tab={"Title1"} href={"/tab1"}>
              <IonIcon icon={settings} />
              <IonLabel>{"Title1"}</IonLabel>
            </IonTabButton>
            <IonTabButton tab={"Title2"} href={"/tab2"}>
              <IonIcon icon={settings} />
              <IonLabel>{"Title2"}</IonLabel>
            </IonTabButton>
        </IonTabBar>
      </IonTabs>
  </IonReactRouter>
</IonApp>
4

2 回答 2

2

您可以React.Context与 React Hooks 一起用于选项卡之间的简单状态交互，然后您可以向上移动到React.useReducer

下面是一个基本示例React.Context- CodeSandbox.io 上的示例

import React from "react";

// create the context
export const Context = React.createContext();

// create the context provider, we are using use state to ensure that
// we get reactive values from the context...
export const TheProvider = ({ children }) => {
  // the reactive values
  const [sharedValue, setSharedValue] = React.useState("initial");

  // the store object
  let state = {
    sharedValue,
    setSharedValue
  };

  // wrap the application inthe provider with the initialized context
  return <Context.Provider value={state}>{children}</Context.Provider>;
};

export default Context;

将应用程序包装在提供程序中

import { TheProvider } from "./some-context";

const App: React.FC = () => {
  return (
    <IonApp>
      <TheProvider>
       {/* here the provider wraps the whole application to allow */}
       {/* access to the context that is defined */}
        <IonReactRouter>
          <IonTabs>
            <Route
              path="/"
              render={() => <Redirect to="/tab1" />}
              exact={true}
            />
            <IonRouterOutlet>
              <Route path="/tab1" component={Tab1} exact={true} />
              <Route path="/tab2" component={Tab2} exact={true} />
            </IonRouterOutlet>
            <IonTabBar slot="bottom">
              <IonTabButton tab={"Title1"} href={"/tab1"}>
                <IonLabel>{"Title1"}</IonLabel>
              </IonTabButton>
              <IonTabButton tab={"Title2"} href={"/tab2"}>
                <IonLabel>{"Title2"}</IonLabel>
              </IonTabButton>
            </IonTabBar>
          </IonTabs>
        </IonReactRouter>
      </TheProvider>
    </IonApp>
  );
};

现在在选项卡中使用示例

const Tab2 = () => {
  // use react hooks to get the context and the information that is stored
  // in the context, the value and the function to modify the value
  const { sharedValue, setSharedValue } = React.useContext(AppContext);
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>TAB ONE</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <>
          <h2>TAB TWO</h2>
          <div>{sharedValue}</div>
          <IonButton
            onClick={() =>
              setSharedValue("From Tab 2: " + new Date().getMilliseconds())
            }
          >
            Update Value
          </IonButton>
        </>
      </IonContent>
    </IonPage>
  );
};
于 2020-03-16T21:41:38.430 回答
1

您可以在渲染道具中使用您的选项卡组件，<Route>并在选项卡组件中传递您的对象。

<Route
  path="/tab1"
  exact={true}
  name="routeName"
  render={props => (
    <Tab1 object={yourObject}  />
  )} />

你也可以像这样传递所有道具<Tab1 {...props}/>。

或者你可以使用 Redux https://react-redux.js.org/

于 2020-03-15T06:58:03.933 回答