從進口組件檢查狀態

很多基本問題。我可以將狀態屬性傳遞給另一個組件嗎？所以，如果我創建一個登錄應用程序和API調用成功登錄後，我設置的loggedInUser: 12345狀態在說一個叫Login.js從進口組件檢查狀態

export default class Login extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      data:[], 
      loggedInUser: 12345 
     } 
    } 

    render(){ 

     return(
      //Return the this.state.loggedInUser 
     ) 

    } 
}

如何傳遞this.state.loggedInUser從Login.js的地方，我已經另一個組件組件進口Login.js？

例如，在我的Page1.js我已經import Login from './Login'

能像這樣能實現嗎？我只想將this.state.loggedInUser的值傳遞給我們導入的任何頁面。

謝謝。

來源

2017-08-18 Somename

爲了允許組件相互通信，通常使用諸如** redux **之類的東西。 – Ohgodwhy

我發現Redux非常混亂。有沒有辦法做到這一點，而不使用Redux/Flux並使用純粹的react-native？我只想在組件之間共享1個單一狀態。 – Somename

「React模式」是通過'props'將所需的任何東西傳遞給子組件。你是否在談論將信息傳遞給父組件？ – drjimmie1976

正如在上面的評論中提到的，在這裏可能是最佳做法。但這是一個用香草反應來完成這個的例子。

export default class Parent extends Component { 
    constructor(props) { 
    super(props) 

    this.state = { 
     logginUser: undefined 
    } 

    this.handleUserState = this.handleUserState.bind(this); 
    } 

    handleUserState = (userInfo) => { 
    this.setState({logginUser: userInfo}) 
    } 

    render =() => { 
    return (
     <div> 
     <Login handleUserState={this.handleUserState} /> 

     </div> 
    ) 
    } 
} 

export default class Login extends Component { 

    constructor(props) { 
    super(props); 

    this.loginUser = this.loginUser.bind(this); 
    } 

    loginUser = (e) => { 
    e.preventDefault() 

    <--- make call to api for userInfo here and pass it to the call below ---> 

    this.props.handleUserState(userInfo) 
    } 

    render =() => { 

    return(
     <div> 
      <button type="submit" onClick={this.loginUser} /> 
     </div> 
    ) 
    } 
}

基本上這裏發生了什麼，因爲你正在導入登錄到另一個組件，你將有一個「父」組件作爲狀態管理器並在該級別保存用戶數據。然後，您將用於更新狀態的函數傳遞給Login組件，並在用戶數據更新後再調用它。

我希望這有助於！

來源

2017-08-18 19:46:10 wnamen

從進口組件檢查狀態

回答

相關問題