通过按下按钮加载具有不同数据的相同组件

Question

我的React Native应用程序有一些不同的视图。

我想要实现的目标是＆＃34;去＆＃34;或者加载＆＃34;加载＆＃34;相同的组件，但传递不同的数据。

我使用React Native Simple router来更改视图。

我会尝试用一个例子来解释它。

我有 viewA.js ：

...

var viewB = require('./viewB');

...

goToViewB: function(id){
    this.props.toRoute({
      name: "View B",
      component: viewB,
      passProps: { id: id },
    });
  },

...

<TouchableHighlight onPress={ this.goToViewB.bind(this, 10) } underlayColor="transparent">
    <Text>Go to View B</Text>
</TouchableHighlight>

...

在 viewB.js

上

...

var viewB = require('./viewB');

...

goToViewB: function(id){
    this.props.toRoute({
      name: "View B",
      component: viewB,
      passProps: { id: id },
    });
  },

...

<TouchableHighlight onPress={ this.goToViewB.bind(this, 20) } underlayColor="transparent">
    <Text>Go to View B with different data</Text>
</TouchableHighlight>

...

我希望这个例子更好地解释它。

我去 viewA - ＆gt; viewB - ＆gt; viewB （加载不同的数据） - ＆gt; viewB （加载不同的数据）....

我对React Native很新，所以如果你们提出另一种方法也可以。

谢谢：）

Answer 1

如果要在不重新加载路径的情况下重新加载View b中的数据，可以这样做：

<强> viewB.js

getInitialState() {
    return {
        data: ''
    }
},

componentWillMount() {
  this.setState({
    data: this.props.id
  })
},

changeData(data) {
  this.setState({
     data: data
  })
},

<TouchableHighlight onPress={ () => this.changeData('70') } underlayColor="transparent">
    <Text>{ this.state.data }</Text>
</TouchableHighlight>

如您所见，当组件安装时，它会在状态中设置道具数据。这样，当您需要更改数据时，可以调用 this.setState（）来重置数据。