javascript - 如何让不相关的组件影响主 App 状态？

Question

我有一个 <Navbar />我的 <App /> 中渲染顶部的组件组件，并且在 Navbar 中有一个指向某个登录页面的链接，这是由路由器处理的。如果我不能像 <Login loginHandler={this.loginHandler} /> 中那样以传统方式传递 Prop ，我该如何从 Login.js 中所做的更改中提升状态？ ？

有人告诉我应该将函数抽象为一个单独的模块并在两个组件之间共享它，但我是一个 React 初学者，我需要一些示例。

谢谢

这是 repo 协议(protocol):https://github.com/charlesdarkwind/vitae-eternam

添加的组件:

基本上登录方法是 authHandler 和 authenticate，现在它只是设置用户 ID (uid) 的状态，我希望它是全局的

应用程序.js:

import React from 'react'; 
import NavbarTop from './NavbarTop';

class App extends React.Component {
  constructor() {
    super();       
    this.authenticate = this.authenticate.bind(this);
    this.authHandler = this.authHandler.bind(this); 
  }

  state = {
    items: {},
    order: {},
    uid: null
  };  

  render() {
    return (
      <div>
        <NavbarTop />
      </div>          
    );
  }
}

export default App;

登录.js:

import React from 'react';
import { Button } from 'react-bootstrap';
import base from '../base';
import NavbarTop from './NavbarTop';

class Login extends React.Component {
    componentDidMount() {
        base.onAuth((user) => {
            if(user) {
                this.authHandler(null, { user });
            }
        });
    }

authenticate(provider) {
    console.log(`Tentative de connexion avec ${provider}`);
    base.authWithOAuthPopup(provider, this.authHandler);
  }

  authHandler(err, authData) {
    console.log(err, authData);
    if(err) {
      console.error(err);
      return; 
    }

    // grab the cart/order info
    const orderRef = base.database().ref(this.props.uid); //NEED SOME ID REFERING TO CURRENT ORDER CART

    // query the firebase ref once for the cart data and set the state
    orderRef.once('value', (snapshot) => {
      const data = snapshot.val()  || {};
      this.setState({
        uid: authData.user.uid
      });
    });   
  }

    render() {
        return (
            <div>
                <NavbarTop />
                <div className="loginWrap">
                    <nav className="login">
                        <p>Connexion</p>
                        <Button bsStyle="primary" className="facebook" onClick={() => this.props.authenticate('facebook')}>Connexion avec FaceBook</Button>
                        <Button bsStyle="danger" className="google" onClick={() => this.props.authenticate('google')}>Connexion avec Google</Button>
                </nav>              
                </div>
            </div>
        )
    }
}

export default Login;

Answer 1

如果你在没有任何状态管理库的情况下使用 React，那么 props 是传递数据的唯一方法。实际上，更准确地说，这是传递数据的唯一正确方式，从技术上讲，您可以通过将数据附加到 window 对象以使其成为全局对象或使用 localStorage 来解决这个问题.我会远离窗口对象，但 localStorage 是一个可行的选择。

话虽如此，您可能应该开始研究状态管理库，例如 redux 和 MobX 。它们的使用正是出于这个原因，为您的应用程序提供了一种更好的方式来实现跨组件的持久数据和数据可访问性。

如果您只需要跟踪用户是否登录，那么您可以使用 localStorage，但是如果您开始在应用程序的其他部分遇到同样的问题并且需要使越来越多的数据持久化/global 那么你应该使用状态管理库。