react 不渲染 Header.jsx 文件

Question

[header.jsxapp.jsxre](https://i.sstatic.net/eAEmStYv.png)

你好！我第一次创建这个 React 应用程序...并且我导入/导出了应用程序文件和头文件...都在 jsx 中。

即使我导入它们并导出（如图像所示）...我的反应应用程序/网站仍然是空白...我很困惑！

我希望在我的反应应用程序中看到一些东西......但即使我正确导入/导出它们，它也显示为空白

Answer 1

您可能没有在

App.jsx

文件中正确包含标题。

确保您遵循以下步骤：

1. 默认导出

   Header

   组件。您在头文件中做到了这一点。

import React from 'react';

function Header() {
    return (
        <header>
            <h1>
                this is rendering from home.jsx file
            </h1>
        </header>
    );
}

export default Header;

2. 确保您在

   App.jsx

   文件中正确导入组件。

   Header

   是默认导出，您应该在不带花括号

   {}

   的情况下导入它。这是一个例子：

import Header from './Header.jsx'
 
export default function App() {
  
  // Header is a component comes from header.jsx
  return (
    <Header />
    <h1>Hello world</h1>
  )
}

这是屏幕截图中的实时示例： 正确导入标头组件