從不同的類訪問變量

Question

如何從不同的類UserAuthentication訪問狀態變量testState ？

我嘗試了這個沒有成功：

import React from 'react';
import UserAuthenticationUI from './UserAuthentication/UserAuthenticationUI';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.userAuthenticationUI = React.createRef();
    this.state={
      testState: 'test message'
    }
  }

  render() {
    return(
      <div>
        <UserAuthenticationUI ref={this.userAuthenticationUI} />
      <div>
    )
  }
}

export default App;

如何從類UserAuthenticationUI訪問this.state.teststate ？

import React from "react";
import App from '../App';

class UserAuthenticationUI extends React.Component {
  constructor(props) {
    super(props);
    this.app = React.createRef();
  }

  render() {
    return(
      <div>
        <App ref={this.app} />
          {console.log(this.state.testState)}
      </div>
    )
  }
}

export default UserAuthenticationUI;

Answer 1

你應該換個角度。

嘗試通過GET方法讀取變量，並通過SET方法進行設置。 不要嘗試立即調用變量

希望這可以幫助。

Answer 2

您需要通過道具傳遞它。

import React from "react";
import UserAuthenticationUI from "./UserAuthentication/UserAuthenticationUI";

    class App extends React.Component {
      constructor(props) {
        super(props);
        this.userAuthenticationUI = React.createRef();
        this.setParentState = this.setParentState.bind(this);
        this.state = {
          testState: "test message"
        };
      }
      setParentState(newStateValue){ // this is called from the child component
          this.setState({
              testState: newStateValue
          })
      };

      render() {
        return (
          <div>
            <UserAuthenticationUI
              stateVariable={this.state.testState}
              ref={this.userAuthenticationUI}
              setParentState={this.setParentState}
            />
          </div>
        );
      }
    }
    export default App;

UserAuthenticationUI：

import React from "react";
import App from "../App";

class UserAuthenticationUI extends React.Component {
  constructor(props) {
    super(props);
    this.app = React.createRef();
    this.onClick = this.onClick.bind(this);
  }
  onClick(){
      const newStateValue = 'new parent state value';
      if(typeof this.props.setParentState !== 'undefined'){
        this.props.setParentState(newStateValue);
      }
  }
  render() {
    const stateProps = this.props.stateVariable;
    return (
      <div>
        <App ref={this.app} />
        <div onClick={this.onClick} />
        {console.log(stateProps)}
      </div>
    );
  }
}

export default UserAuthenticationUI;

Answer 3

您可以通過道具傳遞它：

import React from 'react';
import UserAuthenticationUI from 
'./UserAuthentication/UserAuthenticationUI';

      class App extends React.Component {
          constructor(props) {
            super(props);


            this.userAuthenticationUI = React.createRef();

           this.state={

               testState: 'test message'
               }
        }

    render(){
    return(
    <div>
    <UserAuthenticationUI testState={this.state.testState} />
    <div>
        )}
    }
    export default App;

UserAuthenticationUI：

   import React from "react";
   import App from '../App';

     class UserAuthenticationUI extends React.Component 
    {
        constructor(props){
            super(props);


        }

        render(){
    return(
       <div>
            <App/>
            {console.log(this.props.testState)}
      </div>
    )}
    }

    export default UserAuthenticationUI;

Answer 4

您可以通過道具訪問它：

<div>
   <UserAuthenticationUI testState={this.state.testState} ref={this.userAuthenticationUI} />
<div>

並在UserAuthenticationUI類中訪問它：

  <div>
        <App ref={this.app} />
        {console.log(this.props.testState)}
  </div>