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