En un componente de clase, tengo algo como esto:
render() { const { onClose } = this.props; // later, in the return statement, inside a bunch of other nested markup: <CloseIcon onClick={() => onClose()} className="qmCloseButton" /> <AnotherIcon onClick={() => onClose("/path1")} className="qmCloseButton" /> <AnotherIcon onClick={() => onClose("/path2")} className="qmCloseButton" /> }El accesorio de controlador cercano que paso es:
const onCloseModal = urlAfterClose => { if (urlAfterClose) { history.push(urlAfterClose); } else { setShowSuccessModal(false); } };Todo funciona. Sin embargo, siempre me gusta evitar las funciones de flecha en mi marcado cuando puedo, así que pruebo este pequeño cambio:
<CloseIcon onClick={onClose} className="qmCloseButton" /> <AnotherIcon onClick={() => onClose("/path1")} className="qmCloseButton" /> <AnotherIcon onClick={() => onClose("/path2")} className="qmCloseButton" /> Pero para CloseIcon , el método onClose se llama con una clase (¿parece que podría ser el componente mismo?) en lugar de llamarse sin argumento. Solo funciona como una función de flecha.
¿Que me estoy perdiendo aqui?
Son sintaxis totalmente diferentes.
onClick={onClose} =/= () => onClick={()=>onClose()}
onClick={onClose} en JavaScript, esto pasará todos los argumentos disponibles a la función onClose, la segunda que se ejecuta sin parámetros
es lo mismo que
onClick={onClose} = onClick={(e)=>onClose(e)}