Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

302
Visualizações
Using React Functional Component with imported hooks in embeded html

I am working with a standalone React component that I want to display in a separate HTML file as a widget. I referenced the proper react libraries + babel but I can't get it to work because my functional component is using imports. I set the embedded script as a module but in that case, the exported function can be retrieved outside of the script. Can you point me out what I am doing wrong?

This is my HTML file:

<link href="/Content/css/rep/Portals.css" rel="stylesheet"/>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel" data-type="module">

import {useEffect, useState} from 'react';

export const Portal = ({ tags, owner }) =>  {
    const [data, setData] = React.useState([]);
    const imgUrl = 'myendpoint-url';

    useEffect(() => {
        fethData(owner, tags).then(data => setData(data));
    }, []);

    const fethData = async (owner, tags) => {
        //...do something asyncronously but response an array for now
        response [];
    };  

    return (
        <div>
            {data && data.map((item) => {
                return (                    
                    <div key={item.id}>
                        ... some intereesting markup                                          
                    </div>                    
                )
            })}
        </div>
    );
};
</script>

Then, later in the file, I have another script that renders the first component.

<div id="root-app"></div>

<script type="text/babel">
const domContainer = document.getElementById('root-app');
ReactDOM.render(<Portal tags={['tag-1', 'tag-2']}  owner={'me'} />, domContainer);
</script>

The previous code resulted in the error : enter image description here

I remove all unnecessary code in my example only left the important things. I know... this is not the best way to implement react components but believe me, I am putting in a CMS that is absolutely inflexible, and there is no way to put in a different form.

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda