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

我有一个< Navbar />我的< App />中渲染顶部的组件组件,在Navbar中有一个指向某个登录页面的链接,这由路由器处理.如果我无法传递它,那么我怎样才能将状态从Login.js中所做的更改中提升为传统方式,例如< Login loginHandler = {this.loginHandler} /> ?

有人告诉我,我应该将函数抽象为一个单独的模块,并在两个组件之间共享它,但是我太多的反应初学者,我需要一些例子.

谢谢

这是回购:https://github.com/charlesdarkwind/vitae-eternam

添加组件:

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

App.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;

Login.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;

解决方法

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

话虽这么说,你应该开始研究像reduxMobX这样的状态管理库.它们被用于这个原因,让你的应用程序成为跨组件实现持久数据和数据可访问性的更好方法.

如果您只需要跟踪用户是否已登录,那么您可以使用localStorage,但是如果您开始遇到与应用程序其他部分相同的问题并且需要使越来越多的数据持久/全局,那么你应该使用一个状态管理库.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)