javascript - Reactjs设置状态并在index.js中使用它

Question

我的index.js中有以下渲染函数:

const renderLogin = () => {
    ReactDOM.render(
        <Provider store={store}>
            <AppContainer>
                <Router history={createHistory}>
                    <div>
                        <ThemeProvider theme={theme}>
                            <div className={i.content}>
                                <Route exact path="/" component={() => (<Login foo={"test"}/>)}/>
                            </div>
                        </ThemeProvider>
                    </div>
                </Router>
            </AppContainer>
        </Provider>,
        rootEl
    );
};

在组件登录中，如果用户登录有效，我会设置一个状态变量

我可以将结果传递回index.js并使用它吗？

Answer 1

如果您在 Login 中管理的状态实际上是应用程序中其他地方所需要的，并且实际上是全局状态，那么有几种显而易见的方法可以解决此问题:

1. Lifting State Up

简而言之，您无需在该组件中存储和管理 Login 的状态，而是将状态提升到需要此状态的最近的父级。然后，您可以通过 props 将此状态传递到组件树，并通过回调将值传递回来(例如 onLoginClick)

使用状态容器，例如 Redux

您可以将此状态集中存储在单个状态对象中，而不必管理父组件中的状态并通过 Prop 向下传递可能的多个级别的组件的值/回调。然后，您可以让任何组件订阅此状态，并且当有人登录时，您可以通过 Redux 操作发送修改状态的意图，例如

从 Redux 连接的组件分派(dispatch)一个操作:

dispatch(userLogin(userName));

行动:

const userLogin = userName => {
  return {
    type: "USER_LOGGED_IN",
    userName
  };
};

登录 reducer :

const loginReducer = (
  state = {
    userLoggedIn: false,
    userName: null
  }, action) => {
  switch(action.type) {
    case "USER_LOGGED_IN":
      return {
        ...state,
        userLoggedIn: true,
        userName: action.userName
      };
    default:
      return state;
  }
}

我强烈推荐观看 Dan Abramov 的 Egghead.io 关于 Redux(使用 React)的两个视频系列:

• https://egghead.io/courses/getting-started-with-redux
• https://egghead.io/courses/building-react-applications-with-idiomatic-redux

这可能是最好的，特别是如果您是 React 新手，to try the first approach提升状态。如果您最终发现传递这么多东西变得很笨拙，请尝试一下 Redux。