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

时间:2016-01-22 10:32:37

标签: javascript view routes react-native

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

我想要实现的目标是"去"或者加载"加载"相同的组件,但传递不同的数据。

我使用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很新,所以如果你们提出另一种方法也可以。

谢谢:)

1 个答案:

答案 0 :(得分: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()来重置数据。