如何訪問另一個組件狀態而不呈現該狀態？

用戶登錄後，我想在標題中顯示該名稱。我一直在閱讀如何傳遞道具，但是我看到的是當你從另一個組件訪問另一個組件狀態時，你再次發現了其他組件。如何在不渲染其他組件的情況下訪問另一個狀態？這裏，我並不想渲染標題組件洞察我的登錄組件，不知如何訪問另一個組件狀態而不呈現該狀態？

在這裏，我重定向這樣我就可以在該州通過的（但因爲我重定向到「/」作爲主成分，而不是標題組件，我還是不知道如何訪問它的成分標題

如果我不使用重定向，我將如何把它傳遞給另一個

 class Header extends React.Component { 
      render() { 
      return (
       <header> 
        <nav> 
        <p className="menuButton"><Link to='/'>Home</Link></p> 
        <p className="menuButton"><Link to='/login'>Login</Link></p> 
        </nav> 
       </header> 
      ) 
      } 
     }

登錄組件：？

class Login extends React.Component { 
      constructor(props) { 
       super(props) 
       this.state = { 
        username:'', 
        email: '', 
        password: '' 
       } 
       this.loginFunc = this.loginFunc.bind(this) 
      } 
     loginFunc(){ 
      ... getting user data ... 
      this.setState({ 
       username:response.firstname 
      }) 
     ... 
     history.push('/', { username: response.firstname }); 
     history.go('/'); 
     } 
    }

來源

2017-08-06 javascripting

這是不可能的。爲了獲得數據登錄，你也必須在頁面上顯示頁眉。除非你使用像flux，redux這樣的東西有一個很大的可共享狀態。 – Nicholas

你應該使用像redux，flux這樣的狀態管理器。 –

您可以有一個父陣營中，你跟蹤狀態都頁眉和登錄組件，並通過道具通過國家，或你可以使用狀態管理庫組件，如Flux，Redux或MobX或實施您自己的PubSub機制。如果沒有在vanilla React中使用父組件，您就無法訪問其他組件的狀態，因爲React使用單向數據流。

我建議尋找到狀態管理庫，但如果你堅持要用一個選項，你會做以下幾點：

創建用於跟蹤狀態的父組件。該組件呈現Header和Login組件。將函數傳遞給Login組件（我們稱之爲updateState），這樣登錄組件可以在用戶登錄時調用它。
讓Login組件通過調用updateState（）來更新父組件中的狀態。函數從父組件傳遞下來 - 從Login操作接收到的數據。
通過調用updateState（）更改通過父組件更改了新狀態的Header組件。

來源

2017-08-06 16:36:01 afterburn

謝謝你的回答。如果我有用於登錄和標題的組件，是否仍然可以將標題傳遞給我的應用程序組件（即呈現家庭組件和標頭組件的組件）。我不能只是一起渲染標題和登錄，而是讓應用程序的其餘部分沒有標題。 – javascripting

你應該能夠在你的App組件中導入/需要你的Header組件。但是我理解你的設置的方式爲什麼不在我的應用程序組件中創建updateState函數並將狀態存儲在那裏？傳遞updateState函數使用道具到你的登錄組件，並在用戶登錄時調用函數。接下來使用道具從App組件傳遞狀態到你的Header組件。 – afterburn

我可以這樣做，如果我也沒有渲染登錄洞察應用程序組件？我的應用程序呈現標題和主要，主要是我有我的地方 – javascripting

如何訪問另一個組件狀態而不呈現該狀態？

回答

相關問題