Загрузите тот же компонент с разными данными, нажав кнопку

Question

Я получил свое приложение 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 ->viewB ->viewB (загрузка различных данных) ->viewB (загрузка различных данных) ....

Я довольно новое с React Native , поэтому, если вы, ребята, предложите другой подход, все будет в порядке.

Спасибо :)

Answer 1

Если вы хотите, чтобы перезагрузить данные в View б без перезагрузки маршрут, вы можете сделать это следующим образом:

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() для сброса данных.