React 30 秒速学： 实现可折叠、无限层级的树形组件

本文译自：30-seconds-of-react。React 30 秒速学：全篇中文翻译、学习，地址：30-seconds-of-react-zh_CN-umi，所有案例进行分析、注释、上线。

实现一个可折叠、无限层级、支持数组和对象的树组件。

• 使用对象解构来设置某些传入属性的默认值。
• 使用传入的 toggled 属性来确定内容的初始状态（折叠/展开）。
• 使用React.setState() hook 来创建isToggled状态变量，并在最初为它赋予传入的 toggled的值。
• 返回一个<div>来包装组件的内容和用于改变组件的isToggled状态的<span>元素。
• 根据data上的isParentToggled，isToggled，name和Array.isArray()确定组件的外观。
• 对于data中的每个子节点，确定它是对象还是数组，并递归渲染子树。
• 否则，使用适当的样式渲染一个<p>元素。

样式：

/* 树节点的基本样式 */
.tree-element {
  margin: 0;
  position: relative;
}
div.tree-element:before {
  content: '';
  positi