>source

Vanilia Javascript에 의해 구축된 오래된 웹사이트가 있습니다. 이제 React로 변환하고 있습니다. 그래서 html 페이지에서 복합 React(Typescript) 컴포넌트를 렌더링할 것입니다. 하지만 작동하지 않습니다. 여기 내 code가 있습니다.

app.html

<body>  <div id="test-id">  </div>  <script src="https://unpkg.com/[email protected]/dist/react.min.js" crossorigin></script>  <script src="https://unpkg.com/[email protected]/dist/react-dom.min.js" crossorigin></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>  <script type="text/tsx" src="../test/component/Test.tsx"></script></body>

내 구성 요소 -Test.tsx

import { makeStyles, ThemeProvider } from '@material-ui/core';
import { Web3Provider } from '@ethersproject/providers';
import { useWeb3React } from '@web3-react/core';
import { useEffect, useState } from 'react';
import Header from '../Layout/Header';
import { api } from '../../services/api/api';
import TestMain from './TestMain';
import Footer from '../Footer/Footer';
const useStyles= makeStyles((theme)=> ({
 ... some styles
}));
type Props= {};
const Test: React.FC<any>= ()=> {
  const classes= useStyles();
  let data: []= [...example data]
  return (
    <div className={classes.root}>      <Header login={true} color="primary"/>      <main className={classes.main}>        <TestMain data={data} />      </main>      <Footer />    </div>  );
}
ReactDOM.render(<Test />, document.getElementById("test-id"))

이에 대한 많은 예를 찾았지만 간단한 구성 요소였습니다. 그것은 나를 위해 일했습니다. 그러나 내 구성 요소를 html로 렌더링하려고 하면 작동하지 않습니다. 내 구성 요소에는 외부 구성 요소, Material UI 등이 포함됩니다. HTML 페이지에서 내 구성 요소를 렌더링할 수 있습니까? 그렇다면 누구든지 저를 도와주세요.

현재 브라우저에서 구성 요소를 빌드하고 있습니다. 이는 나쁜 습관으로 간주되며 많은 수동 작업이 없는 실제 프로젝트에는 적용되지 않습니다. 다른 번들러 프로그램을 살펴보는 것이 좋습니다. 설정이 정말 쉽고 구성이 거의 필요하지 않기 때문에 소포를 추천합니다. 시작하기 가이드를 읽고 시작하고 싶을 것입니다.

Olian042022-01-16 19:03:14
  • 답변 # 1

    아마도 쉽지 않을 것입니다.

    (참고: 사실 지금 웹팩 설정을 생각하고 있습니다. 소포, 귀하의 질문에 대한 의견에서 권장하는 대로, 나는 거기에 대한 가능성을 모릅니다)

    HTML과 React 앱 소스 code는 기본적으로 매우 다른 기술입니다.

    • React는 Javascript /JSX /Typescript /... 컴파일되어 HTML 페이지를 생성하는 code이며
    • HTML 웹사이트는 (아마도) 일부 자바스크립트 code를 포함하는 HTML 페이지입니다.

    React code는 정적 HTML 파일에 대해 아무것도 모르고 HTML 파일은 React code를 컴파일할 수 없습니다.

    React 앱에는 예를 들어 이러한 기술:

    • 모듈(참조)
    • Typescript, "컴파일"해야 함
    • JSX, 자바스크립트로 컴파일해야 함

    이러한 모든 개별 기술에 대한 솔루션(다소 적음)이 있지만 결합하여 상당히 복잡해지며 전체 HTML 웹사이트를 React code로 리팩토링하는 작업이 줄어들 것입니다. (또는 조금씩 하는 대신 한 번에 모두 수행하는 것이 더 효율적입니다).

    몇 가지 다른 접근 방식이 있습니다.

    • React 앱을 빌드하고 이전 HTML code를 여기에 복사합니다.
    • HTML 페이지,ReactDOM.render()하나 이상의 장소에서
    • 반응 code
    • React 컴파일 후 이전 HTML code와 React에 의해 생성된 HTML code를 결합하는 복잡한 도구 및 워크플로 설정
    • ...

    참조:

  • 이전 Java code에 Oracle okvja 라이브러리를 추가하는 방법
  • 다음 ANSI C -왜 malloc과 free가 char 포인터에 대해 작동하지 않습니까?