Estoy muy confundido aprendiendo a reaccionar. Por ejemplo, tengo un componente de reacción muy simple.
export default function Foo(){ return( <div> <div>some text</div> </div> ) }Y quiero agregar un componente secundario:
export default function Foo(){ const Bar = ()=>{ return ( <input placeholder="some input"/> ) } return( <div> <div>some text</div> </div> ) }Y por lo que sé, puedo usar este componente de dos maneras:
1. Usar como función
return( <div> <div>some text</div> {Bar()} </div> )2. uso como componente:
return( <div> <div>some text</div> <Bar/> </div> ) ¿Qué es exactamente diferente entre estos dos? Pensé que era lo mismo, hasta que enfrenté un problema con el campo de entrada, que si uso el componente como <Bar/> , el foco en el campo de entrada se perderá después de ingresar la primera letra
Demostración aquí: https://codesandbox.io/s/gifted-archimedes-l7bce7?file=/src/App.js
Entonces, ¿cuál es el problema exacto aquí? Codifico como componente todo el tiempo, según tengo entendido <Bar/> es lo mismo que Bar() cuando devuelve el componente de reacción
¿Tengo razón o no?
Editar: encontré este blog, y está muy cerca de esta pregunta y también es genial :) https://dev.to/igor_bykov/react-calling-funcional-components-as-functions-1d3l?signin=true
He visto la demostración de su caja de códigos y, desde allí, creo que la razón para perder el foco del input field es el lugar donde ha usado useState .
Aquí puedes hacer dos cosas:
O
O
useState dentro de su componente secundario ya que el padre no requiere el valor de estado . Prefiero la segunda forma. Puede leer esto para obtener más información sobre dónde colocar useState y cuándo realmente necesita usar useState .
Para ser un component , la función que devuelve JSX debe usarse como <Component /> y not as Component() .
Cuando un componente funcional se usa como <Component /> , tendrá un lifecycle de vida y puede tener un state .
Cuando se llama a una función directly as Component() , simplemente se ejecutará y (probablemente) devolverá algo. No lifecycle, no hooks , sin la magia de React.
Las 3 afirmaciones anteriores son la respuesta a su problema .
Cuando llama al componente como {Child()}, no tiene ningún ciclo de vida o gancho y cuando llama como, tiene su propio ciclo de vida y ganchos, es por eso que enfrenta esos problemas.
Para más información sobre este tema: Enlace .
Cuando crea un nuevo componente, puede reutilizarlo en otro componente funcional. Mientras que, si crea una función, no puede reutilizarla en otro componente funcional, tendrá acceso limitado solo a ese componente funcional en particular.