为什么我不能从文件中导入 React 组件？答案

【问题标题】：Why can't I import a React component from a file?为什么我不能从文件中导入 React 组件？
【发布时间】：2020-12-23 21:19:34
【问题描述】：

我想我已经把所有的代码都写对了，但是在端口上我只能显示 app.js 文件

import React from 'react';

import ImgSlider from './ImgSlider';

import './App.css';

function App() {

return (

<div className="App" >
 
 <div className="book-box">
   <img src="" alt=""/>
   <div>
     <h1>Harry Potter</h1>
  </div>
 </div>
 
</div>
 );

 }

 export default App;

我想从 ImgSlider

导入 div 元素

import React from 'react';

function ImgSlider() {
 return (
    <div>
      <h3>Heading</h3>
      <p>Description</p>
      <img src="" alt=""/>
    </div>
  );
 }

   export default ImgSlider;

当我打开浏览器时，它只显示来自 App.js 的 HARRY POTTER，我认为它也应该显示来自 ImgSlider 的 div 控制台按摩第 3:8 行：“ImgSlider”已定义但从未使用 no-unused-vars

感谢关注

【问题讨论】：

标签： javascript html reactjs jsx

【解决方案1】：

你没有渲染ImgSlider，只需要在App.js中做这个：

function App() {

return (

<div className="App" >
 
 <div className="book-box">
   <img src="" alt=""/>
   <div>
     <h1>Harry Potter</h1>
     /* ADD this code*/
     <ImgSlider />
  </div>
 </div>
 
</div>
 );

 }

这只是一个例子，你可以在任何你想要的地方添加<ImgSlider/>。

【讨论】：

【解决方案2】：

要从导入的组件中渲染一些内容，您必须像这样渲染它：

return (
<div className="App" >
 <div className="book-box">
   <img src="" alt=""/>
   <div>
     <h1>Harry Potter</h1>
     {/*Place it where you want to show it */}
     <ImgSlider />
  </div>
 </div>
</div>
 );
}

【讨论】：

【解决方案3】：

只需将<ImgSlider /> 添加到应用程序中

您的最终代码如下所示：

import React from 'react';
import ImgSlider from './ImgSlider';
import './App.css';

function App() {
 return (

 <div className="App" >
 
  <div className="book-box">
    <img src="" alt=""/>
    <div>
      <h1>Harry Potter</h1>
      <ImgSlider />
   </div>
  </div>
 </div>
  );
}

export default App;

【讨论】：