从JSX函数返回数组并将其销毁

问题描述

此刻在JSX上进行了一些实验，并遇到了这个想法：

我可以这样做：

<Test />

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

import React from 'react'

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

如果我从JSX文件中返回数组，为什么不能正常工作？

let [firstElement,secondElement] = test();

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

然后：

<div>

在两种情况下，我试图渲染的都是非常普通的{firstElement}。在第一种情况下，它是直接返回的；在第二种情况下，它是从数组中解构的。但是，第二种情况对我不起作用？应该吗？

PS：我知道我可以做<firstElement />-但为什么不行"curl -s -X GET -u ${authString} \'${sonarProps['sonar.host.url']}/api/measures/component?" + "metricKeys=coverage,duplicated_lines_density" + "&component=${sonarQubeProjectName}&branch=${branchName}\'" ？

解决方法

以下方法应该起作用：

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

---

您当前正在打两次React.createElement。

首先在数组（<div>Test 1</div中调用它，然后从该函数返回已经创建的元素，然后通过调用<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}</>;
}

,

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

<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>

{{1}}