const Padre=()=>{retorno()}
const Child=({data})=>{ return ( {data} ) }
¿Puedo configurar los accesorios en el componente secundario en su estado?
Sí tu puedes. Algo como:
class Child extends Component { constructor(props){ const {myProp} = props; this.state = {myNumber: myProp} render(){ const {myNumber} = this.state; return <div>{myNumber}</div> } class Parent extends Component { render () { return <Child myProp={5} /> } }PERO: si su componente "principal" se actualiza, también lo hace el elemento secundario y el estado vuelve al valor establecido por el elemento principal, y todos los cambios de estado que hizo en el elemento secundario se pierden.
Sí, aquí hice un ejemplo de sandbox de código que muestra cómo hacerlo: https://codesandbox.io/s/stack-pass-props-fgq67n
El componente secundario se ve así
const Input = ({ string }) => { const [value, setValue] = useState(string); return <input value={value} onChange={(e) => setValue(e.target.value)} />; };Componente principal:
export default function App() { return ( <div className="App"> <Input string="default" /> </div> ); }A veces, si el padre vuelve a cargar, los accesorios pasados pueden restablecerse a los valores predeterminados
Hay un concepto en React conocido como componentes controlados y no controlados. Cuando su componente solo tiene accesorios y ningún estado dentro de sí mismo, entonces es un componente controlado, que está controlado por el componente principal.
Además, no es recomendable convertir los accesorios al estado del componente secundario, si desea cambiar el valor de los accesorios, simplemente pase un método adicional como accesorios que será llamado por el elemento secundario para actualizar el valor del elemento. props, déjanos mostrarte con un ejemplo
const Parent = () => { const [number, setNumber] = useState(0); const updateNumberHandler = (numberToUpdate) => setNumber(numberToUpdate) return <Child number={number} onUpdateNumber={updateNumberHandler} /> } const Child = (props) => { const { number, onUpdateNumber } = props; return <button onClick={() => onUpdateNumber(number + 1)}>Updated Number: {number}</button> }Aquí puede ver que estoy pasando dos accesorios, un valor y un método para actualizar ese valor, cuando se llama al método onUpdateNumber, el valor en el padre se actualiza, por lo que se vuelve a renderizar y también el hijo se vuelve a renderizar con el número actualizado valor.