将vue官网（https://cn.vuejs.org/examples/#tree）的树形视图改写成react+ts

将vue官网（https://cn.vuejs.org/examples/#tree）的树形视图改写成react+ts

//样式
//Tv.css

.item {
  cursor: pointer;
  line-height: 1.5;
  color: red;
}
.bold {
  font-weight: bold;
}

//子组件
//TreeItem.tsx

import { useState } from "react"; import "./Tv.css";
    
    interface Props {   model?: any; } export default function
    TreeItem({ model }: Props) {   const [iFlag, iflag] =
    useState(true);   function Aone() {
        iflag(!iFlag);   }   return (
        <div>
          <div style={{ display: "flex" }}>
            <div>{model.name}</div>
            {model.name ? <div onClick={Aone}>[{iFlag ? "+" : "-"}]</div> : null}
          </div>
          <div>
            {!iFlag ? (
              <ul>
                {model.children &&
                  model.children.length &&
                  model.children.map((item: any, index: any) => {
                    return (
                      <li key={index}>
                        <div>
                          {!item.children ? (
                            <div className="item">---{item.name}</div>
                          ) : null}
                        </div>
                        {item.children ? <TreeItem model={item}></TreeItem> : ""}
                      </li>
                    );
                  })}
              </ul>
            ) : (
              ""
            )}
          </div>
        </div>   ); }

//父组件
//Tv.tsx

import TreeItem from "./TreeItem";
import "./Tv.css";

const treeData = {
  name: "My Tree",
  children: [
    { name: "hello" },
    { name: "world" },
    {
      name: "child folder1",
      children: [
        {
          name: "child folder2",
          children: [{ name: "hello 111" }, { name: "world 222" }],
        },
        { name: "hello" },
        { name: "world" },
        {
          name: "child folder3",
          children: [{ name: "hello 333" }, { name: "world 444" }],
        },
      ],
    },
  ],
};

export default function Tv() {
  return (
    <div>
      <ul>
        <TreeItem model={treeData}></TreeItem>
      </ul>
    </div>
  );
}