如何根据以下条件将变量从 loginform 传递给 app.js，并在使用 react js 时移动到下一个屏幕

Posted 2023-02-22

【中文标题】如何根据以下条件将变量从 loginform 传递给 app.js，并在使用 react js 时移动到下一个屏幕

【英文标题】：how to pass the variable from loginform to app.js on the below criteria and move to the next screen when it is true using react js

【发布时间】：2021-06-02 15:47:37

【问题描述】：

如何根据以下条件将变量“devscreens”从 loginform 传递给 app.js，并在 react js 中移动到下一个屏幕。

Loginform.js:

async doLogin()
        this.setState(invalid_user:false);
        this.setState(welcome_user:false);
        this.setState(devscreens:false);
        if (!this.state.username)
            return;
        
        
        this.setState(
            buttonDisabled: true
        )
        try
        const response = await axios.get(`$loginidURL`)

        if(response.status === 200)
           this.setState(welcome_user:true);
            console.log(response.data.username)
            console.log(response.data)
            console.log(response.data.userlevel)
            if (response.data.userlevel == 11 )
            
                this.setState(devscreens:true);
                
                console.log(this.state.devscreens)
                
            
            if (response.data.userlevel == 13 )
            
               this.setState(devscreens:false);
            
            userid=response.data.username
            this.resetForm();
        
    

App.js:

function App() 
  const classes = useStyles();
  
  return (
    <ThemeProvider theme=theme>
      <div className="app">
                  <div className='container'>  
                  <h1>Application </h1>
                  <h3>App</h3>
                    <LoginForm/>
                  </div>
                  </div>
         <div className=classes.appMain>
               <Header />
        <Welcome username=""/>
        <Board />
      </div> 

我对在逻辑屏幕及其下一个屏幕集成中的工作做出反应。 想要将 devscreen 值从 Loginform.js 传递给 App.js。如果 devscreen 为真，那么我需要在单独的屏幕中执行 app.js 中的以下内容。

           <Header />
        <Welcome username="Jo"/>
        <Board />
      </div> 

有人可以帮我解决这个问题吗？我尝试使用道具，但这对我不起作用..

【参考方案1】：

React 中的一个常见流程是 App.js 组件包含所有其他组件和其中的逻辑。所以组件是所有其他组件的容器。

逻辑是然后根据父组件的状态决定要渲染哪些子组件。您可以使用 props 将对象传递给子组件，然后帮助决定要渲染的部分。

请查看此处的示例： https://reactjs.org/tutorial/tutorial.html