我可以更新道具的 state

Question

我是 React 新手。 我們可以更改道具的 state 嗎？ 例如，我有 2 段代碼

應用程序.js

import React, { useState } from 'react' 
import Print from '../components/Print/print'

const [text, setText] = useState("Hi");

<Print text = {text} />

打印.js

import React, { useState } from 'react'

const Print = (props) => {
    return(
            <p>props</p>
   )

export default Print

有沒有辦法改變prop的state，即在print.js中使用useState()來更新state。 例如，我們可以在print.js中執行類似setText(prop)的操作。 如果不是這樣，那么您將如何觸發從 print.js 更改為print.js中的可變tech的App.js ？

Answer 1

你可以試試這個

• 通過 props 傳遞 print.js 中的 text 和 setText
• 然后使用 setText 更新組件的 state

Answer 2

您不能也不應該嘗試直接在子組件中更改 state 或道具的值。 要更改道具，您可以將 function 作為道具傳遞，然后將新值發送到該 function。 因此 function 會將您的道具更改為父組件，並將進一步傳遞給其子組件。

<Print text = {text} changeText = {(newVal) => setText(newVal)}/>

並在您的子組件中使用新值調用此changeText function。

 return (
   <>
    <p>{props.text}</p>
    <div onClick={props.changeText('Hello')}>Change Text</div>
   </>
 );

僅供參考， {props}是一個數組，您可以通過{props.text}訪問文本