javascript-无法使用 microbundle 和 React 渲染自定义组件包中的 useState、useEffect 挂钩
您好我正在尝试使用 React 18.2.0 和 Microbundle 创建一个示例库，虽然库构建成功，但是当它在客户端应用程序中使用时，我在控制台日志中收到以下错误：
库源代码
下面是我的图书馆代码。
App.js
import './App.css';
import Dropdown from "./components/Dropdown";
function App() {
let dropdown_data = ['Item 1', 'Item 2', 'Item 3'];
return (
<div className="dropdown">
<Dropdown jsonData={dropdown_data} />
</div>
)
}
export default App;
src/components/Dropdown.js
import React from "react";
import {useEffect, useState} from 'react';
export const Dropdown = (props) => {
const [dropdown, setDropdown] = useState([]);
useEffect(() => {
loadData();
}, []);
const loadData = () => {
setDropdown(props.jsonData);
}
return (
<div className="dropdown">
<select> {
dropdown.map((item, index) => (
<option key={index}>
{item}</option>
))
} </select>
</div>
)
}
src/lib.package.js
export { Dropdown } from "./components/Dropdown.js";
package.json
{
"name": "libtestone",
"version": "0.1.0",
"private": true,
"main": "./dist/lib.umd.js",
"module": "./dist/lib.module.js",
"source": "src/lib.package.js",
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build:lib": "microbundle --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"microbundle": "^0.15.0"
}
}
客户端应用程序源代码
这是我正在消费包裹的地方。
App.js
import './App.css';
import {Dropdown} from "libtestone";
function App() {
return (
<div>
<Dropdown />
</div>
);
}
export default App;
