Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

React Joyride

por Ana Carolina Gonçalves de Oliveira
| 152.9k xp | 11 posts

Gostaria de utilizar o react joyride em um componente funcional, porem não consigo transformar essa classe em função, alguém pode me ajudar?

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Joyride from "react-joyride";
class App extends Component {
state = {
steps: [
{
target: ".my-first-step",
content: "This is super awesome feature "
},
{
target: ".my-other-step",
content: "Everyone's learning Joyride!"
}
]
};
render() {
const { steps } = this.state;
return (
<div className="App">
<Joyride steps={steps} />
<header className="App-header ">
<a href="https://reactjs.org" target="_blank">
<img src={logo} className="App-logo my-first-step" alt="logo" />
</a>
<a
className="App-link my-other-step"
href="https://github.com/gilbarbara/react-joyride"
target="_blank"
rel="noopener noreferrer"
>
Learn Joyride
</a>
</header>
</div>
);
}
}
export default App;
1 resposta
solução!
por Geovani Granieri
| 909.1k xp | 1038 posts
Instrutor

Olá Ana, tudo bem com você?

Esse componente de maneira funciona ficaria da seguinte maneira:


import React, { useState } from 'react';
import Joyride from 'react-joyride';

import logo from './logo.svg';
import './App.css';


const App = () => {

    const [steps, setSteps] = useState([
        {
            target: ".my-first-step",
            content: "This is super awesome feature"
        },
        {
            target: ".my-other-step",
            content: "Everyone's learning Joyride!"
        }
    ]);

    return (
         <div className="App">
                <Joyride steps={steps} />
                <header className="App-header ">
                    <a href="https://reactjs.org" target="_blank">
                        <img src={logo} className="App-logo my-first-step" alt="logo" />
                    </a>
                    <a
                        className="App-link my-other-step"
                        href="https://github.com/gilbarbara/react-joyride"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        Learn Joyride
                    </a>
                </header>
            </div>
   );
}

export default App;

A lógica normalmente vai ser sempre assim, para cada chave do state teremos um useState associado, com o conteúdo inicial sendo o mesmo do estado :)

Abraços e Bons Estudos!