Reactjs 将用户名从登录组件传递到主页组件

如果我有一个像这样的登录页面组件

class Login extends Component {
    constructor(props) {

        super(props);
        this.state = {
            username: ""
        };

我想访问主页上的用户名，通过fetch显示特定于用户的信息，我该怎么做

class AccountItem extends Component {

    constructor(props) {
        super(props);
        this.state = {
            username : // How to get the same field as Login username here?
        };
    }

---

处理此问题的最佳方法是使用React.createContext如果您有React 16.3，请在应用程序级别更新您的状态，或者使用状态管理系统（如Redux）跟踪您当前的用户名

示例React.createContext，如果您没有状态管理，我强烈建议您使用它

//这是你的路线等。
从“React”导入*作为React；
const UsernameContext=React.createContext（“”）；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={用户名：'}；
}
onUsernameChange=（用户名）=>{
这个.setState（{
用户名：username
});
}
render（）{
}
}
类登录扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户名：“
};
}
onSubmit=（）=>{
//这是伪代码，所以您希望在某处处理登录
//完成后，您可以调用onUsernameChange
this.props.onUsernameChange（this.state.username）；
};
...
}
类AccountItem扩展组件{
render（）{
返回(
{（用户名）=>{
//你在道具中有用户名
}}
)
}

下面是一个没有Redux或React.createContext

// This is where you have your routes etc.
class App extends Component {

  constructor(props) {
    super(props);
    this.state = { username: '' };
  }

  onUsernameChange = (username) => {
    this.setState({ 
      username: username
    });
  }

  render() {
    <Switch>
      <Route path="/login" render={()=><LoginPage onUsernameChange={this.onUsernameChange}/>
      <Route path="/account" render={() => <AccountItem username={this.state.username} />} />
    </Switch>
  }
}


class Login extends Component {
  constructor(props) {

    super(props);
    this.state = {
      username: ""
    };
  }

  onSubmit = () => {
    // This is pseudo code so you want to handle login somewhere
    // when that is done you can call your onUsernameChange
    this.props.onUsernameChange(this.state.username);
  };

  ...
}


class AccountItem extends Component {

  render() {
    this.props.username // you have username in props

//这是你的路线等。
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={用户名：'}；
}
onUsernameChange=（用户名）=>{
这个.setState（{
用户名：username
});
}
render（）{
} />
}
}
类登录扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户名：“
};
}
onSubmit=（）=>{
//这是伪代码，所以您希望在某处处理登录
//完成后，您可以调用onUsernameChange
this.props.onUsernameChange（this.state.username）；
};
...
}
类AccountItem扩展组件{
render（）{
this.props.username//props中有用户名

您可以在本地存储中保存用户名一次loggedIn，然后在AccountItem中获取它。component将研究将其作为道具传递给该组件工作的方法？@Curious13我不太确定我将如何做到这一点。我最终给了路由器一个处于其状态的用户名，然后将其传递给Home并再次传递给AccountItem。这是pr设计可能很糟糕，但目前还可以使用React.createContext。如果你在16.3中，我可以发布一个简单的例子来说明如何使用React.createContext。这应该是处理这种情况的最好方法，因为App->Home->AccountItem这比你@Kennetthruong更不需要

// This is where you have your routes etc.
class App extends Component {

  constructor(props) {
    super(props);
    this.state = { username: '' };
  }

  onUsernameChange = (username) => {
    this.setState({ 
      username: username
    });
  }

  render() {
    <Switch>
      <Route path="/login" render={()=><LoginPage onUsernameChange={this.onUsernameChange}/>
      <Route path="/account" render={() => <AccountItem username={this.state.username} />} />
    </Switch>
  }
}


class Login extends Component {
  constructor(props) {

    super(props);
    this.state = {
      username: ""
    };
  }

  onSubmit = () => {
    // This is pseudo code so you want to handle login somewhere
    // when that is done you can call your onUsernameChange
    this.props.onUsernameChange(this.state.username);
  };

  ...
}


class AccountItem extends Component {

  render() {
    this.props.username // you have username in props