[React] Return a list of elements from a functional component in React

最新推荐文章于 2025-08-10 19:50:19 发布

weixin_30470857

最新推荐文章于 2025-08-10 19:50:19 发布

阅读量84

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Answer1215/p/10263475.html

本文介绍在React中返回多个元素而不使用额外包裹组件的两种方法，通过直接返回元素数组来简化代码结构，避免不必要的<div>包裹。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

We sometimes just want to return a couple of elements next to one another from a React functional component, without adding a wrapper component which only purpose would be to wrap elements that we want to render.

In this one minute lesson we are going to learn how to solve this problem by returning an array of components and as such - avoid adding unnecessary div wrappers.

Way 1:

import React from "react";
import "./App.css";

const App = () => {
  return (
    <>
      <div className="box">One</div>,
      <div className="box">Two</div>,
      <div className="box">Three</div>
    </>
  );
};

export default App;

Way 2:

import React from "react";
import "./App.css";

const App = () => {
  return [
    <div className="box">One</div>,
    <div className="box">Two</div>,
    <div className="box">Three</div>
  ];
};

export default App;

转载于:https://www.cnblogs.com/Answer1215/p/10263475.html