如何使用函數 this.state 將變量發送到反應的其他組件

Question

我仍然是反應的初學者，我想使用這個函數this.state將變量發送到其他組件

這是我的代碼。 這是我的 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>

我建立文件名 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
        // }
      )
  }
}

所以我想做的是， Home類是Login類和Welcome類的組合組件。 第一個顯示是類Login如果條件是用戶單擊跳過按鈕，類Home顯示將更改為類Welcome

但上面的代碼不起作用。 當單擊跳過按鈕到類Home時，它不會從類Login發送變量

請幫忙。

Answer 1

您可以通過將狀態傳遞給子組件來做到這一點，小型應用程序也可以。

如果您正在構建的內容不小，那么建議使用像 Redux 這樣的全局狀態。

還有一件事。 了解類組件及其生命周期鈎子是如何工作的很好，但建議使用帶鈎子的功能組件

祝你好運

如何使用函數 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