Question

我想我已经正确编写了所有代码，但是在端口上我只能显示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

感谢关注

Answer 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/>。

Answer 2

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

kube-system

Answer 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;

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

3 个答案: