Reactjs 错误-只能在函数组件的主体内部调用挂钩
我得到一个错误:Reactjs 错误-只能在函数组件的主体内部调用挂钩,reactjs,react-hooks,rollup,rollupjs,Reactjs,React Hooks,Rollup,Rollupjs,我得到一个错误:钩子只能在函数组件的主体内部调用 在图中,您可以看到我正在使用功能组件: 我的代码是使用rollup绑定的 怎么了 我的汇总配置是: import { readdirSync } from 'fs'; import path from 'path'; import babel from 'rollup-plugin-babel'; import commonjs from 'rollup-plugin-commonjs'; import external from 'rollup
钩子只能在函数组件的主体内部调用
在图中,您可以看到我正在使用功能组件:
我的代码是使用rollup绑定的
怎么了
我的汇总配置是:
import { readdirSync } from 'fs';
import path from 'path';
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import external from 'rollup-plugin-peer-deps-external';
import pkg from './package.json';
import replace from 'rollup-plugin-replace';
import resolve from 'rollup-plugin-node-resolve';
import { terser } from 'rollup-plugin-terser';
const EXTENSIONS = ['.ts', '.tsx', '.js', '.jsx', '.json'];
const CODES = [
'THIS_IS_UNDEFINED',
'MISSING_GLOBAL_NAME',
'CIRCULAR_DEPENDENCY',
];
const getChunks = URI =>
readdirSync(path.resolve(URI))
.filter(x => x.includes('.js'))
.reduce((a, c) => ({ ...a, [c.replace('.js', '')]: `src/${c}` }), {});
const discardWarning = warning => {
if (CODES.includes(warning.code)) {
return;
}
console.error(warning);
};
const env = process.env.NODE_ENV;
const commonPlugins = () => [
external({
includeDependencies: true,
}),
babel({
babelrc: false,
presets: [['@babel/preset-env', { modules: false }], '@babel/preset-react'],
extensions: EXTENSIONS,
exclude: 'node_modules/**',
}),
commonjs({
include: /node_modules/,
}),
replace({ 'process.env.NODE_ENV': JSON.stringify(env) }),
resolve({
extensions: EXTENSIONS,
preferBuiltins: false,
}),
];
export default [
{
onwarn: discardWarning,
input: 'src/index.js',
output: {
esModule: false,
file: pkg.unpkg,
format: 'umd',
name: 'myLibrary',
exports: 'named',
globals: {
react: 'React',
'react-dom': 'ReactDOM',
'styled-components': 'styled',
},
},
plugins: [...commonPlugins(), env === 'production' && terser()],
},
{
onwarn: discardWarning,
input: getChunks('src'),
output: [
{ dir: 'esm', format: 'esm', sourcemap: true },
{ dir: 'cjs', format: 'cjs', exports: 'named', sourcemap: true },
],
plugins: commonPlugins(),
},
];
我不知道怎么了,你能帮我解决我的问题吗?看起来react没有与代码捆绑在一起
- 我正在努力建立我的反应库
import React, {useState} from 'react';
const Bar = () => {
const [value, setValue] = useState(0)
return (
<button onClick={() => setValue(value + 1)}>
{value}
</button>
)
}
export default Bar
您可以为组件及其用法添加代码吗?另外,如果您正在构建一个库,那么React不需要与它捆绑在一起,您希望用户安装它。当然,添加了代码。。。
import * as React from 'react';
import './App.css';
import {Bar} from 'my-library';
function App () {
return (
<div className="App">
<hr />
<Bar />
</div>
);
}
export default App;