带有钩子的反应组件作为 npm 模块

Question

当我尝试在用作依赖项的模块中使用 React Hooks 时，它失败了。 我收到以下错误：

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

但是如果我使用基于类的组件，那就没关系了。为什么会这样？

这是我package.json的摘

录

{
"main": "dist/index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build": "./node_modules/.bin/babel src -d dist",
"prepublish": "npm run build"
},
"peerDependencies": {
"react": "^16.10.2",
"react-router-dom": "^5.1.2"
},
"devDependencies": {
"axios": "^0.19.0",
"jwt-decode": "^2.2.0",
"qs": "^6.9.0",
"@babel/cli": "^7.6.4",
"@babel/core": "^7.6.4",
"@babel/preset-env": "^7.6.3",
"@babel/preset-react": "^7.6.3"
}
}

这是组件：

const Test = () => {
const [state, setState] = React.useState('test')
return <div>{state}</div>
}

Answer 1

也许你尝试使用的是useState而不是useEffect：

const Test = () => {
const [state, setState] = React.useState('test')
return (<div>{state}</div>)
}

Answer 2

你不能创建一个带有钩子的 npm 库，你需要将函数转换为类组件，并且可以作为一个库