拡張可能なオブジェクトツリービュー：React データ可視化のマスター

はじめに

この実験では、React で拡張可能なオブジェクトツリービューを作成する方法を学びます。このコンポーネントは、構造化された折りたたみ可能な形式で複雑なデータ構造を表示するのに役立ちます。JSON オブジェクトまたは配列のツリービューを折りたたみ可能なコンテンツとともにレンダリングするために、useState フックと再帰を使用します。この実験が終了すると、データを明確かつ整理された方法で表示するためのツリービューコンポーネントを作成およびカスタマイズできるようになります。

拡張可能なオブジェクトツリービュー

VM には既に index.html と script.js が用意されています。一般的には、script.js と style.css にのみコードを追加する必要があります。

次のコードは、JSON オブジェクトまたは配列の折りたたみ可能なツリービューをレンダリングします。useState() フックを使用して isToggled という状態変数を作成することで、toggled プロップを渡すことでコンテンツの初期状態（折りたたまれている/展開されている）を決定できます。コンポーネントの外観は、isParentToggled、isToggled、name に基づいて決定され、data 上で Array.isArray() をチェックします。

data 内の各子要素に対して、それがオブジェクトか配列かを判断し、再帰的にサブツリーまたは適切なスタイルを持つテキスト要素をレンダリングします。コンポーネントの状態を切り替えるには、<span> 要素をレンダリングし、その onClick イベントをバインドしてコンポーネントの isToggled 状態を変更します。

CSS スタイルは、コンポーネントの外観に対して定義されており、margin、position、border、display プロパティを含みます。

const TreeView = ({
  data,
  toggled = true,
  name = null,
  isLast = true,
  isChildElement = false,
  isParentToggled = true
}) => {
  const [isToggled, setIsToggled] = React.useState(toggled);
  const isDataArray = Array.isArray(data);

  return (
    <div
      className={`tree-element ${isParentToggled && "collapsed"} ${
        isChildElement && "is-child"
      }`}
    >
      <span
        className={isToggled ? "toggler" : "toggler closed"} => setIsToggled(!isToggled)}
      />
      {name ? <strong>&nbsp;&nbsp;{name}: </strong> : <span>&nbsp;&nbsp;</span>}
      {isDataArray ? "[" : "{"}
      {!isToggled && "..."}
      {Object.keys(data).map((v, i, a) =>
        typeof data[v] === "object" ? (
          <TreeView
            key={`${name}-${v}-${i}`}
            data={data[v]}
            isLast={i === a.length - 1}
            name={isDataArray ? null : v}
            isChildElement
            isParentToggled={isParentToggled && isToggled}
          />
        ) : (
          <p
            key={`${name}-${v}-${i}`}
            className={isToggled ? "tree-element" : "tree-element collapsed"}
          >
            {isDataArray ? "" : <strong>{v}: </strong>}
            {data[v]}
            {i === a.length - 1 ? "" : ","}
          </p>
        )
      )}
      {isDataArray ? "]" : "}"}
      {!isLast ? "," : ""}
    </div>
  );
};

.tree-element {
  margin: 0 0 0 4px;
  position: relative;
}

.tree-element.is-child {
  margin-left: 16px;
}

div.tree-element::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 1px;
  height: calc(100% - 48px);
  border-left: 1px solid gray;
}

p.tree-element {
  margin-left: 16px;
}

.toggler {
  position: absolute;
  top: 10px;
  left: 0px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid gray;
  cursor: pointer;
}

.toggler.closed {
  transform: rotate(90deg);
}

.collapsed {
  display: none;
}

const data = {
  lorem: {
    ipsum: "dolor sit",
    amet: {
      consectetur: "adipiscing",
      elit: [
        "duis",
        "vitae",
        {
          semper: "orci"
        },
        {
          est: "sed ornare"
        },
        "etiam",
        ["laoreet", "tincidunt"],
        ["vestibulum", "ante"]
      ]
    },
    ipsum: "primis"
  }
};
ReactDOM.createRoot(document.getElementById("root")).render(
  <TreeView data={data} name="data" />
);

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080 タブを更新してウェブページをプレビューできます。

まとめ

おめでとうございます！あなたは拡張可能なオブジェクトツリービューの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を行って練習してください。

拡張可能なオブジェクト ツリー ビュー

はじめに