Tengo un componente funcional primario simple (App.js) y un componente funcional secundario (counters.jsx), quiero pasar una señal/accesorio de niño a padre. Quiero enviar los accesorios como argumento a otra función en mi componente secundario. Puedo activar fácilmente la función principal con onClick={props.parentCallback} . pero si envío los mismos accesorios como argumento a otra función en el componente secundario, aparece el error "Se esperaba una asignación o llamada de función y en su lugar vi una expresión sin expresiones no utilizadas"
//This is parent Component, App.js function App() { return ( <div className="App"> <Counters parentCallback = {handleCallback}/> </div> ); } const handleCallback = () => { console.log("CALLED FRM CHILD"); } //This is Child Component- Counters.jsx function Counters (props) { return ( <div> <button onClick={ ()=> parentHandler(props) }>CALL PARENT</button><hr/> {//onClick={props.parentCallback} - This works well} </div> ); }; function parentHandler (props) { props.parentCallback; // This line throws the aforementioned error }no-unused-expressions generalmente significa que evaluó un valor pero nunca lo usó. Esta regla tiene como objetivo eliminar las expresiones no utilizadas. Por ejemplo if(true) 0
En su caso, está llamando a props.parentCallback sin paréntesis, dejándolo sin usar. O agrega paréntesis después de la llamada a su función como esta props.parentCallback() o devuelve algún valor al final. Por eso, su error de eslint desaparecerá.
También onClick={props.parentCallback} : esto funciona bien porque solo está pasando una referencia de su función al componente principal. Pero aquí onClick={ ()=> parentHandler(props) } está creando una nueva función en línea en cada representación.
Solo estás haciendo referencia a la función. No llamarlo. Puede modificar la función parentHandler como
function parentHandler (props) { props.parentCallback() }Gracias por su respuesta chicos, pero ninguna de las respuestas es exactamente lo que quería. Finalmente, obtuve la respuesta yo mismo tal como está:
¿Necesita que la función se ejecute ahora?
Luego agregue el () para ejecutarlo
¿Necesita funcionar para ser referenciado para que se llame más tarde?
No agregue el ().
Más ejemplo:
onClick=parentCallback() significa llamar a "parentCallback() lo antes posible y establecer su valor de retorno en onClick".
Por otro lado, onClick=parentCallback significa "onClick es un alias para parentCallback. Si llama a onClick(), obtendrá los mismos resultados que llamando a parentCallback()".
Lo encontré buscando en Google "llamada de función y referencia de función".