Question

我想使用树形视图，但是我正在努力构建反应中的树形结构（信息的分层视图）。

与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" }
        ]
      }
    ]
  }
];

我具有切换功能，该功能可以扩展树节点，反之亦然。我正在努力构建反应中的树。

请指导我。

Answer 1

首先，您不需要使用<Tree/>作为递归组件，而不必使用<Node/>

React中的第二件事，您不需要使用querySelector和classList来更改组件的state。

我已经在代码here中实现了我的想法

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 && isOpen && (
          <ul>
            {childNodes.map(({ title, childNodes }) => (
              <Node key={title} title={title} childNodes={childNodes} />
            ))}
          </ul>
        )}
      </li>
    );
  }
}

export default Tree

努力构建反应中的树层次结构

1 个答案: