如何动态修改已渲染React元素的idtest属性？

你现在的写法是把React元素直接存在state里，这不符合React的设计逻辑，反而会导致每次修改都要重新创建组件实例。正确的做法是只把需要的数据存在state，渲染时动态生成组件，这样既能实现属性更新，又能让React高效处理渲染：

步骤1：重构State，存储ID而非组件 #

把原来存组件的state改成存idtest的值：

// 原来的写法
// const [currentTest, setCurrentTest] = useState(<PsqMainPanel idtest={idCurrentTest} />);

// 新写法
const [currentTestId, setCurrentTestId] = useState(idCurrentTest);

步骤2：动态渲染组件 #

在模板里直接根据state中的ID渲染PsqMainPanel，不用提前存组件实例：

<li className="nav-item">
  <a className="nav-link" href="#">
    //Main panel with current idtest:
    <PsqMainPanel idtest={currentTestId} />
  </a>
</li>

步骤3：简化属性修改函数 #

点击触发的函数只需要更新state里的ID即可，React会自动把新的idtest传给组件：

const switchTest = (idtest) => {
  setCurrentTestId(idtest);
};

优化：减少组件不必要的重渲染 #

如果想让PsqMainPanel只有在idtest变化时才更新，可以用React.memo包裹组件，避免无关props变化导致的重渲染：

// 定义PsqMainPanel时用memo包裹
const PsqMainPanel = React.memo(({ idtest }) => {
  // 组件内部逻辑和渲染内容
});

这样修改后，React会自动对比新旧idtest的值，只在必要时更新组件，完全符合你“仅修改ID让组件自行更新”的需求，而且不会重新挂载组件，只是更新props。

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