javascript - 如何编写多个组件

我的React代码在一个组件中，如何使这两个组件分别用于图像容器和陈列室图像？

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

        }

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

最佳答案

我建议您为每个组件创建一个单独的文件，并将其导入到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;

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

关于javascript - 如何编写多个组件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47978624/