reactjs - 带有 useState 的 Radium 使钩子调用无效

Question

我使用 Radium 并且它可以工作，但是当我添加 useState 时出现此错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用...

我可以在不将功能更改为类的情况下修复它吗？

import React, {useState} from 'react';
import Radium, {StyleRoot} from 'radium';

const App = ()=>{
  const [tab, updateTab] = useState([1, 2, 3]);

  return (
    <StyleRoot>
      <div className='App'>

      </div>
    </StyleRoot>
  )
};

export default Radium(App);

Answer 1

我可以在不将功能更改为类的情况下修复它吗？

是的。要完成这项工作，请提取一个组件来放置您的钩子。

const Root = () => {
  const [tab, updateTab] = useState([1, 2, 3]);
  return <div className="App" />;
}

const App = () => {
  return (
    <StyleRoot>
      <Root />
    </StyleRoot>
  )
};

export default Radium(App);