정적 웹 사이트에서 이전에 패키징된 ReactJS 구성 요소를 사용하는 방법
소스 코드가 다음과 같은 ReactJS 웹 구성 요소가 제공되었습니다.
import * as React from 'react';
import {createComponent} from '@lit-labs/react';
import {Button} from '../../components';
export const ExButton = createComponent(
React,
'ex-button',
Button
);
이 반응 앱은
index.esm.js에 번들로 제공됩니다.파일
내 작업은 정적 웹 사이트에서 이 구성 요소를 사용하는 것입니다. 다음과 같이 html 파일을 만들었습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<xml:namespace prefix="v" ns="urn:schemas-microsoft-com:vml"> </xml:namespace>
<title>React JS</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/index.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<!-- pre-packaged React web component-->
<script type="module" src='./react/index.esm.js'></script>
<!-- script to render the above component -->
<script type="text/babel" src='./react/reactjs-btn.js'></script>
</body>
</html>
reactjs-btn.js의 내용은 다음과 같습니다.
'use strict';
const btnContainer1 = document.querySelector('#button_container');
const btnroot = ReactDOM.createRoot(btnContainer1);
let element = <ExButton type="primary"></ExButton>;
btnroot.render(element);
Apache 서버에서 html 파일을 실행하고 있습니다. 그러나 오류가 발생합니다.
Uncaught ReferenceError: ExButton is not defined정적 웹 사이트에서 이전에 패키징된 React 구성 요소를 렌더링하는 것이 가능합니까?
나는 어떤 도움을 주셔서 감사합니다
문안 인사,
남자
Reference
이 문제에 관하여(정적 웹 사이트에서 이전에 패키징된 ReactJS 구성 요소를 사용하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/jvarghese/how-to-use-previously-packaged-reactjs-component-in-static-website-21be텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
