Реакция: есть ли способ получить список props.children только для определенного типа c ребенка? Без повторения всех дочерних элементов для создания вручную? - PullRequest
1 голос
/ 07 мая 2020

Есть ли способ для родительского компонента иметь список всех дочерних компонентов определенного типа без ручного перебора каждого дочернего компонента в props.children, чтобы проверить, относятся ли они к этому типу? Пример ниже показывает вопрос. Компоненту Parent требуется список всех компонентов типа Child. В нынешнем виде мне нужно перебрать все props.children (и рекурсивно по всем их дочерним элементам), чтобы проверить, относятся ли они к типу компонента Child. Но это может обойтись слишком дорого. Есть ли какой-то специальный код, который можно разместить в дочернем и родительском компонентах, чтобы указать, что каждый дочерний компонент также должен быть помещен в список в другой опоре родительского компонента, а не только в props.children? Таким образом, мне не пришлось бы перебирать каждый компонент в props.children, чтобы найти их.

Эта проблема:

function Parent(props){
  /*I wish to have a list of all the components of type <Child> 
  within props.children before making it to the return function.

  I would need to iterate over all props.children and their 
  children as well, and check if its a <Child> component. 
  I would weed out all other components/elements to only have a 
  list of all <Child> components
  */

  return(
    {props.children}
  )
}

function Child(props){
  return(
    {props.children}
  )
}

function App(){
  return(
    <Parent>

      <div>Just a div, would be weeded out</div>

      <Child>special component that Im looking for</Child>

      <div> //this div would be weeded out, 
        //but the <Child> component in it must be found!
        <Child>special component that Im looking for</Child>
      </div>

    </Parent>
  )
}

То, что я хочу

  function Parent(props){
    //somehow there is special coding within the 
    //Parent and Child components that this prop
    //(listOfChildTypeComponents) gets created so 
    //I don't have to manually iterate over all
    //props.children to create it.

    const allChildComponents = props.listOfChildTypeComponents
    return(
      {props.children}
    )
  }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...