如果您想要回退組件的狀態,您將需要將其存儲在父組件中以便倒回。目前在香草反應中,沒有辦法重新組織的內部狀態,而不在其他地方追蹤它。
所以讓我們說,你有以下組件
class ParentComponent extends React.Component {
getInitialState() {
return({
stateHistory: [
{ name: "foo" },
{ name: "bar" }
{ name: "baz" }
],
stateHistoryIndex: 0
})
},
onRewind() {
this.setState({
stateHistoryIndex: this.state.stateHistoryIndex += 1
});
},
render() {
return(
<div>
<ChildComponent
data={this.state.stateHistory[this.state.stateHistoryIndex]}
handleRewind={this.onRewind}
/>
</div>
)
}
}
class ChildComponent extends React.Component {
render() {
return(
<div>
Hi, my name is {this.props.data.name}
<button onClick={() => this.props.handleRewind()}>Rewind</button>
</div>
)
}
}
,你可以看到,我們需要通過它我們可以通過子控件的索引的狀態存儲在一個父組件和訪問它。