React项目如何同时渲染多个组件？仅渲染最后一个组件问题解决

问题原因 #

React组件的return语法仅支持返回单个根节点，你当前的写法用逗号分隔两个组件，触发了JS的逗号运算符规则，会直接返回最后一个表达式的结果，因此永远只有最后一个组件被渲染。

解决方案 #

你可以选择以下任意一种方式实现多组件同时渲染：

• 方案1：使用React空标签（Fragment语法糖，不会生成额外DOM节点，推荐优先使用）

// 修改后的App.js完整代码
import './App.css';
import Test from './Components/test'
import Test1 from './Components/test1'

function App() {
  return (
    <>
      <Test/>
      <Test1/>
    </>
  );
}

export default App;

• 方案2：使用完整React.Fragment标签（适用于需要给根节点加key属性的场景，比如列表遍历渲染）

function App() {
  return (
    <React.Fragment>
      <Test/>
      <Test1/>
    </React.Fragment>
  );
}

• 方案3：使用通用DOM标签包裹（会生成额外的父级DOM节点，适合需要统一给两个组件加外层样式的场景）

function App() {
  return (
    <div className="app-container">
      <Test/>
      <Test1/>
    </div>
  );
}

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