将React库添加到网站时，如何将class组件转换为功能组件？

Question

I want to use react component in html file.我想在 html 文件中使用反应组件。 It is for micro frontend.它适用于微前端。 So I follow this react official doc for Add React to a Website .所以我按照这个 React 官方文档将 React 添加到网站。

The sample code is as below:示例代码如下：

index.html index.html

<html>
  <body>
    
    <p>
      This is the first like.
      <div class="like_button_container" data-commentid="1"></div>
    </p>

    <p>
      This is the second like.
      <div class="like_button_container" data-commentid="2"></div>
    </p>

    <p>
      This is the third like.
      <div class="like_button_container" data-commentid="text"></div>
    </p>

    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

    <script src="like_button.js"></script>

  </body>
</html>

like_button.js like_button.js

"use strict";

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {

    return e(
      "button",
      {
        onClick: () =>
          this.setState((prevState) => ({
            liked: !prevState.liked,
          })),
      },
      this.state.liked ? "Liked " + this.props.commentID : "Unliked"
    );
  }
}

document.querySelectorAll(".like_button_container").forEach((domContainer) => {
  const commentID = domContainer.dataset.commentid;
  ReactDOM.render(e(LikeButton, { commentID: commentID }), domContainer);
});

Above code is working fine but I want to convert like_button.js , which is class component into functional component.上面的代码工作正常，但我想将class组件 like_button.js 转换为功能组件。

Thanks in advance.提前致谢。

Answer 1

You need to use babel standalone script to transcompile the code, and you need to include the script for react and react-dom , use these will work.您需要使用babel standalone script来转换代码，并且需要包含react和react-dom的脚本，使用它们就可以了。

<html>
<head>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script crossorigin src="https://unpkg.com/@babel/standalone@7.15.7/babel.min.js"></script>
</head>
<body>
    <div id="react-container"></div>
    <script type="text/babel">
        const App = () => <div>Hello!</div>
        ReactDOM.render(
        <App />, document.getElementById('react-container'))
    </script>
</body>
</html>

Babel Standalone converts ECMAScript 2015+ into the compatible version of JavaScript for your browser, CDN usage is described in official documentation, check babel standalone section: Babel Standalone Babel Standalone 将 ECMAScript 2015+ 转换为适用于您的浏览器的 JavaScript 兼容版本，CDN 的使用在官方文档中有描述，查看 babel standalone 部分： Babel Standalone

将React库添加到网站时，如何将class组件转换为功能组件？

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-10-04 12:57:26

将React库添加到网站时，如何将class组件转换为功能组件？

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-10-04 12:57:26

解决方案1
1 已采纳 2021-10-04 12:57:26