在React中,props是只讀的,不能直接修改。但是可以通過父組件修改props的值。
下面是一個示例:
// 父組件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const [propValue, setPropValue] = useState('initial value');
const handleButtonClick = () => {
// 修改propValue的值
setPropValue('new value');
};
return (
<div>
<ChildComponent propValue={propValue} />
<button onClick={handleButtonClick}>修改props的值</button>
</div>
);
}
export default ParentComponent;
// 子組件
import React from 'react';
function ChildComponent(props) {
return <div>{props.propValue}</div>;
}
export default ChildComponent;
在上面的示例中,父組件ParentComponent
中定義了一個statepropValue
,用于保存需要修改的props值。父組件還定義了一個函數handleButtonClick
,當按鈕被點擊時會調用該函數,從而修改propValue
的值。然后將修改后的值通過props傳遞給子組件ChildComponent
進行渲染。
當按鈕被點擊時,子組件中的props值會更新,從而觸發子組件的重新渲染,顯示修改后的值。