我正在尝试根据其父项对 Prop 的更新重新渲染一个组件。但是除非我使用 forceUpdate() 否则我无法让组件自行重新渲染。
这是我更新组件并将其传递给子组件的组件:
var StoryContainer = React.createClass({
propTypes: {
currentItem: React.PropTypes.number.isRequired
},
componentWillMount: function(){
metrics.currentItem = 0;
metrics.nextItem = 2;
},
handleClick: function(ctx){
metrics.currentItem++;
metrics.nextItem++;
var data = this.props.data.slice(metrics.currentItem, metrics.nextItem);
data[0].idx = metrics.currentItem
data[1].idx = metrics.nextItem - 1;
console.log(ctx);
ctx.props.data = data;
ctx.props.idx = metrics.currentItem;
// this.forceUpdate();
},
render: function(){
return (
<StoryItems data={this.props.data.slice(metrics.currentItem,metrics.nextItem)} onChange={this.handleClick} />
)
}
});
这是我要将更新的 Prop 传递给的类(class)。
var StoryItems = React.createClass({
componentWillReceiveProps: function(nextProps){
console.log(nextProps);
},
componentWillMount: function(a){
console.log('StoryItems:componentWillMount', a);
},
componentDidMount: function(a){
console.log('StoryItems:componentDidMount', a);
},
shouldComponentUpdate: function(nextProps){
console.log('StoryItems:shouldComponentUpdate', nextProps);
return true;
},
render: function(){
return (
<View style={styles.wrapper}>
<Story data={this.props.data[1]} onChange={this.handleItemUnmount} />
<Story data={this.props.data[0]} onChange={this.handleItemUnmount} />
</View>
);
},
handleItemUnmount: function(ctx){
// console.log('here', ctx);
this.props.onChange(this);
},
});
module.exports = StoryItems;
有人能发现问题吗?在这里 react n00b。
最佳答案
当 StoryContainer.handleClick
被调用时,没有做任何事情来告诉 React 您需要重新渲染 StoryContainer
,这是将新 Prop 发送到 StoryItems 的原因
。你正在改变 React 不知道的 metrics
变量,所以 React 不知道要重新渲染任何东西。
您应该在 StoryContainer
组件上将 metrics
变量保持为 state
,然后使用 setState
更新它.在 StoryContainer
上调用 setState
将告诉 React 重新渲染它(因为它的状态已经改变)并且将新的 Prop 传递给 StoryItems
.
关于javascript - 组件不更新 Prop 更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30028086/