Question

我要求我已经构建了一些ReactJs组件，但需要在自定义HTML标签（就像普通标签）中使用它们

我试图创建一个仅显示文本“ In board ...”的“ Board”组件。现在，我尝试在HTML页面中将其用作。

我的board.js文件：

class Board extends React.Component {

  render() {

    return (
      <div>

        <div className="status"> In board.... </div>

      </div>
    );
  }
}

我的HTML页面：

<html>
        <head>
        <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
        <script src="board.js" type="text/babel"></script>
        </head>
        <body>
                <Board />
        </body>
</html>

标签必须被视为HTML标签，并应加载React组件并显示文本“ In board ....”。

Answer 1

在这种情况下，您必须使用customElements API创建。您可以使用customElements.define方法创建自己的方法，但名称应用连字符分隔。

window.customElements.define('message-board',
  class extends HTMLElement {
    constructor() {
      super();

      this.innerHTML = '';
    }
  }
);

下面是工作示例。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Board </title>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        <script>
          window.customElements.define('message-board',
            class extends HTMLElement {
              constructor() {
                super();

                this.innerHTML = '';
              }
            });
        </script>
        <script type="text/babel">
          class Board extends React.Component {

            render() {

              return (
                <div>
                  <div className="status"> In board.... </div>
                </div>
              );
            }
          }

            ReactDOM.render(
                <Board />,
                document.getElementsByTagName('message-board')[0]
            );
        </script>
        <script>
            
        </script>
    </head>
    <body>
        <message-board />
    </body>
</html>

Answer 2

创建自定义元素并将React组件呈现给该自定义元素可以如下进行。假设“ Board”是一个React组件。

window.customElements.define('message-board',
    class extends HTMLElement {
      constructor() {
        super();

      }

  connectedCallback() {

          ReactDOM.render(<Board />, this);

        }

    });

将简单的React组件转换为HTML Custom元素的有效解决方案

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Board </title>
   <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
   <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
   <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
   <script crossorigin src="https://unpkg.com/@webcomponents/webcomponentsjs@2.0.3/custom-elements-es5-adapter.js"></script >
   <script type="text/babel">
      class Board extends React.Component {
      
        render() {
      
          return (
            <div>
              <div className="status"> In board.... </div>
            </div>
          );
        }
      }
       
      window.customElements.define('message-board',
        class extends HTMLElement {
          constructor() {
            super();
      
          }
      
      connectedCallback() {
      
              ReactDOM.render(<Board />, this);
      
            }
      
        });
   </script>
</head>
<body>
   <div>
      <message-board  />
   </div>
   <div>
      <message-board  />
   </div>
</body>
</html>

如何在自定义HTML5元素中渲染React App，而不是div [id = root]

2 个答案: