Javascript 从不同类访问变量

如何从不同的类

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;

---

你应该换一种想法

尝试通过GET方法读取变量，并通过set方法进行设置。 不要尝试立即调用该变量

---

希望这有帮助。

您需要通过道具传递它

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;

从“React”导入React；
从“/UserAuthentication/UserAuthenticationUI”导入UserAuthenticationUI；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.userAuthenticationUI=React.createRef（）；
this.setParentState=this.setParentState.bind（this）；
此.state={
testState:“测试消息”
};
}
setParentState（newStateValue）{//这是从子组件调用的
这是我的国家({
testState:newStateValue
})
};
render（）{
返回(
);
}
}
导出默认应用程序；

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;

从“React”导入React；
从“./App”导入应用程序；
类UserAuthenticationUI扩展了React.Component{
建造师（道具）{
超级（道具）；
this.app=React.createRef（）；
this.onClick=this.onClick.bind（this）；
}
onClick（）{
const newStateValue='新的父状态值'；
if（typeof this.props.setParentState！==“未定义”）{
this.props.setParentState（newStateValue）；
}
}
render（）{
const stateProps=this.props.stateVariable；
返回(
{console.log（stateProps）}
);
}
}
导出默认UserAuthenticationUI；

您可以通过道具传递它：

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;

从“React”导入React；
从导入UserAuthenticationUI
“./UserAuthentication/UserAuthenticationUI”；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.userAuthenticationUI=React.createRef（）；
这个州={
testState:“测试消息”
}
}
render（）{
返回(
)}
}
导出默认应用程序；

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;

从“React”导入React；
从“../App”导入应用程序；
类UserAuthenticationUI扩展了React.Component
{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{console.log（this.props.testState）}
)}
}
导出默认UserAuthenticationUI；

您可以通过道具访问：

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

并在UserAuthenticationUI类中访问它：

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

{console.log（this.props.testState）}

理论上，您可以使用Classname.state.statename，但我推荐这种方法的案例并不多。->在您的情况下，我建议使用道具。如何设置状态？您可以将回调函数作为道具从父组件传递到子组件，以从子组件在父组件中设置状态@你能写一个例子吗？我已经更新了答案以反映同样的情况。假设应用程序为父组件，UIComponent为子组件@Bobek加载时添加到子应用程序冻结如何从UserAuthenticationUI设置应用程序中的状态？

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