내장된 리액션 앱 위젯을 작성할 수 있습니까?
여러 WordPress 사이트에 삽입할 수 있는 위젯을 만들고 싶습니다.예를 들어 주택담보대출 계산기를 구축하고 입력된 정보로 다운로드 가능한 PDF를 작성하는 등의 기능을 추가한다.
리액션으로 할 수 있을까요?구체적으로는 create-react-app 툴을 사용합니다.
잘 부탁드립니다!
리액트 임베디드 가능 위젯을 작성할 수 있지만create-react-app적절한 도구가 아닙니다.
컴파일된 js 번들을 공유하여 브라우저에서 사용하는 가장 쉬운 방법은 UMD 형식으로 패키징하는 것입니다.하지만,create-react-app 지원하지 않습니다.기술적으로 create-react-app에서 번들을 위젯으로 가져올 수 있지만 번거롭습니다.일부 사용자는 응용 프로그램 매니페스트를 구문 분석하거나 인덱스 html 내용을 대상 페이지에 복사하여 이 작업을 수행합니다.대부분의 경우 위젯은 입력 데이터를 사용하기 때문에 이러한 기술을 사용하는 데 어려움을 겪을 수 있습니다.
패키지/바벨(가장 쉬운 것), webpack/바벨, nwb 등 UMD를 즉시 지원하는 다른 빌드 시스템을 사용하는 것이 좋습니다.다음은 컴파일 체인에 대한 공식 권장 사항입니다.
여기 예가 있습니다.index.js위젯 선언에 사용할 수 있는 파일:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
window.MyWidget = function(idElement, param1, param2) {
let config = {param1, param2};
ReactDOM.render(<App config={config} />, document.getElementById(idElement));
return this;
}
그런 다음 위젯을 대상 페이지로 인스턴스화할 수 있습니다.
<body>
<div id="react-widget">
<script src="http://cdm.com/my-react-widget-bundle.js"></script>
<!-- if bundled separately, load the css -->
<script>
window.addEventListener("DOMContentLoaded", function(event) {
new MyWidget("#react-widget", "toto", "tata");
});
</script>
</div>
</body>
ReactDOM.render의 두 번째 인수는 렌더링 대상입니다.페이지 어디에나 있을 수 있습니다.
ReactDOM.render(element, document.getElementById('widgetTarget'));
언급URL : https://stackoverflow.com/questions/52750875/is-it-possible-to-create-an-embedded-react-app-widget
'source' 카테고리의 다른 글
| 모듈을 사용할 수 없거나 철자가 틀리거나 로드하지 않았습니다(하지만 로드하지 않았습니다). (0) | 2023.02.14 |
|---|---|
| angularjs에서 전체 div 비활성화 (0) | 2023.02.14 |
| $190 $190 동기식 또는 비동기식? (0) | 2023.02.14 |
| 워드프레스:관리 옵션 페이지에서 이미지 업로드 (0) | 2023.02.14 |
| JSON의 연속 스트림 처리 (0) | 2023.02.14 |