我正在使用 React 导入一个带有 useState 钩子的函数,这似乎破坏了它。我有一个带有钩子的反应版本:
npm ls react => react@16.10.2
npm ls react-dom => react-dom@16.10.2
我可以很好地使用组件。当我包含钩子时,我会看到"无效的钩子调用"屏幕。
在我的图书馆项目中,我有:
/**
* @class ExampleComponent
*/
import * as React from 'react'
import styles from './styles.css'
export default function ThingyDefault() {
return <p>hi</p>
}
export type Props = { text: string }
export class ExampleComponent extends React.Component<Props> {
render() {
const {
text
} = this.props
return (
<div className={styles.test}>
Example Component: {text}
</div>
)
}
}
////////////////// THIS DOESN'T SEEM TO WORK //////////////////
export function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = React.useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
在使用该库的项目中:
import React from 'react';
import './App.css';
import ThingyDefault, {ExampleComponent, Example} from 'thingy';
const App: React.FC = () => {
return (
<div>
<ThingyDefault />
<ExampleComponent text='hello' />
{/* commenting this component out makes it work */}
<Example />
</div>
);
}
export default App;
我在这里做错了什么?
你没有遵守钩子的规则,特别是在你的情况下,从标准javascript函数调用钩子。
仅从 React 函数调用钩子 不要从常规的 JavaScript 函数调用 Hooks。相反,您可以:
✅ 从 React 函数组件调用钩子。 ✅ 从自定义 Hooks 调用 Hooks(我们将在下一页了解它们(。 通过遵循此规则,可以确保组件中的所有有状态逻辑从其源代码中清晰可见。
由于这似乎是导入/导出问题,请尝试将导出更改为以下内容:
const Example = () => {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = React.useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export { Example };
你在那里没有做错任何事。 它应该按预期工作。在这里查看示例 Stackblitz,使用与您拥有的 React 版本相同。
我可能会重新检查应用程序是否存在任何重复的依赖项,从而弄乱钩子的功能。特别是,它无法确定您的function Example()
确实是一个功能组件。
我知道这是一个有点老的问题,但我有同样的问题。 我没有使用样板,而是找出了问题所在。
通常有必要在rollup.config中指出.js哪些模块是外部的。例如:
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import dts from "rollup-plugin-dts";
import postcss from "rollup-plugin-postcss";
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';
import packageJson from "./package.json" assert { type: "json" };
export default [
{
input: "src/index.ts",
external: Object.keys(packageJson.peerDependencies || {}),
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: true,
},
{
file: packageJson.module,
format: "esm",
sourcemap: true,
},
],
plugins: [
resolve(),
commonjs(),
typescript({ tsconfig: "./tsconfig.json" }),
postcss({
plugins: [
tailwindcss(),
autoprefixer()
],
}),
],
},
{
input: "dist/esm/types/index.d.ts",
output: [{ file: "dist/index.d.ts", format: "esm" }],
plugins: [dts()],
external: [/.css$/],
},
];
所以上面配置中最重要的行是:
import packageJson from "./package.json" assert { type: "json" };
[...]
external: Object.keys(packageJson.peerDependencies || {}),