ReactJS添加新组件遇JSX单根元素限制问题求助

嘿，我完全懂你碰到的这个麻烦——React的JSX规则就是每个组件的render方法必须返回单个根元素，你想添加<Body/>组件的时候，肯定是直接把它放在了现有根元素的外面，导致出现了两个顶层元素对吧？

咱们先看你的Main.js代码，现在的render返回是一个<div className="Main">包裹着<Header/>，如果取消<Body/>的注释后写成下面这样，就触发了React的报错：

// 错误示例：存在两个独立根元素
return (
  <div className="Main">
    <Header image={require('./demo.jpg')}/>
  </div>
  <Body/>
);

下面给你几种简单的解决办法：

1. 用一个父容器包裹所有元素（最直接） #

如果你不介意多一个DOM节点，直接把<Body/>放到现有的<div className="Main">里面就行，或者新建一个父容器把所有元素包起来：

class Main extends Component {
  render() {
    return (
      <div className="Main">
        <Header image={require('./demo.jpg')}/>
        <Body/> {/* 直接放在这个div内，就只有一个根元素了 */}
      </div>
    );
  }
}

这种方式适合你需要给整体添加样式或者布局的场景。

2. 使用React Fragment（推荐，无额外DOM节点） #

如果不想在DOM里多一个多余的div，React提供了Fragment组件，它能帮你把多个元素组合成一个“虚拟”的根元素，不会在页面上生成实际的DOM节点。

有两种写法：

• 完整Fragment标签（需要先导入）：

import React, { Component, Fragment } from "react";
import Header from './Header';
import Body from './Body';
import './index.css';

class Main extends Component {
  render() {
    return (
      <Fragment>
        <div className="Main">
          <Header image={require('./demo.jpg')}/>
        </div>
        <Body/>
      </Fragment>
    );
  }
}

• 短语法（空标签，React 16.2+支持）：

class Main extends Component {
  render() {
    return (
      <>
        <div className="Main">
          <Header image={require('./demo.jpg')}/>
        </div>
        <Body/>
      </>
    );
  }
}

这种方式既满足了React的单根元素要求，又不会给DOM结构添负担，非常适合大多数场景。

本质上，只要保证你的render方法最终返回的是单个顶层元素（不管是真实DOM元素还是Fragment），这个问题就解决啦。

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