在 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?我可以删除 import 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 变量时，我们仍然需要 import React from '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 功能时，我们不必 import React from '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.

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