Quiero usar Children.map para editar accesorios para cada niño y usar funciones como Children para pasar parámetros al mismo tiempo
En React podemos usar funciones como niños así
children({param1: 'coco', param2: 'bibi'})Y entonces lo usamos Así
<Example> {({param1, param2}) => (<div>{param1}</div>)} </Example>Y si queremos editar accesorios para cada niño usamos este método
{Children.map(children, (child, i) => { return cloneElement(child as ReactElement<any>, { param1: 'coucou', }); })}quiero todo es asi en mi situacion
<Example> {({param1, param2}) => data.map(item=> <ExampleChild> {item.text} {param1} </ExampleChild>)} </Example>Quiero este caso y también quiero agregar accesorios a ExampleChild from Example, por ejemplo, quiero pasar un índice de accesorios a ExampleChild desde Example directamente
Entonces, ¿cómo podemos hacer si queremos usar ambos (niños funcionales, editar accesorios para niños) al mismo tiempo? por favor !
Si desea agregar un index al elemento secundario de Example , no debe usar fragmentos que se tratarán como un solo elemento secundario y .map no funcionará.
Debe estar en una matriz
export const Default = () => { return <Example>{({param1}) => [<Test>{param1}</Test>, <Test>hello2</Test>]}</Example>; }; Puede pasar el índice a través de cloneElement
function renderChildren() { const _children = children({ param1: 'foo' }); return React.Children.map(_children, (child, idx) => { return cloneElement(child, { /* Add props here , if you want to passs it to ExampleChild */ index: idx, }); }); }Ejemplo.jsx
function Example({ children }) { function renderChildren() {...} return <div>{renderChildren()}</div> }funciona para mí cuando me gusta esto
export const Parent = ({ children, ...rest }) => { return <Box {...rest}>{children({ param1: 'fofo' })}</Box>; }; export const ParentFragment = ({ children }) => { return Children.map(children, (child, idx) => { return cloneElement(child as ReactElement<any>, { index: idx, }); }); }; export const Test = ({ index, children }) => { console.log({ index }); return <div>{children}</div>; }; export const App = () => { return ( <Parent> {({param1}) => ( <ParentFragment> <Test>hello {param1}</Test> <Test>hello2</Test> </ParentFragment> )} </Parent> ); };