首頁猿問如何從類組件（父級）更改功能組件（...

如何從類組件（父級）更改功能組件（子級）中的 useState

JavaScript

喵喵時光機 2023-07-06 11:08:54

在我的父班中，我有以下內容<div> <button onClick(OPEN MODAL)>Open Modal<button/> <ModalReply /> // default to be closed at first</div>ModalReply 是功能組件function ModalReply(props) { const [modalIsOpen, setModalIsOpen] = useState(false)<div> <Modal isOpen={modalIsOpen} onRequestClose={() => setModalIsOpen(false)} > <h1>Test</h1> </Modal></div>我想從我的父類訪問模態狀態組件并將 useState --> setModalIsOpen 設置為 true

查看完整描述

3 回答

慕的地8271018

TA貢獻1796條經驗獲得超4個贊

在父組件中設置 modalState 并將它們作為子組件的 props 傳遞。

在父母中

const [modalIsOpen, setModalIsOpen] = useState(false)

const toggleModal = (val) => setModalIsOpen(val)

...

在兒童時期

function ModalReply(props) {

<div>

<Modal

isOpen={props.modalIsOpen}

onRequestClose={() => props.toggleModal(false)}

</Modal>

</div>

反對回復 2023-07-06

慕哥9229398

TA貢獻1877條經驗獲得超6個贊

將狀態移至父級，使您的 ModalReply 無狀態。

const ModalReply = ({ isOpen, onClose }) => (

<div>

</Modal>

</div>

);

export default function App() {

const [isOpen, setIsOpen] = useState(false);

const toggle = setIsOpen((oldIsOpen) => !oldIsOpen);

return (

<button onClick={toggle}>Open Modal</button>

</div>

);

}

反對回復 2023-07-06

冉冉說

TA貢獻1877條經驗獲得超1個贊

React數據流是單向的，父組件不能直接修改子組件的狀態。為了實現你想要的，你需要：

將狀態移動到父組件并將數據作為 props 傳遞給子組件。
使用 redux 或 mobx 等狀態管理器
使用上下文 API

反對回復 2023-07-06

3 回答
0 關注
145 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何從類組件（父級）更改功能組件（子級）中的 useState

如何從類組件（父級）更改功能組件（子級）中的 useState

3 回答

添加回答