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

Question

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

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

我正在使用React Native Simple router在 View 之间进行更改。

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

我得到了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 -> viewB -> viewB (加载不同的数据) -> 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>

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