第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 html 文件中包含 Reactjs Bundled 組件

在 html 文件中包含 Reactjs Bundled 組件

茅侃侃 2021-11-12 18:29:36
我有一個reactjs npm 包,我想將它包含在 html 文件中,我在這里得到了捆綁文件,但我面臨一個require不是函數(shù)的問題,因為我不在 nodejs 項目中。所以我無法導(dǎo)入其他依賴項,有人可以進(jìn)一步幫助我嗎?console.log(window.React, 'AAB');window.ReactDOM.render(window.React.createElement(window.ListItem, {  labelOption: 'name',  typeOption: 'type',  valueOption: 'k',  onRemoveItem: (e) => {console.log('1')},  item: {name: 'Zeyad', type: 'person'}}, 'Hi'), document.getElementById("app"));<!DOCTYPE html><html>  <head>    <title>Parcel Sandbox</title>    <meta charset="UTF-8" />    <link href="https://unpkg.com/react-multiple-selector@1.0.7/dist/styles.css">  </head>  <body>    Name:    <div id="app"></div>    <script>var exports = {};    </script>    <script      crossoriginsrc="https://unpkg.com/react@16/umd/react.production.min.js"></script>    <script      crossorigin      src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"    ></script>    <script src="https://unpkg.com/react-multiple-selector@1.0.7/dist/index.js"></script>    <script src="https://unpkg.com/react-multiple-selector@1.0.7/dist/ListItem.js"></script>    <script src="https://unpkg.com/react-multiple-selector@1.0.7/dist/data.js"></script>  <script src="https://gist.githubusercontent.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js"></script>  </body></html>
查看完整描述

3 回答

?
拉丁的傳說

TA貢獻(xiàn)1789條經(jīng)驗 獲得超8個贊

在目前的形式中,該包仍然是一個 npm 包:您需要將它與其對等依賴項一起安裝在本地,然后使用諸如 webpack 或 parcel 之類的構(gòu)建工具或(parcel 是迄今為止最簡單的)構(gòu)建它


要使用 Parcel 構(gòu)建它,請執(zhí)行以下操作創(chuàng)建一個文件夾,進(jìn)入其中并打開一個終端,然后運(yùn)行以下命令


npm init -y

npm install -g parcel-bundler

npm install react-multiple-selector react react-dom react-scripts react-select lodash.debounce

在 src/index.js 下創(chuàng)建一個 index.js 文件,并將以下代碼放入其中


import React from 'react';

import ReactDOM from 'react-dom';

import ListItem from 'react-multiple-selector/dist/ListItem';


ReactDOM.render(React.createElement(ListItem, {

  labelOption: 'name',

  typeOption: 'type',

  valueOption: 'k',

  onRemoveItem: (e) => {console.log('1')},

  item: {name: 'Zeyad', type: 'person'}

}, 'Hi'), document.getElementById("app"));

將 index.html 放在 src/assets/ 下,并使用相對路徑包含 index.js。它應(yīng)該如下所示


<!DOCTYPE html>

<html>

  <head>

    <title>Parcel Sandbox</title>

    <meta charset="UTF-8" />

    <link href="https://unpkg.com/react-multiple-selector@1.0.7/dist/styles.css">

  </head>


  <body>

    Name:

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

    <script src="../index.js"></script>

  </body>

</html>

從您文件夾的根目錄,運(yùn)行parcel -p 1234 watch src/assets/index.html 您的頁面應(yīng)該在 localhost:1234 可用


查看完整回答
反對 回復(fù) 2021-11-12
?
縹緲止盈

TA貢獻(xiàn)2041條經(jīng)驗 獲得超4個贊

如果你想創(chuàng)建一個簡單的 reactjs 應(yīng)用程序,你可以使用 umd 并且可以從 react 網(wǎng)站本身獲得一個示例 -這里

然而,并不是所有為 reactjs 構(gòu)建的模塊都支持 UMD,你必須以捆綁的方式使用 react。閱讀官方文檔更多。react-multiple-selector 看起來還不支持 UMD。

檢查員控制臺顯示錯誤來自https://unpkg.com/react-multiple-selector@1.0.7/dist/index.jshttps://unpkg.com/react-multiple-selector@1.0.7/dist/ListItem.js

require瀏覽器中搜索選項時,我遇到了這個SO。但是,要知道您正在嘗試通過自己的方式來實現(xiàn)這一點(diǎn),這只是一種黑客行為,而不是解決方案。


查看完整回答
反對 回復(fù) 2021-11-12
?
躍然一笑

TA貢獻(xiàn)1826條經(jīng)驗 獲得超6個贊

您是否考慮過創(chuàng)建一個 React 項目來利用 npm 包而不是將所有內(nèi)容保存在單個 html 文件中?

https://reactjs.org/docs/getting-started.html


查看完整回答
反對 回復(fù) 2021-11-12
  • 3 回答
  • 0 關(guān)注
  • 210 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號