react: список из одного компонента не считается списком из одного компонента

Question

Указываю структуру для главного компонента, который выводит дочерние компоненты, содержащую эти дочерние компоненты:

this.add_filters(
    <>
        <Filter1 />
    </>
);

метод add_filters выглядит так:

add_filters(filters: JSX.Element): void {

    console.log(filters.props.children.length);
}

Так во, когда указывается только один компонент, то функция add_filters выводит undefined, а когда указывается больше одного компонента, например

this.add_filters(
    <>
        <Filter1 />
        <Filter2 />
    </>
);

то выводится правильное кол-во компонент

соответственно и всякие методы для массивов типа map корректно работают

Подскажите, почему так происходит и как корректно тогда работать в ситуации, когда передается только 1 компонент

Answer 1

вот так попробуйте:

function About() {
  function add_filters(filters) {
    if (Array.isArray(filters.props.children)) {
      console.log(filters.props.children.length); // Он имеет `length`
      filters.props.children.forEach((child) => {
        console.log(child);
      });
    } else {
      console.log(filters.props.children); // У этого нет `length`
    }
  }

  return (
    <div>
      {add_filters(
        <>
          <div>Hi</div>
          <div>Bye</div>
        </>
      )}
      {add_filters(
        <>
          <div>Hey</div>
        </>
      )}
    </div>
  );
}

Короче говоря, когда вы напишете это:

<>
  <div>Hi</div>
  <div>Bye</div>
</>

тогда filters.props.children - это массив

И, когда вы пишете:

<>
  <div>Hey</div>
</>

Тогда filters.props.children - это не массив, а объект

БЛОГ НА HUSL

react: список из одного компонента не считается списком из одного компонента

Ответы (1 шт):