带有 useState 的 Radium 使无效挂钩调用

Question

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

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

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

Can I repair it without changing function to class?

是的。要完成这项工作，extract a component 设置你的钩子。

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

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

export default Radium(App);

带有 useState 的 Radium 使无效挂钩调用

Radium with useState makes Invalid hook call

reactjs

radium