Reactjs 使用react中的功能组件时按钮不工作

我是一个新手，有人告诉我，使用函数组件比使用类组件更好，我遇到了一个错误，我无法显示我包含的组件，我真的不明白什么是错误的，因此解释可能是错误的

请查看我的沙盒链接以了解错误

我的代码如下

import React from "react";
import { Button } from "antd";

const Order = () => {
  const showAction = () => {
    <Button type="primary" size="small">
      {" "}
      {"View"}
    </Button>;
    <h1>Here</h1>;
  };
  return (
    <div>
      <h1>Hello{showAction()} Button is here</h1>
    </div>
  );
};

export default Order;

我希望它显示Hello{Button}Here按钮在这里，但是它显示

---

Hello按钮在这里

这是工作代码：

从React导入React； 从antd导入{Button}； 常量顺序==>{ 常量showAction==> { } {View} 在这里 ; 回来 你好{showAction}按钮在这里 ; }; 导出默认订单； 下面是您的代码的错误：

showAction函数没有返回任何内容，因为您使用了大括号而不是圆括号。 所有jsx元素都必须有一个父元素。请注意，我添加了一个包装按钮和标题组件的。您也可以使用或选择任何其他组件/标签。

---

以下是工作代码：

从React导入React； 从antd导入{Button}； 常量顺序==>{ 常量showAction==> { } {View} 在这里 ; 回来 你好{showAction}按钮在这里 ; }; 导出默认订单； 下面是您的代码的错误：

showAction函数没有返回任何内容，因为您使用了大括号而不是圆括号。 所有jsx元素都必须有一个父元素。请注意，我添加了一个包装按钮和标题组件的。您也可以使用或选择任何其他组件/标签。

---

@Jalaj已经很好地解决了这个问题，所以我唯一想补充的是，对于showAction元素，您可以完全跳过添加括号或大括号。在执行此操作时，JS假定返回语句。这将像一个魅力：

const showAction = () => 
    <Fragment>
      <Button type="primary" size="small">
        {" "}
        {"View"}
      </Button>
      <h1>Here</h1>
    </Fragment>

---

@Jalaj已经很好地解决了这个问题，所以我唯一想补充的是，对于showAction元素，您可以完全跳过添加括号或大括号。在执行此操作时，JS假定返回语句。这将像一个魅力：

const showAction = () => 
    <Fragment>
      <Button type="primary" size="small">
        {" "}
        {"View"}
      </Button>
      <h1>Here</h1>
    </Fragment>

---

你可能错过了表演中的回归function@KaungKhantZaw谢谢你的帮助！我已经挣扎了这么长时间，但这样一个简单的回答你是受欢迎的。你可能会错过你的表演回报function@KaungKhantZaw谢谢你的帮助！我已经挣扎了这么久，但这么简单的回答你是受欢迎的。