0

muchas gracias por entrar.

Lo que quiero es utilizar una función que lo que hace es hacer visible un Drawer desde otro archivo.

Desde el mismo archivo llamo a la funcion facilmente con

onClick={this.showDrawer}

La función es:

showDrawer = () => {
  this.setState({
    visible: true,
  });
};

Puse todo el codigo del Drawer en otro archivo para tener más ordenado el código, pero al hacerlo no sé como seguir utilizando la función. Es un botón del menú que abre ese Drawer,

Para exportar el componente y la función utilizo:

export default WrappedConarti;
export function showDrawer() { };

Para importar el componente y la función:

import WrappedConarti, { showDrawer } from './conarti';

No estoy seguro de si estoy exportando/importando de forma correcta, y tampoco sé cómo utilizar la función... no sé si hay que cambiar algo en el onClick o hay que definir la función en el mismo documento y vincularla de alguna forma con el otro archivo.

Agradezco su ayuda, desde ya muchas gracias!

Edit: 07/12, logre resolver otras cuestiones pero sigo sin resolver esta. Estuve viendo por los foros y mi problema se parece bastante al del siguiente post: https://stackoverflow.com/questions/31612598/call-a-react-component-method-from-outside pero igualmente sigo sin saber implementarlo en mi caso. Gracias.

5
  • Es react con Typescript verdad? Commented el 3 dic. 2018 a las 18:00
  • la verdad no estoy seguro, pero creo que no, nunca agregue un tal typescript. Commented el 4 dic. 2018 a las 11:57
  • lo que si te puedo decir es que utilizo recursos de antDesign. Commented el 4 dic. 2018 a las 12:09
  • creo que en export default WrappedConarti; estás tratando de exportar una clase como si fuera un método Commented el 4 dic. 2018 a las 18:27
  • Todas las clases de otras funciones (como login) las exporto así y funcionan correctamente. Lo que me complica en este caso es que no sé cómo importar una función y utilizarla en un onClick, lo mismo quiero hacer con el login para que se abra en un modal en vez de en otra pagina y sigo tratando de lograrlo. Gracias por tu aporte. Commented el 4 dic. 2018 a las 21:43

3 respuestas 3

1

Me parece que estas planteando las importaciones/exportaciones al reves. Tu quieres abrir un componente Drawer desde un componente que llamas WrappedConarti donde tienes un boton para abrirlo.

Para eso debes primero importar el Drawer en tu componente WrappedConarti:

import Drawer from './donde-tengas-tu-drawer'

Despues en el metodo render de tu componente WrappedConarti, debes usar un if ternario para renderizar el Drawer cuando des click en el boton y se ejecute tu funcion para hacerlo visible.

Tambien vas a necesitar cerrar tu Drawer dandole click a un boton de cerrar, y eso lo haras en otra funcion dentro de WrappedConarti que se la pasaras como propiedad a Drawer.

Tu codigo en Wrapedconarti quedaria algo asi:

state ={
  visible: false
}


showDrawer = () => {
  this.setState({
    visible: true,
  });

closeDrawer = () => {
  this.setState({
    visible: false,
  });

render() {
  return(
   { this.state.visible &&            
    <Drawer clickCerrar = {this.closeDrawer} />
   }
  )
}

En tu componente Drawer, no tienes que importar ninguna funcion ni tampoco el WrapedConarti. A el solo le llega la funcion de cerrar como propiedad, por lo que solo te quedaria poner un boton para cerrarlo:

   <button type = "button" onClick = {props.clickCerrar}>Cerrar</button>

y no te olvides que debes exportar a Drawer para que lo puedas importar en WrapedConarti

export default Drawer
0
  • En el archivo uno (1)

const hola = (e) => {
    console.log("primera constante " + e)
 };


const hola2 = () => {

    console.log("segundo constante")
  };

export default {hola , hola2};

  • En el archivo dos (2)

import Ui2 from './archivo uno';

y lo ocupo :

<a class="waves-effect waves-light btn" onClick={Ui2.hola("holis")}>button1</a>

<a class="waves-effect waves-light btn" onClick={Ui2.hola2}>button2</a>

-1

Has intentado a definirla como una constante?

const showDrawer = () => {
  this.setState({
    visible: true,
  });
};
export default showDrawer

ò

export {

......

}
2
  • me termina diciendo que showDrawer está definida pero nunca se utiliza. Commented el 4 dic. 2018 a las 12:05
  • eso puede ser, porque o bien no la utiliza o hay un error al nombrarla Commented el 7 dic. 2018 a las 19:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.