多个具有反应的 JSX 元素

Question

如果我们要编写多个 JSX 元素，我们必须用父元素或 React Fragment 元素包装它才能成功呈现，有没有办法编写多个 jsx 元素而不需要用任何父元素或片段元素包装它（比如制作片段默认后台不需要写），

function CustomBtn() {
  return (
    <h1>CustomBtn</h1>
    <h1>CustomBtn</h1>
  )
}
i know this will give Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag 

我知道它没用，因为我们可以只使用 react 片段，但这就像一个训练任务来深入挖掘 react 配置

我认为在 babel、webpack 或反应 dom 包中，但我无法解决它，有什么想法吗？

谢谢

Answer 1

这是一个好主意。 但这不是可定制的，原因如下。

React 团队使组件的接口成为单个ReactNode 。 但是对于某些函数，它们还允许节点数组ReactNode[] 。 老实说，它们在内部确实支持数组，否则您将无法执行{arr.map(v => <div />) 。

因此，这不是你喜欢或不喜欢的东西，它是 React 组件的接口定义。 想象一下你设计的组件，你可以选择接受一个数组或者单个。 如果你是作者，你可以做到这一点；）

笔记：

内心深处还有另一个原因，每个组件都接受一个ref 。 ref 是DOM元素引用，因此从一个 ref 到单个 React 节点的单个映射是一种更直接的实现。

Answer 2

您可以返回数组：

function CustomBtn() {
  return [
    <h1>CustomBtn</h1>,
    <h1>CustomBtn</h1>
  ]
}