点击按钮时如何修改组件中的Prop内容？是否可行及实现方法

可行，但要明确：组件内部不能直接修改传入的Prop（Prop是父组件传递给子组件的只读数据，直接修改会破坏单向数据流逻辑，导致组件状态混乱），正确的实现方式是通过「父组件维护状态 + 子组件触发父组件回调」来间接更新Prop的值。

以下以React框架为例，给出具体实现步骤：

1. 父组件定义状态与回调函数 #

父组件负责维护要传递给子组件的状态，并提供修改该状态的回调函数，将状态和回调一同传给子组件：

import { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  // 定义要传递给子组件的状态
  const [propValue, setPropValue] = useState('初始内容');

  // 定义修改状态的回调函数
  const updateProp = (newContent) => {
    setPropValue(newContent);
  };

  return (
    <div>
      <ChildComponent 
        content={propValue} 
        onUpdateContent={updateProp} 
      />
    </div>
  );
}

export default ParentComponent;

2. 子组件接收Prop与回调，触发更新 #

子组件接收父组件传来的content（即目标Prop）和onUpdateContent回调，点击按钮时调用该回调并传入新值：

function ChildComponent({ content, onUpdateContent }) {
  const handleBtnClick = () => {
    // 点击按钮时调用父组件的回调，传入新的Prop内容
    onUpdateContent('点击按钮后修改的新内容');
  };

  return (
    <div>
      <p>当前Prop内容：{content}</p>
      <button onClick={handleBtnClick}>点击修改Prop内容</button>
    </div>
  );
}

export default ChildComponent;

核心逻辑说明 #

• 父组件是状态的唯一管理者，所有状态更新操作都由父组件完成
• 子组件仅负责触发更新动作（调用回调），不直接修改任何状态
• 这种实现方式遵循单向数据流原则，保证组件间数据流转清晰可追溯

内容的提问来源于stack exchange，提问作者user3410646