Question

我知道有几个问题就像这样，但相信我没有人解决这个问题。主要区别在于我尝试更新嵌套组件。

import React from 'react';
import Events from './Events.js'
import EventType from '../events/EventType.js'
import PropertiesPanelStyle from './css/PropertiesPanel.css';
import JointProperties from './properties/JointProperties.jsx';

export default class extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      name: "Properties",
      visible: false,
      display: undefined
    }
    Events.on(EventType.JOINT_CLICK, this.onJointClick.bind(this));
  }

  onJointClick(clickedJoint) {
    console.log("CLICKED ",clickedJoint);
    this.setState({
      display: <JointProperties joint={clickedJoint}/>,
      visible: true
    });
  }

  render () {

    if(!this.state.visible)
      return (<div></div>);

    return  (<div>
      <div id="properties">
        <strong>{this.state.name}</strong>
        <div id="propertiescontent" key={1}>
          { this.state.display }
        </div>
       </div>
    </div>);
  }
}

每当我点击时，我得到一个新的关节作为参数，并将显示设置为JointProperties以显示该关节。每当我进行第一次单击时，它都会正确显示，但每当我进行第二次单击时，它仍会显示第一个关节（并且不会再次调用JointProperties组件的构造函数）

根据我点击的内容，我会得到不同的渲染，至少这是我最初的想法。但是，如果我在这里缺少什么，那就是idk :(

React Simple Re-Rendering - setState不重新渲染？

0 个答案: