Родительский компонент возвращает дочерние div один за другим
Компоненты A и B возвращают массив элементов div (которые обновляются в зависимости от глобальных изменений состояния) следующим образом:
// code above
return(
<>{divArray}</>
)
Компонент C импортирует оба компонента и возвращает их в div:
// code above
return(
<div className='CC'>
<A/>
<B/>
</div>
)
В обычном рендере массив компонента A будет отображаться над массивом компонента B.
Можно ли заставить div 'CC' показывать элементы обоих массивов один за другим, то есть элемент массива A, элемент массива B, элемент массива A и т. д.?
Могу ли я как-то вызвать .map для импортированных компонентов в операторе возврата C?
Ну, вы можете сделать это одним из двух способов. Если количество индексов одинаковое.. Вы можете просто map() первый массив и использовать key для вызова этого index во втором массиве внутри цикла. Или вы можете useEffect передать оба массива и создать один компонент со всеми divs таким образом.
@PeterB это слишком сложно, должно быть что-то проще...
Я бы сказал, что нет более простого способа. React не создан для таких трюков. Компоненты предназначены для рендеринга в компоненты меньшего/нижнего уровня, которые могут или не могут рендерить другой слой дочерних элементов по тому же принципу. И обычно вам не нужно видеть это снаружи. Что бы я сделал, если бы у меня была такая необходимость, так это демонтировать A и B и вместо этого создать функции, которые просто перенастраивают нужные вам массивы. Нет необходимости, чтобы все было компонентом JSX.
да, это то, что у меня есть сейчас, я думал, что могу сделать его более сложным, но не могу найти ... Просто буду использовать useEffects и обрабатывать эти массивы внутри одного компонента, это намного проще ... Спасибо @PeterB!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
const C = () => {
const arrayA = <A/>.type().props.children
const arrayB = <B/>.type().props.children
return (
<div className='CC'>
{
getAlternatingArray(arrayA, arrayB)
}
</div>
)
}
const getAlternatingArray = (arrayA, arrayB) => {
let indexA = 0
let indexB = 0
const result = []
while(indexA < arrayA.length && indexB < arrayB.length) {
result.push(arrayA[indexA++]);
result.push(arrayB[indexB++]);
}
while(indexA < arrayA.length) {
result.push(arrayA[indexA++]);
}
while(indexB < arrayB.length) {
result.push(arrayB[indexB++]);
}
return result
}
если это сработает, вы гений, скоро проверим.
Это работает, вот вам codepen В любом случае я не гений, ха-ха
Мне интересно, почему вы используете .map(), потому что он работает даже без .map(), а без него такие вещи, как style и className, которые могут быть на <div>-ах, сохраняются. С .map() как есть (выполнение createElement), эти реквизиты теряются, необходимо добавить дополнительный код, чтобы вернуть все это обратно.
Вы правы, @peter, отредактировал ответ, не нужно их сопоставлять.
Отвечает ли это на ваш вопрос? Доступ к дочерним элементам реагирующего элемента