时间戳

首页 > 解决方案 > 未捕获的类型错误：无法读取未定义的属性“树”

javascript - 未捕获的类型错误：无法读取未定义的属性“树”

问题描述

我正在研究一个组织结构图并希望合并这个库https://github.com/unicef/react-org-chart

它适用于他们的演示，但是当我尝试合并到我自己的应用程序中时，我会收到以下错误

错误：index.js:156 Uncaught TypeError：无法读取未定义的属性“树”

我试图控制台记录属性树和树已经定义如下所示。

有谁知道这是图书馆问题还是我没有正确整合它？

{id: 1, person: {…}, hasChild: true, hasParent: false, isHighlight: true, …}
children: [{…}]
hasChild: true
hasParent: false
id: 1
isHighlight: true
person:
avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/spbroma/128.jpg"
department: ""
id: 1
name: "Jane Doe"
title: "CEO"
totalReports: 1
__proto__: Object
__proto__: Object

这是示例代码（ExtOrgChart.jsx）供参考

import React from 'react';
import './App.css';
import OrgChart from '@unicef/react-org-chart';

const tree = {
  id: 1,
  person: {
    id: 1,
    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/spbroma/128.jpg',
    department: '',
    name: 'Jane Doe',
    title: 'CEO',
    totalReports: 1,
  },
  hasChild: true,
  hasParent: false,
  isHighlight: true,
  children: [
    {
      id: 2,
      person: {
        id: 2,
        avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/spbroma/128.jpg',
        department: '',
        name: 'John Foo',
        title: 'CTO',
        totalReports: 0,
      },
      hasChild: false,
      hasParent: true,
      isHighlight: false,
      children: [],
    }],
};

function ExtOrgChart() {
  console.log(tree);
  return (
    <div className="App">
      <OrgChart tree={tree} />
    </div>
  );
}

export default ExtOrgChart;

标签： javascriptreactjs

解决方案

看起来 lib 本身有一些问题 - https://github.com/unicef/react-org-chart

经过进一步的研究和尝试（例如将 D3 设置为特定版本），它仍然不会显示。建议尝试其他库，例如https://github.com/dabeng/react-orgchart，这可能更容易实现。

推荐阅读