Блог

Главная - Вопросы по программированию - ECharts React: Карта деревьев не расширяется/складывается, если используются крючки

ECharts React: Карта деревьев не расширяется/складывается, если используются крючки

#reactjs #react-hooks #treemap #echarts

Вопрос:

Я внедрил «древовидную карту», используя диаграммы и реакцию. Вот мой код:

 import React, {useState} from "react";
import ReactEcharts from "echarts-for-react";

import './App.css';

const data = {
  "name": "node_1",
  "children": [
    {"name": "node_2"}
  ]
}

function App() {

  const [style, setStyle] = useState({
    height: "100%",
    width: "100%"
  });

  const [options, setOptions] = useState({
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove'
    },
    series: [
      {
        type: 'tree',
        data: [data],
        top: '1%',
        left: '7%',
        bottom: '1%',
        right: '20%',
        symbolSize: 10,
        label: {
          position: 'left',
          verticalAlign: 'middle',
          align: 'right',
          fontSize: 12
        },
        lineStyle: {
            width: 1.5,
            curveness: 0.3,
            color: '#cc0000',
            opacity: .5
          },
        leaves: {
          label: {
            position: 'right',
            verticalAlign: 'middle',
            align: 'left'
          }
        },
        emphasis: {
          focus: 'descendant'
        },
        expandAndCollapse: true,
        animationDuration: 550,
        animationDurationUpdate: 750
      }
    ]
  });

  const [content, setContent] = useState({
    name: "node_1",
  });

  const changeContent = (params) => {
    // setContent({
    //   name: params.name
    // });
    console.log(params.name)

  };

  const onEvents = {
    "click": changeContent
  };
  
  return (
    <div>
      <ReactEcharts option={options} style={style} classNamr="tree" onEvents={onEvents} />
    </div>
  );
}

export default App;

Древовидная карта имеет два уровня (двухуровневая древовидная карта).
С помощью этого onEvent метода фиксируется событие щелчка и changeContent вызывается функция. Эта функция выводит «имя» переданного аргумента «параметры». Поэтому, если щелкнуть по узлу древовидной карты, будет напечатано имя узла. Это прекрасно работает!

Теперь моя проблема:

Как только я определю такое состояние, как это

 const [content, setContent] = useState({
    name: "node_1",
});

и вызовите setContent метод внутри changeContent функции,

 const changeContent = (params) => {
  setContent({
    name: params.name
  });
};

затем древовидная карта по-прежнему запускает события щелчка, но больше не складывается/не расширяется.

Что я здесь делаю не так? Как решить эту проблему?

Метки: ,