如何从 react-d3-tree 调用节点的 onclick 组件答案

【问题标题】：How to call component on onclick of node from react-d3-tree如何从 react-d3-tree 调用节点的 onclick 组件
【发布时间】：2020-03-02 20:16:40
【问题描述】：

        class WorkflowDesign extends React.PureComponent {
          state = {};

          componentDidMount() {
            const dimensions = this.treeContainer.getBoundingClientRect();
            this.setState({
              translate: {
                x: dimensions.width / 2,
                y: dimensions.height / 2
              }
            });
          }


          render() {
            return (
              <div style={containerStyles} ref={tc => (this.treeContainer = tc)}>
                <Tree
                  data={this.props.data}
                  translate={this.state.translate}
                  orientation={'vertical'}
                  collapsible={false}
                  directed={false}
                  onClick={(nodeData, evtData) => {
                    if (nodeData.type === 'FLOW') {
                      this.props.getFlowNodeStartId(nodeData);
                    }
                    return;
                  }}

                  allowForeignObjects
                  nodeLabelComponent={{
                    render: <CollapsedBreadcrumbs data={this.props.breadcrumbtartNodeId} />,
                    foreignObjectWrapper: {
                      y: 24
                    }
                  }
                  }

                />
              </div>
            );
          }
        }

我尝试使用 [react-d3-tee][1] 但它不允许我在 onclick 中调用组件，所以请帮助我在某些条件下如何在 onclick 上调用组件，我在上面的代码中提到了

我想在 onclick 上调用组件，我在某些条件下编写了 onclick 函数

      [1]: https://www.npmjs.com/package/react-d3-tree

【问题讨论】：

你是什么意思它不允许你？点击后会发生什么？
当我点击节点时，如果“nodeData.type === 'FLOW'”为真，那么它将调度一个动作，直到现在它还可以。但是当上述条件为真时，我也想调用组件“”
你“想调用一个组件”是什么意思？组件不被调用，它们只是以声明的方式呈现，而不是强制的。

标签： javascript reactjs react-d3

【解决方案1】：

我就是这样做的：

    handleClick = (nodeData, evt) => {
       console.log(nodeData, evt);
     }

在树中

    onClick={this.handleClick}

【讨论】：

【解决方案2】：

我猜你要找的道具是onNodeClick

<Tree 
    data = {this.props.data} 
    onNodeClick = {this.handleClick.bind(this)} 
/>

你可以像这样使用它：

handleClick(nodeData, evtData){
    // your code 
    if (nodeData.type === 'FLOW') {
         this.props.getFlowNodeStartId(nodeData);
    }
    return;
}

您可以在the documentation here 中找到更多信息。

【讨论】：