Question

我无法在功能组件中渲染更新的道具。但是，我能够完美地console.log这些道具。

我的代码：

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组件，而不是像下面那样或从someOtherClass中以其他方式将功能实例返回给onClick事件

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;
  }
}

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

1 个答案: