在 React 类组件内部渲染常量答案

【问题标题】：Rendering a Constant Inside of a React Class Component在 React 类组件内部渲染常量
【发布时间】：2021-05-28 14:32:43
【问题描述】：

我有一个关于在 React 类组件中使用常量呈现内容的方式的快速问题。所以下面的代码可以正常工作（使用 map 函数渲染一个常量）：

class App extends React.Component {

array = [
   {
      name: "Sarah",
      age: 27
   },
   {
      name: "Sam",
      age: 35
   }
 ]

render() {
  const output = this.array.map(elem => (
      <div>
        <p>{elem.name}</p>
        <p>{elem.age}</p>
      </div>
  ));
    return (
      <div>{output}</div>
    );
  }
}

但是，以下会产生一个空白页面（我只是定义一个返回 div 并尝试呈现它的常量）：

class App extends React.Component {

  render() {
    const Output = () => (
        <div>Hello</div>
    );
    return (
      <div>{Output}</div>
    );
  }
}

但如果我使用角括号而不是花括号，则几乎相同的代码可以工作：

class App extends React.Component {
  render() {
    const Output = () => (
      <div>Hello</div>
    )
    return (
      <div>
        <Output />
      </div>
    )
  }
}

所以看起来这与大括号和尖括号有关。花括号在我使用 map 函数时起作用，但当我在渲染方法中定义一个返回 div 的常量并尝试直接渲染它时不起作用。然后当我使用尖括号时它再次起作用......这有点奇怪。我知道这远非最重要的事情，我只是想弄清楚这一点。提前谢谢！

【问题讨论】：

标签： reactjs constants rendering

【解决方案1】：

尖括号用于渲染组件。由于您已将 Output 定义为返回一些 JSX 的函数，因此就 React 而言，这使其成为函数组件（或者更确切地说是 Babel，它处理 JSX 的转换）。

您可以使用大括号，但您应该将 Output 更改为 React 节点。以下是你的做法：

class App extends React.Component {

  render() {
    const Output = <div>Hello</div>
    return (
      <div>{Output}</div>
    );
  }
}

查看THIS 答案以了解有关 React 节点、元素等之间差异的一些说明。

【讨论】：

谢谢。因此，在我的示例中，使用 map 进行渲染的原因是 map 返回一个数组或对象，它不是组件或函数，因此可以用花括号进行渲染，这是否正确？
好吧，map 总是会返回一个新数组。从来没有一个对象。当然，数组可以包含任何东西，包括 React 组件（函数或对象）。使用大括号还是尖括号的问题取决于您是渲染节点还是组件。另外值得一提的是，由于output 是一个常量，您最好避免在渲染方法中定义它，因为您每次（重新）渲染组件时都重新定义它。

【解决方案2】：

class App extends React.Component {

  render() {
    const Output = () => (
        <div>Hello</div>
    );
    return (
      <div>{Output()}</div>
    );
  }
}

如果您尝试调用函数 Output()，它将返回 JSX，但请遵循 article 他们不建议这样做

【讨论】：