如何管理裁判反应

Question

以下代码是通过React组件创建svg形状。 代码说明：我首先在react组件中进行组合我有一个父 g 节点，之后我有一个子 g 节点，并且每个子节点 g 节点我有svg 路径。 我正在做的是：我正在创造形状，之后我正在改变这种形状。

我必须单独转换每个形状的问题是，如果我们使用父级的状态执行此操作，它将适用于最后一个元素但是我们想要改变第一个元素的转换，即我们想要的调整形状

      var ParentGroupThread = React.createClass({
        getInitialState: function() {
          return {
            path: {}
          };
        },
        render: function() {
          Interfaces.DrawingThreads.ParentGroupThread = this;
          var totalDrawing = Object.keys(this.state.path).length;
          var drawings = [];
          var pathState = this.state.path;
          for (var i = 0; i < totalDrawing; i++) {
            Interfaces.DrawingThreads.ParentThreadRef = pathState[i].ParentThreadId;
            Interfaces.DrawingThreads.ThreadRef = pathState[i].threadIdPath;
            drawings.push(React.createElement(ParentThread, {
              ParentThreadId: pathState[i].ParentThreadId,
              threadIdPath: pathState[i].threadIdPath,
              d: pathState[i].d,
              fillPath: pathState[i].fillPath,
              strokePath: pathState[i].strokePath,
              storkeWidthPath: pathState[i].storkeWidthPath,
              classNamePath: pathState[i].classNamePath,
              dataActionPath: pathState[i].dataActionPath,
              dash: pathState[i].dash
            }));
          }
          return React.createElement('g', {
            id: 'ParentGroupThread',
            key: 'ParentGroupThread_Key'
          }, drawings);
        }
      });

      var ParentThread = React.createClass({
        getInitialState: function() {
          return {
            transformation: ''
          };
        },
        render: function() {
          Interfaces.DrawingThreads.ParentThread[Interfaces.DrawingThreads.ParentThreadRef] = this;
          return React.createElement('g', {
              id: this.props.ParentThreadId,
              key: this.props.ParentThreadId + '_Key',
              ref: this.props.ParentThreadId
            },
            React.createElement(Thread, {
              threadIdPath: this.props.threadIdPath,
              key: this.props.threadIdPath + '_Key',
              d: this.props.d,
              fillPath: this.props.fillPath,
              strokePath: this.props.strokePath,
              storkeWidthPath: this.props.storkeWidthPath,
              transformPath: this.props.transformPath,
              classNamePath: this.props.classNamePath,
              dataActionPath: this.props.dataActionPath,
              transformation: this.state.transformation,
              dash: this.props.dash

            })
          );
        }
      });
      var Thread = React.createClass({
        getInitialState: function() {
          return {
            transformation: ''
          };
        },
        render: function() {
          Interfaces.DrawingThreads.Thread[Interfaces.DrawingThreads.ThreadRef] = this;
          return React.createElement('path', {
            id: this.props.threadIdPath,
            d: this.props.d,
            fill: this.props.fillPath,
            stroke: this.props.strokePath,
            strokeWidth: this.props.storkeWidthPath,
            className: this.props.classNamePath,
            'data-action': 'pathhover',
            strokeDasharray: this.props.dash,
            vectorEffect: 'non-scaling-stroke',
            transformation: this.state.transformation,
            ref: this.props.threadIdPath
          });
        }
      });

      ReactDOM.render(React.createElement(ParentGroupThread), document.getElementById('threads'));