import { map } from "react-itertools";
function Stepper({ children }) {
//will do a recursive map over all direct and indirect children
//instead of a shallow map like React.Children.map
const statuses = map(
children,
(child) => child?.props?.status
).filter(s => s !== undefined);
// Do stuff...
}
import { map } from "react-itertools";
function Stepper({ children }) {
//will do a recursive map over all direct and indirect children
//instead of a shallow map like React.Children.map
const statuses = map(
children,
(child) => child?.props?.status
).filter(s => s !== undefined);
// Do stuff...
}
This lets you get past simple wrappers and other "invisible" elements to find the childern you're expecting, but if your users are passing in more complicated structures, this kind of deep iteration could get expensive.
If a breaking change to the library is acceptable, the react docs have some suggestions of alternative patterns that could work. e.g. a render prop
发布评论
评论（1）
您可以递归地迭代孩子们，
例如使用像 react-itertools
这可以让您超越简单的包装器和其他“不可见”元素来找到您期望的子元素，但如果您的用户传递更复杂的结构，这种深度迭代可能会变得昂贵。
如果对库的重大更改是可以接受的，react 文档会提供一些可行的替代模式的建议。例如 render prop
You could recursively iterate over the children
e.g. using a library like react-itertools
This lets you get past simple wrappers and other "invisible" elements to find the childern you're expecting, but if your users are passing in more complicated structures, this kind of deep iteration could get expensive.
If a breaking change to the library is acceptable, the react docs have some suggestions of alternative patterns that could work. e.g. a render prop