Reactjs 如何从另一个文件获取类的状态

我试图从另一个类获取一个类的状态，但它抛出了一个错误“无法读取未定义的属性'state'od”。我的方法是，当用户按下按钮时，“FromStr”状态从A重定向到另一个B类

import React, { Component } from "react";
import { StyleSheet, Text, View, TextInput, Button } from "react-native";
import styles from "./appstyles";
import {getValue} from "./main"

export default class A extends Component{
  constructor (props) {

    super(props)
    this.state={
        From:'',
        FromStr:'',   
    }
  }

 changeText=(From)=>{
  this.setState({From})

 }

 onPress = ()=>{
   this.setState({FromStr: this.state.From})
   this.fetch()
 }
 fetch(){
   getValue();
} 

render(){

return (
<View>
    <View style={styles.inputFields}>
    <TextInput placeholder="From" id="from" style={styles.fromField} onChangeText={this.changeText} />
  <View style={styles.buttonStyle}>
  <Button
      title={"Go Back"}
      color="#f194ff"
      onPress={this.onPress}

  ></Button> 
);
}
}

Class B
import React, { Component } from "react";
export function getValue(){
  alert(this.state.FromStr);
}

import React，{Component}来自“React”；
从“react native”导入{样式表、文本、视图、文本输入、按钮}；
从“/appstyles”导入样式；
从“/main”导入{getValue}
导出默认A类扩展组件{
建造师（道具）{
超级（道具）
这个州={
从：“”，
FromStr:“”，
}
}
changeText=（From）=>{
this.setState（{From}）
}
onPress=（）=>{
this.setState（{FromStr:this.state.From}）
this.fetch（）
}
fetch（）{
getValue（）；
} 
render（）{
返回(
);
}
}
B类
从“React”导入React，{Component}；
导出函数getValue（）{
警报（this.state.FromStr）；
}

您可以将A类的this定义为其容器内的全局。然后，从B类调用它。例如

//class A constructor
constructor(props){
    super(props);

    global.__classAThis = this;
}

//class B constructor
 constructor(props){
    super(props);

    console.log(__classAThis);

    //also you can update class A this
    __classAthis.setState({test: true})
}

---

您可以将A类的this定义为其容器中的全局类。然后，从B类调用它。例如

//class A constructor
constructor(props){
    super(props);

    global.__classAThis = this;
}

//class B constructor
 constructor(props){
    super(props);

    console.log(__classAThis);

    //also you can update class A this
    __classAthis.setState({test: true})
}

---

通过直接访问在组件之间共享状态是一种反模式。每个组件都应该有自己的状态。如果您需要全球，请考虑使用ReDux。 作为道具传递状态也是有效的，但它仅在组件处于父子顺序时才起作用。Redux允许更新与其关系无关的组件

如前所述，将状态作为道具传递给孩子

class classname2 extends React.Component {
  this.state = { statename1: "lala" };
  render() {
    return <classname1 statename1={this.state.statename1} />
  }
};

class classname1 extends React.Component {
  render() {
    return (
       <div>{this.props.statename1}</div>
    );
  }
};

类classname2扩展了React.Component{
this.state={statename1:“lala”}；
render（）{
返回
}
};
类classname1扩展了React.Component{
render（）{
返回(
{this.props.statename1}
);
}
};

通过直接访问在组件之间共享状态是一种反模式。每个组件都应该有自己的状态。如果您需要全球，请考虑使用ReDux。 作为道具传递状态也是有效的，但它仅在组件处于父子顺序时才起作用。Redux允许更新与其关系无关的组件

如前所述，将状态作为道具传递给孩子

class classname2 extends React.Component {
  this.state = { statename1: "lala" };
  render() {
    return <classname1 statename1={this.state.statename1} />
  }
};

class classname1 extends React.Component {
  render() {
    return (
       <div>{this.props.statename1}</div>
    );
  }
};

类classname2扩展了React.Component{
this.state={statename1:“lala”}；
render（）{
返回
}
};
类classname1扩展了React.Component{
render（）{
返回(
{this.props.statename1}
);
}
};

有很多方法可以做到这一点。最简单的方法是使用

LocalStorage

用法

屏幕

this.setState（{FromStr:this.state.From
}，（）=>localStorage.setItem（'FromStr'，this.state.From））；

B屏幕

componentDidmount（）{
const data=localStorage.getItem（'FromStr'）
警报（数据）；
}

有很多方法可以做到这一点。最简单的方法是使用

LocalStorage

用法

屏幕

this.setState（{FromStr:this.state.From
}，（）=>localStorage.setItem（'FromStr'，this.state.From））；

B屏幕

componentDidmount（）{
const data=localStorage.getItem（'FromStr'）
警报（数据）；
}

全局变量的使用非常广泛，但是将类A的完整“this”传递给类B会影响应用程序的性能，对吗？这有责任吗？您可以只将类状态存储为全局变量，这取决于您自己。我正在使用上面的方法，我没有遇到任何性能损失。全局变量的使用非常广泛，但是将类A的完整“this”传递给类B会影响应用程序的性能，对吗？这有责任吗？您可以只将类状态存储为全局变量，这取决于您自己。我正在使用上面的方法，我没有遇到任何性能损失。