在 React 中,父組件的狀態是可以通過 props 傳遞給子組件的。當子組件需要修改父組件的狀態時,可以通過在子組件中調用父組件傳遞過來的回調函數來實現。
以下是一個示例:
// 父組件
class ParentComponent extends React.Component {
state = {
count: 0
};
// 用于更新父組件的狀態的回調函數
updateCount = (newCount) => {
this.setState({ count: newCount });
};
render() {
return (
<div>
<ChildComponent updateCount={this.updateCount} />
<p>Count: {this.state.count}</p>
</div>
);
}
}
// 子組件
class ChildComponent extends React.Component {
handleClick = () => {
// 調用父組件傳遞過來的回調函數來更新父組件的狀態
this.props.updateCount(10);
};
render() {
return (
<button onClick={this.handleClick}>Update Count</button>
);
}
}
在上述示例中,父組件的狀態 count
通過 updateCount
回調函數傳遞給子組件 ChildComponent
,子組件中的 handleClick
方法可以調用 updateCount
函數來修改父組件的狀態。