如何使用函数 this.state 将变量发送到反应的其他组件

Question

i still beginner for react and i want to use this function this.state to send variable to other component我仍然是反应的初学者，我想使用这个函数this.state将变量发送到其他组件

here is my code.这是我的代码。 this is my index.html file code这是我的 index.html 文件代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" >
    <link rel="stylesheet" href="catalog/view/theme/default/template/account/purpletree_multivendor/buynow/checkout.css" /> 
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    
  </head>
  <body>
    <div id="root"></div>  

    <script type="text/babel" src="catalog/view/theme/default/template/account/purpletree_multivendor/buynow/App.js"></script>
    <script type="text/babel">
        ReactDOM.render(<App />, document.getElementById("root"));
    </script> 
  </body>
</html>

i build file name App.js我建立文件名 App.js

class Login extends React.Component {

  constructor(props) { 
    super(props);
    this.state = {
        skipButton: false
    };
    
  }

  changeSkipPage = () => {
    this.setState = {skipButton: true},
    <Home handleClick={this.setState.skipButton} />
  }
  
  render() {
    return (  
        <div>   
            <a onClick={this.changeSkipPage}>
                <span> Skip Login</span>
            </a> 
        </div>  
      )
  }
}

 
class Welcome extends React.Component { 
    render() {
      return (  
          <div>   
              Welcome World
          </div>  
        )
    }
  }

 
class Home extends React.Component {
  constructor(props) {  
   
    super(props); 
   
    console.log(props)
    
  } 

  render() {   
    return ( 
        // set condition if can get variable handleClick is true. will have condition to change other page 
        // if(variable handleClick is true) {
        //     will call page <Welcome />
        // }else{
        //     still login page
        // }
      )
  }
}

so what was i tried to do is, class Home is combine component from class Login and class Welcome .所以我想做的是， Home类是Login类和Welcome类的组合组件。 first display is class Login if condition is user click skip button, class Home the display will change to class Welcome第一个显示是类Login如果条件是用户单击跳过按钮，类Home显示将更改为类Welcome

but above code not work.但上面的代码不起作用。 it not send the variable from class Login when click skip button to class Home当单击跳过按钮到类Home时，它不会从类Login发送变量

please help.请帮忙。

Answer 1

You can do this by passing state to child component and it is ok with small apps.您可以通过将状态传递给子组件来做到这一点，小型应用程序也可以。

If what you are building is not small then it's recommended to use global state like Redux.如果您正在构建的内容不小，那么建议使用像 Redux 这样的全局状态。

One more thing.还有一件事。 it is good to know how class component and it's life cycle hooks work, but it's recommended to use functional components with hooks了解类组件及其生命周期钩子是如何工作的很好，但建议使用带钩子的功能组件

Best of luck祝你好运

如何使用函数 this.state 将变量发送到反应的其他组件

问题描述

1 个解决方案

解决方案1
0 2022-06-19 00:04:02

如何使用函数 this.state 将变量发送到反应的其他组件

问题描述

1 个解决方案

解决方案1 0 2022-06-19 00:04:02

解决方案1
0 2022-06-19 00:04:02