将 react 导入 next.js 中的页面 [英] Importing react into pages in next.js

问题描述

我有一个包含多个页面的 Next.js 应用程序.所有页面看起来都很相似.

I have a Next.js app with several pages in it. All of the pages look similar.

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

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

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

I would like to refactor it using functional component.

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

I read here that you don't have to import react package here in a page due to next.js routing system. Next.js docs also show examples without react import on a page component, but no explanation given.

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

Can you clarify please. Is it necessary to import React at all in this case? Can I remove the import React line?

推荐答案

嗯，其实对于我们大家来说，意识到何时使用 import React from "react"; 仍然是一个复杂的问题以及何时不使用 Next.js 应用程序.但根据 Next.js 的合著者 Tim Neutkens 的说法，在 这个线程 他提到:

Well, actually it is still a complicated issue for all of us to realize when to use import React from "react"; and when not to in Next.js apps. But according to Tim Neutkens co-author of Next.js, in this thread he mentioned:

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

Next.js automatically adds the React import when JSX is used indeed. However keep in mind that we do still need to import React from 'react' when the React variable is used.

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

So this will show us, whenever we just want to use JSX feature alone from React we do not have to import React from 'react' and Next.js will implicitly import it for us, but in any other case we have to do that.

这篇关于将 react 导入 next.js 中的页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！