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
    );
};

如果用戶登錄有效，則在組件Login中設置一個狀態變量

我可以將結果傳遞給index.js還是我們嗎？

Answer 1

如果實際上在應用程序的其他位置需要您在Login中管理的狀態，並且實際上是全局狀態，則可以通過以下兩種顯而易見的方法來解決此問題：

1. 提升狀態

簡而言之，無需將狀態存儲和管理向下Login到該組件中，而是將狀態提升到需要此狀態的最近的父級。 然后，您通過props將該狀態傳遞到組件樹下，並通過回調傳遞值（例如onLoginClick ）

2. 使用狀態容器，例如Redux

不必管理父組件中的狀態並通過props可能通過許多級別的組件向下傳遞值/回調，您可以將此狀態集中存儲在單個狀態對象中。 然后，您可以讓任何組件訂閱此狀態，並且當有人登錄時，您可以通過Redux操作發送修改狀態的意圖。

從與Redux連接的組件中調度操作：

dispatch(userLogin(userName));

行動：

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

Login 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;
  }
}

我會徹底建議您在Redux上觀看Dan Abramov的Egghead.io視頻系列（使用React）：

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

最好，特別是如果您不熟悉React， 嘗試第一種提升狀態的方法 。 如果最終發現要傳遞太多內容變得笨拙，請嘗試一下Redux。