在 React Class 组件中渲染常量

Question

我有一个关于在 React class 组件中使用常量呈现内容的方式的快速问题。所以下面的代码工作正常（使用 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>
    );
  }
}

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

class App extends React.Component {

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

但是如果我使用 angular 代替花括号，那么实际上相同的代码可以工作：

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

所以这似乎与大括号和 angular 括号有关。当我使用 map 函数时花括号起作用，但当我在渲染方法中定义一个常量 returns a div 并尝试直接渲染它时，花括号不起作用。然后当我使用 angular 括号时它再次工作......这有点奇怪。我知道这远不是最重要的事情，我只是想弄个水落石出。提前致谢！

Answer 1

class App extends React.Component {

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

如果你尝试调用一个函数 Output() 它将 return JSX 但是遵循这个 article 他们不推荐

Answer 2

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

您可以使用大括号，但您应该将 Output 更改为 React 节点。以下是您的操作方式：

class App extends React.Component {

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

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

在 React Class 组件中渲染常量

Rendering a Constant Inside of a React Class Component

reactjs

constants

rendering