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

Question

I think I have written all the code right, but on the port I can only display app.js file

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;

and I want to import div element from ImgSlider

import React from 'react';

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

   export default ImgSlider;

When i open browser it only shows HARRY POTTER from the App.js, I think it should also display div from the ImgSlider Console massage Line 3:8: 'ImgSlider' is defined but never used no-unused-vars

Thanks for the attention

Answer 1

You arent rendering ImgSlider , just need to do this in 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>
 );

 }

This is just an example, you can add the <ImgSlider/> wherever you want.

Answer 2

To render some content from imported component you have to render it like:

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>
 );
}

Answer 3

Simply add <ImgSlider /> into App

Your final code would look like this:

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;