Блог

Я хотел использовать древовидное представление, но я испытываю трудности при построении дерева (иерархического представления информации) в react.

то же, что https://www.w3schools.com/howto/howto_js_treeview.asp

Что я пытаюсь CodeSandbox — https://codesandbox.io/s/unruffled-babbage-9knrz?file=/index.js

JSON — (это не исправлено, может быть в любом формате)

 const data = [
  {
    title: "Node 1",
    childNodes: [
      { title: "Childnode 1.1" },
      {
        title: "Childnode 1.2",
        childNodes: [
          {
            title: "Childnode 1.2.1",
            childNodes: [{ title: "Childnode 1.2.1.1" }]
          },
          { title: "Childnode 1.2.2" }
        ]
      }
    ]
  }
];
  

У меня есть функция переключения, которая расширяет и наоборот узел дерева.
Я изо всех сил пытаюсь построить дерево в react.

Пожалуйста, направьте меня.

Во-первых, вам не нужно использовать <Tree/> в качестве рекурсивного компонента, вместо него используйте <Node/>

Вторая вещь в React вам не нужно использовать querySelector и classList для изменения state компонента.

Я реализовал свою идею в коде здесь

 const Tree = () => {
  return (
    <ul>
      {data.map(({ title, childNodes }) => (
        <Node key={title} title={title} childNodes={childNodes} />
      ))}
    </ul>
  );
};

class Node extends React.Component {
  state = {
    isOpen: false
  };
  toggle = () => {
    this.setState({
      isOpen: !this.state.isOpen
    });
  };
  render() {
    const { title, childNodes } = this.props;
    const { isOpen } = this.state;

    return (
      <li>
        <span className="caret" onClick={this.toggle}>
          {title}
        </span>
        {childNodes amp;amp; isOpen amp;amp; (
          <ul>
            {childNodes.map(({ title, childNodes }) => (
              <Node key={title} title={title} childNodes={childNodes} />
            ))}
          </ul>
        )}
      </li>
    );
  }
}

export default Tree