Reactjs 在React类组件内呈现常量

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

类应用程序扩展了React.Component{
数组=[
{
姓名：“莎拉”，
年龄:27
},
{
姓名：“山姆”，
年龄:35
}
]
render（）{
常量输出=this.array.map（elem=>(
{elem.name}

{elem.age}

));
返回(
{output}
);
}
} 

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

类应用程序扩展了React.Component{
render（）{
常量输出=（）=>(
你好
);
返回(
{Output}
);
}
}

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

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

类应用程序扩展了React.Component{
render（）{
常量输出=（）=>(
你好
)
返回(
)
}
}

看起来这和这个卷曲的尖括号有关。当我使用map函数时，大括号起作用，但当我在render方法中定义一个返回div的常量并尝试直接渲染它时，大括号起作用。当我使用角括号时，它又起作用了。。。这有点奇怪。我明白这远不是最重要的事情，我只是想弄清真相。提前谢谢你

类应用程序扩展了React.Component{
class App extends React.Component {

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

render（）{
常量输出=（）=>(
你好
);
返回(
{Output（）}
);
}
}

如果您尝试调用函数Output（），它将返回JSX，但按照此操作，他们不建议类应用程序扩展React.Component{ render（）{ 常量输出=（）=>( 你好 ); 返回( {Output（）} ); } }

---

如果您尝试调用函数Output（），它将返回JSX，但按照此操作，他们不建议使用角括号来渲染组件。因为您已经将

Output

定义为一个返回一些JSX的函数，所以就React而言，它是一个函数组件（或者更确切地说是Babel，它处理JSX的传输）

您可以使用花括号，但随后应将

Output

更改为React节点。以下是您如何做到这一点：

类应用程序扩展了React.Component{
render（）{
常量输出=Hello
返回(
{Output}
);
}
}

---

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

角括号用于渲染组件。因为您已经将

Output

定义为一个返回一些JSX的函数，所以就React而言，它是一个函数组件（或者更确切地说是Babel，它处理JSX的传输）

您可以使用花括号，但随后应将

Output

更改为React节点。以下是您如何做到这一点：

类应用程序扩展了React.Component{
render（）{
常量输出=Hello
返回(
{Output}
);
}
}

---

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

谢谢。在我的示例中，使用map进行渲染之所以有效，是因为map返回的数组或对象不是组件或函数，因此可以用大括号进行渲染，对吗？嗯，

map

将始终返回一个新数组。从来没有一个物体。当然，数组可以由任何内容组成，包括React组件（函数或对象）。是否使用大括号或尖括号的问题取决于渲染的是节点还是组件。另外值得一提的是，由于

output

是一个常量，您最好避免在render方法中定义它，因为每次组件（重新）渲染时您都会重新定义它。谢谢。在我的示例中，使用map进行渲染之所以有效，是因为map返回的数组或对象不是组件或函数，因此可以用大括号进行渲染，对吗？嗯，

map

将始终返回一个新数组。从来没有一个物体。当然，数组可以由任何内容组成，包括React组件（函数或对象）。是否使用大括号或尖括号的问题取决于渲染的是节点还是组件。另外值得一提的是，由于

output

是一个常量，您最好避免在render方法中定义它，因为每次组件（重新）渲染时都会重新定义它。

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>
    );
  }
}