React组件导入报错：相邻JSX元素需包裹在闭合标签中

一、先解决About页面的报错 #

你遇到的Adjacent JSX elements must be wrapped in an enclosing tag错误，是因为React要求组件return返回的JSX必须被单个根元素包裹，而你当前的About组件直接返回了<h1>和<div>两个同级元素，没有外层容器。

有两种解决方式：

方式1：用div包裹所有元素 #

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

const About = () => {
    return (
        <div>
            <h1>My photo gallery!</h1>
            <div className='gallery-show'>
                {/* 注意：必须给Gallery传必填的imageUrls属性 */}
                <Gallery imageUrls={[
                    "./images/image-1.jpg",
                    "./images/image-2.jpg",
                    "./images/image-3.jpg",
                    "./images/image-4.jpg"
                ]} />
            </div>
        </div>
    );
};

export default About

方式2：用React Fragment包裹（无额外DOM节点） #

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

const About = () => {
    return (
        <>
            <h1>My photo gallery!</h1>
            <div className='gallery-show'>
                <Gallery imageUrls={[
                    "./images/image-1.jpg",
                    "./images/image-2.jpg",
                    "./images/image-3.jpg",
                    "./images/image-4.jpg"
                ]} />
            </div>
        </>
    );
};

export default About

二、修复Gallery组件的潜在问题 #

你的Gallery组件本身存在几个错误，不修复后续也会出问题：

1. 循环导入自己：删掉import Gallery from "./Gallery";，否则会触发模块循环引用报错
2. 组件文件不应包含ReactDOM.render：这行代码是用来在入口文件（比如index.js）挂载整个应用的，组件只需要导出即可，删掉ReactDOM.render(<Gallery imageUrls={urls} />, document.getElementById("mount"));
3. 新版React已废弃React.PropTypes：需要安装prop-types包并替换使用
4. 给map渲染的元素加key：避免React渲染警告
5. 给img加alt属性：符合网页可访问性规范

修复后的Gallery.js #

首先安装依赖：

npm install prop-types

修改后的代码：

import React from "react";
import PropTypes from 'prop-types';

class Gallery extends React.Component {
  renderImage(imageUrl) {
    return (
      <div>
        <img src={imageUrl} alt="Gallery image" />
      </div>
    );
  }

  render() {
    return (
      <div className="gallery">
        <div className="images">
          {this.props.imageUrls.map((imageUrl, index) => (
            <div key={index}>{this.renderImage(imageUrl)}</div>
          ))}
        </div>
      </div>
    );
  }
}

Gallery.propTypes = {
  imageUrls: PropTypes.arrayOf(PropTypes.string).isRequired
};

export default Gallery;

内容的提问来源于stack exchange，提问作者MrRabbit