Реагировать - создать рекурсивных детей - PullRequest
Новая
       12

Реагировать - создать рекурсивных детей

0 голосов
/ 22 декабря 2018

Моя проблема проста, я хочу рекурсивно составить список из 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')
);

Моя основная идея заключалась в том, чтобы создать функцию, которая могла бы вызывать себя и возвращать более глубоких детей только тогда, когда дети существуют.Я думаю, что это должно сработать, но я не могу избавиться от ul внутри всех li.Кажется, ul никогда не должен отображаться внутри первого и второго 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>

Что может быть не так?Можно ли сделать это лучше?

1 Ответ

0 голосов
/ 22 декабря 2018

У вас здесь плохая логика.Измените props.tree !== undefined || props.tree.length > 0 на props.tree !== undefined && props.tree.length > 0.

|| означает or, поэтому, если любое из условий истинно, оно будет оцениваться как истинное, а поскольку определено props.tree, оно срабатывает как истина.

...