ログインコンポーネントからホームページコンポーネントにユーザー名を渡す

debugcn 投稿 Dev

ヴィンセントグエン

このようなログインページコンポーネントがある場合...

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

ケネス・チュオン

これを処理する最善の方法は、React 16.3を使用している場合、React.createContextを使用するか、アプリレベルで状態を更新するか、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

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]