Javascript 按一个按钮，用不同的数据加载相同的组件

我得到了一些不同视图的React原生应用程序

我想要实现的是“去”或“加载”相同的组件，但传递不同的数据

我习惯于在视图之间切换

我试着用一个例子来解释

我得到了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>

...

。。。
var viewB=需要（'./viewB'）；
...
goToViewB:函数（id）{
这是道具({
名称：“视图B”，
组件：viewB，
passProps:{id:id}，
});
},
...
转到视图B
...

在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>

...

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>

。。。
var viewB=需要（'./viewB'）；
...
goToViewB:函数（id）{
这是道具({
名称：“视图B”，
组件：viewB，
passProps:{id:id}，
});
},
...
转到具有不同数据的视图B
...

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

我转到viewA->viewB->viewB（加载不同的数据）->viewB（加载不同的数据）

我对React Native非常陌生，所以如果你们建议另一种方法也可以

---

谢谢：）

如果要在视图b中重新加载数据而不重新加载路由，可以通过以下方式进行：

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>

...

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>

getInitialState（）{
返回{
数据：“”
}
},
组件willmount（）{
这是我的国家({
数据：this.props.id
})
},
变更数据（数据）{
这是我的国家({
数据：数据
})
},
this.changeData（'70'）}underlayColor=“transparent”>
{this.state.data}

---

如您所见，当组件挂载时，它将道具数据设置为状态。这样，当您需要更改数据时，可以调用this.setState（）重置数据。

谢谢！我认为我同意你的解决方案，但是，我只想知道，你认为有什么方法可以实现我所说的吗？转到同一组件，但传递不同的数据。谢谢。你说的转到同一个组件是什么意思？是否要重新加载该组件？如果是这样的话，您是希望它闪烁，还是希望显示组件重新加载的效果？例如，正如我所说，我正在使用React Native Simple router在我的应用程序中的组件之间导航。加载其他组件时，会出现“滑动”效果。我想要这样的东西。这是因为我想“加载”相同的组件，但数据不同，以获得这种效果。谢谢