Question

如果我有这样的登录页面组件......

class Login extends Component {
    constructor(props) {

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

我希望在主页上访问该用户名，通过提取来显示用户特定信息，我该怎么做？

class AccountItem extends Component {

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

Answer 1

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

React.createContext 的示例，如果您没有州管理，我强烈推荐使用

// This is where you have your routes etc.
import * as React from 'react';

const UsernameContext = React.createContext('');

class App extends Component {

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

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

  render() {
    <UsernameContext.Provider value={this.state.username}>
      <Switch>
        <Route exact path="/" render={Home} />
        <Route path="/login" render={()=><LoginPage onUsernameChange={this.onUsernameChange}/>
      </Switch>
    </UsernameContext.Provider>
  }
}


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() {
    return (
      <UsernameContext.Consumer>
        {(username) => { 
          // you have username in props
        }}
      </UsernameContext.Consumer>
   )
 }

以下是没有 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

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

1 个答案: