从 JSX 函数返回一个数组并在别处解构它

Question

目前正在对 JSX 进行一些试验并遇到了这个想法：

我能做到：

import React from 'react'

const Test = () => {    
  return <div>Test</div>
}
export default Test

然后将此文件导入其他地方并执行：

<Test />

如果我从我的 JSX 文件中 return 数组为什么不一样？

import React from 'react'

const Test = () => {
  let arr = [
    <div>Test 1</div>,
    <div>Test 2</div>,
  ]
  return arr;
}
export default Test

然后：

let [firstElement, secondElement] = Test();

return ( 
  <div> 
    <firstElement /> 
  </div> 
 )

在这两种情况下，我要渲染的都是非常普通的 <div>。在第一种情况下，它是直接 returned，在第二种情况下，它是从数组中解构的。但是，第二种情况对我不起作用？应该吗？

PS：我知道我可以做到 {firstElement} - 但为什么不能 <firstElement />？

Answer 1

以下应该有效：

  let arr = [
    () => <div>Test 1</div>,
    () => <div>Test 2</div>,
  ]

您目前正在做的是调用 React.createElement 两次。

首先在数组 (<div>Test 1</div) 中调用它，然后 return 从函数中创建的元素，然后通过调用 <firstElement/> 再次渲染它。

旁注，firstElement 应该是大写的，否则（我认为）JSX 转换器会将其视为原生 DOM 元素，而不是您的自定义组件，稍后将导致抛出）。

因此，要么将数组中的内容更改为组件，如上所述 (() => <div>Test 1</div>)，要么将 <firstElement /> 更改为 {firstElement}

无论哪种方式，您正在做的事情都非常骇人听闻，应该只是出于好奇。 Test 应编码为：

const Test = () => {
  const arr = [
    <div>Test 1</div>,
    <div>Test 2</div>,
  ];
  return <>{arr}</>;
}

Answer 2

这两个div已经是react元素，是react创建的对象，不是组件。要渲染它们，请使用表达式（大括号）：

const test = () => [
  <div>Test 1</div>,
  <div>Test 2</div>,
]

const [firstElement, secondElement] = test();

const Demo = () => (
  <div> 
    {firstElement}
  </div> 
)

ReactDOM.render(
  <Demo />,
  root
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

从 JSX 函数返回一个数组并在别处解构它

Returning an array from a JSX function and destructuring it elsewhere

javascript

reactjs

jsx

destructuring