React Native-不同JS文件之间的setState

Question

我想setState从A组件到B组件。 A和B是不同的JS文件。 我试图将B导入A并访问B的函数。 也使B的函数变为静态，然后仅找出静态函数没有实例，因此我无法以静态方式访问this 。

A.js

import B from '../B';
class A extends React.Component {
    ChangeBContent(){
        B.SetContent();
    }

    render(){
        return(
            <View>
                <SpeicalBtn onPress={()=> this.ChangeBContent()}/>
            </View>
        );
    }
}

module.exports = A;
AppRegistry.registerComponent('myApp', () => A);

B.js

class B extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            content:''
        }
    }

    SetContent(){
        this.setState({content:'123'});
    }

    render(){
        return(
            <View>
              <Text>{this.state.content}</Text>
            </View>
        );
    }
}

module.exports = B;
AppRegistry.registerComponent('myApp', () => B);

Answer 1

您可以做一些恶作剧，但我认为您需要更清洁的方法。

在这里，您将使用状态管理库（例如redux），那里有一个全局存储，并调度动作。 您可以查看此stackoverflow 帖子

Answer 2

您应该将它们包装到另一个容器组件中。

ContentC.js

    class ContentC extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
            contentA:'',
            contentB: ''
        }
    }
    SetContentA(){
        this.setState({contentA:'123'});
    }
    SetContentB(){
        this.setState({contentB:'123'});
    }
    render(){
      return(
         <ClassA content={this.state.contentA} />
          <ClassB content={this.state.contentB}/>
        );
      }
    }

现在，您可以将内容与props.contentA和props.contentB