在 next.js 中将反应导入页面

Posted 2023-02-22

【中文标题】在 next.js 中将反应导入页面

【英文标题】：Importing react into pages in next.js

【发布时间】：2020-11-15 06:59:57

【问题描述】：

我有一个 Next.js 应用程序，其中包含多个页面。所有页面看起来都相似。

import React,  Component  from "react";
import  from "components/Wrapper";

export default class About extends Component 
  render() 
    return <Wrapper />;
  

我想用函数式组件重构它。

我读到here，由于 next.js 路由系统，您不必在页面中导入 react 包。 Next.js 文档还显示了在页面组件上没有反应导入的示例，但没有给出解释。

你能澄清一下吗？在这种情况下是否有必要导入 React？我可以删除 import React 行吗？

【参考方案1】：

嗯，实际上对于我们所有人来说，在 Next.js 应用程序中何时使用 import React from "react"; 以及何时不使用仍然是一个复杂的问题。但根据 Next.js 的合著者Tim Neutkens 在this thread 中他提到：

当确实使用 JSX 时，Next.js 会自动添加 React 导入。但是请记住，当使用 React 变量时，我们仍然需要import React from 'react'。

所以这将向我们展示，每当我们只想从 React 中单独使用 JSX 功能时，我们不必import React from 'react' 并且 Next.js 将为我们隐式导入它，但在任何其他情况下我们都必须这样做。

【讨论】：

据我所知，在 jsx 转译后，无论如何都会添加 import React

@kilogram 是的，没错。但是例如，当您想使用useState 时，您仍然需要导入它。因为如果你不这样做，它会抛出一个错误并且它不会到达转换部分。