Sé cómo pasar el estado de niño a padre. Y sé cómo pasar apoyos de padres a hijos.
Sin embargo, la forma obvia de hacer ambas cosas al mismo tiempo no parece funcionar como esperaba. Por favor, vea un ejemplo a continuación.
import React, { useState } from "react"; const Child = (props, { other }) => { // This is what I'd like to achieve but it ignores the {other} prop and doesn't received it from parent // const Child = ({ other }) => { // Works, but the sending of props from child to parent stops working // const Child = (props) => { // Works too but obviously the 'other' prop is not passed anymore return ( <> Child <button onClick={() => props.setValue("New stuff")}>Click!</button> <p>{other}</p> </> ); }; const Parent = () => { const [value, setValue] = useState("Default value"); return ( <> Parent <Child setValue={setValue} other={"Something else"} /> <p>{value}</p> </> ); }; export default Parent; Intenté pasar ambos como {props, other} , (props, other) , ({props, {other}}) pero nada funcionó.
Aquí hay un enlace a Codesandbox.
Use const Child = ({other, ...props }) => {
CodeSandbox: https://codesandbox.io/s/romantic-gagarin-3cgto
El parámetro props en este caso en realidad contiene setValue y other accesorios.
La sintaxis de desestructuración también es útil para la legibilidad aquí.
import React, { useState } from "react"; const Child = (props) => { // destructure both setValue and other out of props const {setValue, other} = props return ( <> Child <button onClick={() => setValue("New stuff")}>Click!</button> <p>{other}</p> </> ); }; const Parent = () => { const [value, setValue] = useState("Default value"); return ( <> Parent <Child setValue={setValue} other={"Something else"} /> <p>{value}</p> </> ); }; export default Parent;Puede acceder a other desde props :
import React, { useState } from "react"; const Child = (props) => { return ( <> Child <button onClick={() => props.setValue("New stuff")}>Click!</button> <p>{props.other}</p> </> ); }; const Parent = () => { const [value, setValue] = useState("Default value"); return ( <> Parent <Child setValue={setValue} other={"Something else"} /> <p>{value}</p> </> ); }; export default Parent;