Javascript 将此.state移到外部范围

这是我的App.js

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import {BrowserRouter as Router} from 'react-router-dom';
import Navbar from "./components/nav";
import firebase from './firebase';
import Questions from './components/questions';
import Stuff from './components/stuff';
class App extends Component {
    constructor(p) {
        super(p);
        this.state = {user: null}
    }

    render() {
        return (
            <div className="App">
                <Navbar/>
                {this.state.user ? <Questions/> : <Stuff/>}
            </div>
        );
    }
}

export default App;

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“react Router dom”导入{BrowserRouter as Router}；
从“/components/nav”导入导航栏；
从“/firebase”导入firebase；
从“./组件/问题”导入问题；
从“./components/Stuff”导入内容；
类应用程序扩展组件{
建造师（p）{
超级（p）；
this.state={user:null}
}
render（）{
返回(
{this.state.user？：}
);
}
}
导出默认应用程序；

想法是，它应该呈现导航栏，如果用户登录，它应该呈现Questions元素，否则，呈现其他内容

这是我的

元素：

import React from 'react';
import {Navbar as Bar, Nav, NavItem, Modal, Button, FormControl} from 'react-bootstrap';
import {BrowserRouter as Router, Link, Route} from 'react-router-dom';
import firebase, {auth} from '../firebase';

class Navbar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
        this.login = this.login.bind(this);
        this.logout = this.logout.bind(this);
        this.openLogin = this.openLogin.bind(this);
        this.handleClose = this.handleClose.bind(this);
    }

    componentDidMount() {
        auth.onAuthStateChanged((user) => {
            if (user) {
                this.setState({user});
            }
        });
    }

    logout() {
        auth.signOut()
            .then(() => {
                this.setState({
                    user: null
                });
            });
    }

    login() {
        var email = document.getElementById('email').value;
        var password = document.getElementById('password').value;
        auth.signInWithEmailAndPassword(email, password)
            .then(result => {
                    const user = result.user;
                    this.setState({user});
                    document.getElementById('close').click();
                }
            ).catch(e => console.log(e));
    }

    openLogin() {
        this.setState({show: true});
    }

    handleClose() {
        this.setState({show: false});
    }

    render() {
        return (
            <React.Fragment>
                <Router>
                    <Bar>
                        <Bar.Header>
                            <Bar.Brand>
                                <a href="/home">UczIchApp</a>
                                {/*<Route path='path' component=""/>*/}
                            </Bar.Brand>
                            <Bar.Brand>

                            </Bar.Brand>
                        </Bar.Header>
                        <Nav>
                            {
                                this.state.user ?
                                    <NavItem onClick={this.logout}>Wyloguj się</NavItem>
                                    :
                                    <NavItem onClick={this.openLogin}>Zaloguj się</NavItem>
                            }
                        </Nav>
                    </Bar>
                </Router>
                <Modal show={this.state.show} onHide={this.handleClose}>
                    <Modal.Header closeButton>
                        <Modal.Title>Modal heading</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <form>
                            <FormControl
                                id="email"
                                type="email"
                                label="Email address"
                                placeholder="Enter email"
                            />
                            <FormControl id="password" label="Password" type="password"/>
                            <Button onClick={this.login}>Zaloguj</Button>
                        </form>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button id="close" onClick={this.handleClose}>Close</Button>
                    </Modal.Footer>
                </Modal>
            </React.Fragment>
        )
    }
}

export default Navbar;

从“React”导入React；
从“react bootstrap”导入{Navbar as Bar、Nav、NavItem、Modal、Button、FormControl}；
从“react Router dom”导入{BrowserRouter as Router，Link，Route}；
从“../firebase”导入firebase，{auth}；
类Navbar扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={}；
this.login=this.login.bind（this）；
this.logout=this.logout.bind（this）；
this.openLogin=this.openLogin.bind（this）；
this.handleClose=this.handleClose.bind（this）；
}
componentDidMount（）{
auth.onAuthStateChanged（（用户）=>{
如果（用户）{
this.setState（{user}）；
}
});
}
注销（）{
auth.signOut（）
.然后（（）=>{
这是我的国家({
用户：空
});
});
}
登录（）{
var email=document.getElementById（'email'）。值；
var password=document.getElementById（'password'）。值；
使用电子邮件和密码进行身份验证登录（电子邮件，密码）
。然后（结果=>{
const user=result.user；
this.setState（{user}）；
document.getElementById（'close'）。单击（）；
}
).catch（e=>console.log（e））；
}
openLogin（）{
this.setState（{show:true}）；
}
handleClose（）{
this.setState（{show:false}）；
}
render（）{
返回(
{/**/}
{
这个.state.user？
威洛古吉·西ę
:
扎洛古吉·西ę
}
模态标题
扎洛古伊
关
)
}
}
导出默认导航栏；

---

因此，我想根据

元素中更改的用户状态，更改

元素中的内部。我该怎么做？现在，状态在应用程序组件中的功能中不可用

 constructor(p) {
    super(p);
    this.state = {user: null}
    this.checkUserState= this.checkUserState.bind(this);
}

checkUserState(user){
    this.seState({user});
}

然后在导航栏组件中传递道具作为

 <Navbar {...this}/>

---

由于导航栏是一个子组件，您需要反向运行。

看起来您需要全局处理应用程序的状态。您可以尝试使用管理该应用程序的状态。或者，您可以将一个函数作为道具从父组件传递给nav，该函数可以处理状态

const-Nav=（{handleClick}）=>{
返回（你好世界）；
}
类HelloMessage扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
勾选：假
}
}
handleClick=（e）=>{
e、 预防默认值（）；
this.setState（{checked:！this.state.checked}）；
}
render（）{
返回(
状态：{this.state.checked？'checked'：'unchecked'}

);
}
}
ReactDOM.render(
,
document.getElementById（'app'）
);

这个问题将帮助你更好地重新设计你的应用程序，我做了所有这些，但是

应用程序

元素在状态中仍然没有用户确定我得到了问题。谢谢

this.setState({
        user: null
    },function(){
        this.props.checkUserState(this.state.user)
    });

const Nav = ({ handleClick }) => {
    return (<button onClick={handleClick}>hello world</button>);
}

class HelloMessage extends React.Component {
    constructor(props){
    super(props);
    this.state = {
    checked: false
    }
  }
    handleClick = (e) => {
    e.preventDefault();
        this.setState({checked: !this.state.checked});
  }
  render() {
    return (
      <div>
      <Nav handleClick={this.handleClick}/>
      <p><b>status:</b> {this.state.checked ? 'checked' : 'unchecked'}</p>
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('app')
);