Есть ли способ для родительского компонента иметь список всех дочерних компонентов определенного типа без ручного перебора каждого дочернего компонента в 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}
)
}