React - 创建递归子代

Question

我的问题很简单，我想从 json 递归地创建一个列表。我现在拥有的：

const jsonMenuConfig =[
            {
                main:"Li1",
                inside:[]
            },
            {
                main:"Li2",
                inside:[]
            },
            {
                main:"Li3",
                inside:[{main:"insideLi1",inside:[]},{main:"insideLi2",inside:[]},{main:"insideLi3",inside:[]}]
            }
        ];


class App extends React.Component{
  render(){
    return(
      <ListMaker tree={jsonMenuConfig}/>
    );
  }
}
function ListMaker(props){
  return props.tree !== undefined || props.tree.length > 0 ? 
          <ul>{
            props.tree.map((item)=>{
              return <li>{
                  item.main
                }{
                  <ListMaker tree={item.inside}/>
                }</li>
            })
          }</ul>
        : null
}
ReactDOM.render(
  <App/>,
  document.getElementById('app')
);

我的主要想法是创建可以调用自身的函数，并且 return 只有当子级存在时才能调用更深的子级。我认为这应该可行，但我无法摆脱所有 li 中的 ul。似乎 ul 永远不应该在 first 和 second li 中呈现，因为它不适合这个

props.tree !== undefined || props.tree.length > 0

现在发生的事情：

<ul>
  <li>
    <ul></ul> -- empty, should never return
  </li>
  <li>
    <ul></ul> -- empty, should never return
  </li>
  <li>
    <ul></ul> ... -- children here, succes
  </li>
</ul>

我只是想要什么：

<ul>
  <li></li>
  <li></li>
  <li>
    <ul>
      <li></li> ... -- children here, succes
    </ul>
  </li>
</ul>

可能有什么错误？可以做得更好吗？

Answer 1

你逻辑不好。将 props.tree !== undefined || props.tree.length > 0 更改为 props.tree !== undefined && props.tree.length > 0。

|| 表示 or 因此，如果任一条件为真，它将计算为真，并且由于 props.tree 已定义，因此它触发为真。

React - 创建递归子代

React - create recursive children

tree

recursion

json

children

reactjs