如何编写多个组件

Question

我的反应代码在一个组件中，如何为图像容器和陈列室图像制作这两个组件？

  import React, { Component } from 'react';
  export default class App extends Component {


    render() {
       return (
       <div className="container-fluid">    
       <div className="images-container images" >

        <img src="images/image1.jpg" /> 
        <img src="images/image2.jpg" /> 
        <img src="images/image3.jpg" /> 
        <img src="images/image4.jpg" /> 
        <img src="images/image5.jpg" /> 
        <img src="images/image6.jpg" />
      <hr/>
     <p><span className="glyphicon glyphicon-heart-empty like">
        </span>Like</p>
       </div>       




        <div className="showroom images-container1 " >
           <img src="images/showroom.jpg" /> 
           </div>             
        </div> 
    );
      }

        }

任何帮助将不胜感激，谢谢。

Answer 1

我建议你为每个组件创建一个单独的文件，然后在app.js中导入。

你的app.js

import React, { Component } from 'react';
import Images from './Images';
import Showroom from './Showroom';

  export default class App extends Component {


    render() {
         return (
               <div>
                  <Images />
                  <Showroom />
               </div>
          );
   }
}

你的Images.js在同一个文件夹中。

import React, { Component } from 'react';
   class Images extends Component {


    render() {
         return (
               <div className="container-fluid">    
               <div className="images-container images" >

                <img src="images/image1.jpg" /> 
                <img src="images/image2.jpg" /> 
                <img src="images/image3.jpg" /> 
                <img src="images/image4.jpg" /> 
                <img src="images/image5.jpg" /> 
                <img src="images/image6.jpg" />

                <p><span className="glyphicon glyphicon-heart-empty like">
                </span>Like</p>
               </div>  
          );
   }
}


export default Images;

你的Showroom.js在同一个文件夹中。

import React, { Component } from 'react';
   class Showroom extends Component {


    render() {
         return (

                <div className="showroom images-container1 " >
                   <img src="images/showroom.jpg" /> 
                   </div>             
                </div> 

          );
   }
}


export default Showroom;

希望你能得到答案。让我知道。谢谢

Answer 2

import React, { Component } from 'react';

export default class Images extends Component {
render() {
return (
   <div className="container-fluid">    
   <div className="images-container images" >

    <img src="images/image1.jpg" /> 
    <img src="images/image2.jpg" /> 
    <img src="images/image3.jpg" /> 
    <img src="images/image4.jpg" /> 
    <img src="images/image5.jpg" /> 
    <img src="images/image6.jpg" />
    <hr/>
    <p><span className="glyphicon glyphicon-heart-empty like">
    </span>Like</p>
    </div>       

);
}

}


export default class Showroom extends Component {
render() {
return (
    <Images />
    <div className="showroom images-container1 " >
       <img src="images/showroom.jpg" /> 
       </div>             
    </div> 
);
}

}


export default class App extends Component {
render() {
return (
<Showroom />

);
}

}