我可以更新道具的状态吗

Question

我是React的新手。我们能改变道具的状态吗？例如，我有两段代码

App.js

import React, { useState } from 'react' 
import Print from '../components/Print/print'
const [text, setText] = useState("Hi");
<Print text = {text} />

print.js

import React, { useState } from 'react'
const Print = (props) => {
return(
<p>props</p>
)
export default Print

有没有办法改变道具的状态，即使用print.js中的useState()来更新状态。例如，我们可以在print.js中做一些类似setText(prop)的事情吗。如果不是这样，那么如何触发App.js中变量tech从print.js的状态更改？

Answer 1

您不能也不应该尝试直接在子组件中更改道具的状态或值。对于更改道具，您可以将函数作为道具传递，然后将新值发送给该函数。因此，该函数将把你的道具更改为父组件，并进一步传递给它的子组件。

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

在您的子组件中，使用新值调用此changeText函数。

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

仅供参考，{props}是一个数组，您可以通过{props.text}访问文本

Answer 2

你可以试试这个

• 通过道具传递print.js中的text和setText
• 然后使用setText更新组件的状态