React函数组件Props更新后无法渲染，但可正常打印Props求助

嘿，我明白你碰到的这个头疼问题了——HandleComments组件明明能在控制台里打出更新后的props，但页面上就是死活不渲染新内容，对吧？咱们来拆解下问题根源，再一步步搞定它。

问题出在哪？ #

先看你写的ABC类里的create方法：你是用原生DOM API创建节点，然后给onclick绑定了HandleComments({ id: e.target.id, render: e.target.id })。这里的核心问题是：你只是直接调用了HandleComments这个函数，而不是把它作为React组件纳入React的渲染流程里。

直接调用函数只会执行函数里的代码（比如打印props），但完全没让React接管这个组件的挂载、更新生命周期——React根本不知道这个组件的存在，自然不会在props变化时触发重新渲染。

怎么修复？ #

我们需要让React来管理HandleComments的渲染和更新，核心思路是用React状态来控制props的传递，让状态变化触发组件重渲染。这里给你一个完整的修改方案：

1. 调整ABC类，让它通过回调触发状态更新

class ABC extends someOtherClass {
  static create(onCommentClick) {
    let node = super.create();
    node.setAttribute('style', 'font-size:100%; color: white');
    node.setAttribute('id', Date.now());
    node.onclick = function(e) {
      // 调用传入的回调，把点击事件的id传递出去
      onCommentClick({ id: e.target.id, render: e.target.id });
    };
    return node;
  }
}

2. 用父组件管理状态，控制HandleComments的渲染

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import HandleComments from './HandleComments';

const ParentComponent = () => {
  // 用状态存储要传递给HandleComments的props
  const [activeCommentProps, setActiveCommentProps] = useState(null);

  // 组件挂载时创建ABC节点并添加到DOM
  useEffect(() => {
    const abcNode = ABC.create(setActiveCommentProps);
    document.body.appendChild(abcNode);
    
    // 组件卸载时清理DOM节点
    return () => {
      document.body.removeChild(abcNode);
    };
  }, []);

  return (
    <div>
      {/* 只有当状态存在时，才渲染HandleComments组件 */}
      {activeCommentProps && <HandleComments {...activeCommentProps} />}
    </div>
  );
};

// 把父组件挂载到React根节点
ReactDOM.render(<ParentComponent />, document.getElementById('root'));

3. 你的HandleComments组件可以保持不变

import React from 'react';
const HandleComments = props => {
  console.log('props', props);
  return <div>{props.id}</div>;
};
export default HandleComments;

为什么这样改就有效？ #

• 我们让ABC类的点击事件触发父组件的状态更新，而状态是React追踪的核心——一旦activeCommentProps变化，React会自动重新渲染父组件，连带更新HandleComments的props。
• 现在HandleComments是通过JSX渲染的，属于React的DOM树一部分，React会负责它的挂载、更新和卸载，props变化时自然会重新渲染页面内容。

额外提醒 #

如果之后你遇到类似的“props打印了但不渲染”问题，还可以检查这两点：

• 确保props的引用确实发生了变化：如果传递的是对象/数组，即使内容变了但引用没改（比如直接修改原对象），React会认为props没更新。这种情况可以用useMemo或者创建新的对象来解决。
• 永远不要用原生DOM操作来渲染React组件，一定要通过JSX或者React提供的API（比如ReactDOM.createPortal）让React管理组件生命周期。

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