0

El siguiente código lo tengo escrito con React, pero quiero convertirlo a React Hooks y Typescript, pero no consigo hacerlo, no se qué hago mal ni que me falta por hacer. El funcionamiento del código es básicamente que al pulsar un botón se muestre un determinado contenido, y al pulsar el otro se muestre otro distinto. El código es el siguiente:

const ViewOne = ({onClick}) => (
  <div>
    View 1 <br />
    <button onClick={() => onClick("view2")}>Go to view 2</button>
  </div>
);

const ViewTwo = ({onClick}) => (
  <div>
    View 2 <br />
    <button onClick={() => onClick("view1")}>Go to view 1</button>
  </div>
);



const App = () => {
  
  const [currentView, setCurrentView] = React.useState("view1");
  
  return (
      <div>
        {
          currentView === "view1" ? 
          <ViewOne onClick={page => setCurrentView(page)} /> : 
          <ViewTwo onClick={page => setCurrentView(page)} />
       }
      </div>
  );
};

const domContainer = document.querySelector('#my-app');
ReactDOM.render(<App />, domContainer);

Actualmente lo tengo así, he modificado ViewOne pero obtengo error en "<button onClick={() => onClick("view1")}>Go to view 1"

interface ViewOneProps {
    onClick: string;
}

const ViewOne: React.FC<ViewOneProps> = props => {
    return (
        <div>
            View 1 <br />
            <button onClick={() => onClick("view2")}>Go to view 2</button>
        </div>
    );
}

const ViewTwo = ({ onClick }) => (
    <div>
        View 2 <br />
        <button onClick={() => onClick("view1")}>Go to view 1</button>
    </div>
);



const App = () => {

    const [currentView, setCurrentView] = React.useState("view1");

    return (
        <div>
            {
                currentView === "view1" ?
                    <ViewOne onClick={page => setCurrentView(page)} /> :
                    <ViewTwo onClick={page => setCurrentView(page)} />
            }
        </div>
    );
};

// ========================================

ReactDOM.render(<Homepage />, document.getElementById("root"));

¿Cuál sería la forma correcta de pasar el código a Hooks y Typescript?

1 respuesta 1

0

Tomando de referencia el último código, una forma de hacerlo con TypeScript es:

interface ViewOneProps {
    onClick: (result: string) => void;
}

const ViewOne: React.FC<ViewOneProps> = props => {
    return (
        <div>
            View 1 <br />
            <button onClick={(event) => props.onClick("view2")}>Go to view 2</button>
        </div>
    );
}

const ViewTwo: React.FC<ViewOneProps> = ({ onClick }) => (
    <div>
        View 2 <br />
        <button onClick={(event) => onClick("view1")}>Go to view 1</button>
    </div>
);

const App: React.FC<Record<string, never>> = () => {
    const [currentView, setCurrentView] = React.useState<string>("view1");

    return (
        <div>
            {
                currentView === "view1" ?
                    <ViewOne onClick={setCurrentView} /> :
                    <ViewTwo onClick={setCurrentView} />
            }
        </div>
    );
};

La clave está en la interfaz:

interface ViewOneProps {
    onClick: (result: string) => void;
}

En lugar de:

interface ViewOneProps {
    onClick: string;
}

onClick: (result: string) => void; implica que en la asignación se debe corresponder con una función que tenga por sobrecarga un parámetro de tipo string y que no tenga valor de retorno (es decir void). Por lo tanto, onClick tendría un comportamiento de función de callback, mas no de propiedad de entrada de datos de cadena de texto, como lo estaba especificando la definición onClick: string.

1
  • Es justo como dices, ahora lo veo todo mucho más claro. Muchas gracias!
    – Marcus
    el 12 feb. 2022 a las 20:54

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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