1

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

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 компонент

1

1 ответ 1

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 - это не массив, а объект

1
  • 1
    да, точно! в итоге, чтобы учитывать все варианты пришлось написать такой код const children = (Array.isArray(filters.props.children)) ? (filters.props.children) : (filters.props.children ? [filters.props.children] : []);
    – Zhihar
    5 мар 2021 в 11:54

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.