Reactjs 在同一个React组件内呈现React组件

我想知道在组件内部呈现相同组件的行为。 想要创建一个嵌套的树，这是没有问题的，但只是想知道这是否是一个好的做法，如果有更好的方法来处理这个问题，并困惑这是如何工作的

谢谢

const obj = { name: "GranParent", children :[ {name: "Parent1", children :[{ name :"child" , children:[]}] }, {name: "Parent2", children :[{ name :"child"}] }] };

const DisParent = () => <DisplayChildren elem={{...obj}} />

 const DisplayChildren = (props) => {
  const propName = props.elem;
  const nameProperty = "name";

  return (
    <ul>
      {propName.map((instance, idx) => {
        return (
          <li key={idx}>
            <a href={"#" + instance.url}>{instance[nameProperty]}</a>
            {instance.children && (
             // see I am calling the component itself
              <DisplayChildren elem={instance.children}> </DisplayChildren>
            )}
          </li>
        );
      })}
    </ul>
  );
}; 

const obj={name:“GranParent”，子项：[{name:“Parent1”，子项：[{name:“child”，子项：[]}，{name:“Parent2”，子项：[{name:“child”}]}；
常量DisParent=（）=>
const DisplayChildren=（道具）=>{
const propName=props.elem；
const nameProperty=“name”；
返回(

{propName.map（（实例，idx）=>{
返回(

{instance.children&&(
//看，我正在调用组件本身
)}

);
})}

);
}; 

简单地说，我觉得很好！这里有两件事我将考虑应用于可读性和语义：

首先，我将分离

obj

：

ListComponent.js

const obj = {
  name: "GranParent",
  children: [
    {
      name: "Parent1",
      children: [
       {
         name: "child",
         children: []
       }
      ]
    },
   {
     name: "Parent2",
     children: [
      {
        name: "child"
      }
     ]
   }
 ]
}

export default obj

现在，导入

obj

并使用它

其次，我将子元素包装在

ul

中，因为它在

li

中：

<ul key={`some-unique-key`}>
  <DisplayChildren elem={instance.children}> </DisplayChildren>
</ul>

---

或者映射它们并呈现

谢谢，我理解我刚才作为示例发布的可读性语义。我如何通过代码拆分和深入嵌套子级来实现同样的效果？我尝试了不同的东西，但只有这似乎有良好的可读性和简单。

const Parent = () => { }

<Parent {...} />
<Parent ... />