使用React Hook的函数组件能否在类组件内渲染？Hook在BrowserRouter报错求助

当然可以！类组件的render()方法里完全能正常渲染用了Hook的函数组件，和你渲染其他React组件没任何区别。给你举个直观的例子：

// 带Hook的函数组件
function Counter() {
  const [count, setCount] = React.useState(0);
  return <button onClick={() => setCount(count + 1)}>点击次数：{count}</button>;
}

// 类组件
class PageContainer extends React.Component {
  render() {
    return (
      <div className="page">
        <h2>类组件容器</h2>
        {/* 直接在这里渲染函数组件就行 */}
        <Counter />
      </div>
    );
  }
}

只要你的函数组件本身遵守Hook的规则——比如只在组件顶层调用Hook，别放在条件判断、循环或者嵌套函数里——这种用法完全合法，不会有任何问题。

这个报错绝对是React Hook新手最常踩的坑之一，结合你的场景，大概率是下面几个原因，你可以挨个排查：

• 把函数组件当成普通函数调用了：比如你写了MyComponent()而不是<MyComponent />。要是直接调用函数，里面的Hook就不在React组件的上下文里执行，肯定会报错。记住，渲染组件一定要用JSX标签的形式。
• Hook的调用位置不符合规则：Hook必须在函数组件的顶层作用域调用，不能放在条件判断、循环语句、或者render()里的嵌套函数里。比如你不能写if (xxx) { useState() }，这种写法直接违反Hook规则。
• React依赖版本不匹配：确保你的react和react-dom版本是一致的，而且都在16.8.0以上（Hook是这个版本才引入的）。如果一个是17.x，另一个是16.7.x，就可能出现这个问题。去package.json里看看版本号，不一致的话就统一升级或降级。
• 项目里存在多个React实例：要是你的项目不小心装了多份React（比如在某个子包目录里又单独装了一次），React会无法识别Hook的上下文。你可以在项目根目录运行npm ls react或者yarn list react，看看有没有重复的依赖，有的话就清理掉多余的。

给你看个典型的错误用法（会触发这个报错）：

// 错误示例：在类组件里直接调用Hook
class BadComponent extends React.Component {
  render() {
    // 这里直接用useState，完全错误！
    const [name, setName] = React.useState("");
    return <input value={name} onChange={(e) => setName(e.target.value)} />;
  }
}

正确的做法是把Hook逻辑放到函数组件里，然后在类组件的render()里渲染这个函数组件，就像问题1里的例子那样。

内容的提问来源于stack exchange，提问作者Abdur Rahaman