I am trying to follow a simply tutorial for a photo gallery FYI https://www.javascriptstuff.com/react-image-gallery/

我正在尝试遵循一个简单的教程为一个图片库供参考https://www.javascriptstuff.com/react-image-gallery/

I think I have followed the steps correctly btw I am a newbie to react. There is a Gallery.js component that I have updated and wish to show some pictures in the about page but its not letting me import

我认为我已经正确地遵循了步骤，顺便说一句，我是一个反应迟钝的新手。我已经更新了一个Gallery.js组件，希望在About页面中显示一些图片，但它不允许我导入

The Gallery.js code is here:

下面是Gallery.js代码：

import React from "react";
import ReactDOM from "react-dom";
import Gallery from "./Gallery";


let urls = [
   "./images/image-1.jpg",
   "./images/image-2.jpg",
   "./images/image-3.jpg",
   "./images/image-4.jpg",
 ];

class Gallery extends React.Component {
   renderImage(imageUrl) {
       return (
         <div>
           <img src={imageUrl} />
         </div>
       );
     }
     render() {
       return (
         <div className="gallery">
           <div className="images">
             {this.props.imageUrls.map(imageUrl => this.renderImage(imageUrl))}
           </div>
         </div>
       );
     }
     
}
Gallery.propTypes = {
 imageUrls: React.PropTypes.arrayOf(React.PropTypes.string).isRequired
};

ReactDOM.render(<Gallery imageUrls={urls} />, document.getElementById("mount"));

export default Gallery;

And all I want to do is import it in my about page like this:

我想要做的就是将它导入我的关于页面，如下所示：

import React from 'react';
import Gallery from '../components/Gallery';

const About = () => {
    return (
        <h1>My photo gallery!</h1>
    <div className='gallery-show'>
      <Gallery/>
    </div>
    );
};

export default About

But I get errors, more specifically

但我收到了错误，更具体地说

about.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

关于.js：相邻的JSX元素必须包装在一个封闭标记中。您是否需要JSX片段<>...？

Now I have also tried to import components this way and its the first time I have come across this error, can someone help in what I am missing pls?

现在我也尝试了用这种方式导入组件，这是我第一次遇到这个错误，有人能帮我弥补一下吗？

You can't tender multiple elements without a wrapper

不能在没有包装的情况下呈现多个元素

const About = () => {
    return (
    <>
        <h1>My photo gallery!</h1>
    <div className='gallery-show'>
      <Gallery/>
    </div>
  </>
  );
};