在 props 更改时重新渲染功能组件

Question

我无法在功能组件中呈现更新的道具。但是，我能够完美地控制台记录这些道具。

我的代码：

class ABC extends someOtherClass {
 static create(value) {
    let node = super.create();
    node.setAttribute('style', 'font-size:100%; color: white');
    node.setAttribute('id', Date.now());
    node.onclick = function(e) {
      HandleComments({ id: e.target.id, render: e.target.id });
    };
    return node;
  }
}

HandleComments 组件

import React from 'react';

const HandleComments = props => {
  console.log('props', props);
  return <div>{props.id}</div>;
};

export default HandleComments;

Answer 1

您在功能组件中使用this.props.id 而不是props.id

const HandleComments = props => {
  console.log('props', props);
  return <div>{props.id}</div>;
};

您还需要渲染 HandleComments 组件，而不是像下面这样将功能实例返回给 onClick 事件或从 someOtherClass 以其他方式返回

class ABC extends someOtherClass {
 static create(value) {
    let node = super.create();
    node.setAttribute('style', 'font-size:100%; color: white');
    node.setAttribute('id', Date.now());
    node.onclick = function(e) {
      ReactDOM.render(<HandleComments id={e.target.id} />, document.getElementById('root'));
    };
    return node;
  }
}