Question

该资源https://reactjs.org/docs/add-react-to-a-website.html的基本组成部分已集成到我的静态网站中

<body>
  <div id="like_button_container"></div>

  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-content-loader@3.4.1/dist/react-content-loader.min.js" crossorigin></script>

  <!-- Load our React component. -->
  <script src="like_button.js"></script>    
</body>    
</html>

like_button.js：

'use strict';

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

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return (
      <div>
        <button onClick={() => this.setState({ liked: true }) }>
          Like
        </button>
        <Facebook /> ???????????
      </div>
    );
  }
}

let domContainer = document.querySelector('#like_button_container');
ReactDOM.render(<LikeButton />, domContainer);

如何在此组件中使用外部模块，例如https://www.npmjs.com/package/react-content-loader？

我尝试将脚本https://unpkg.com/react-content-loader@3.4.1/dist/react-content-loader.min.js添加到组件中具有导入位置的html页面中，但是出现错误“ Uncaught ReferenceError：未定义Facebook”

Answer 1

我从没尝试过React文档的Add React to a Website一章中的代码。这是修改它的好时机。

您的附加代码存在多个潜在问题。您不会在index.html中加载Babel。至少在这个问题上。因此，您不能在like_button.js中使用jsx语法。

第二个是您不能在此处使用导入。您必须找到包的名称空间。我注销了窗口对象，并检查了它是ContentLoader。

剩下的很容易，我用babel创建了一个独立的index.html： https://codesandbox.io/s/w27pjmq355

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>Hello React!</title>

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script
      src="https://unpkg.com/react-content-loader@3.4.1/dist/react-content-loader.min.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  </head>

  <body>
    <div id="root"></div>

    <script type="text/babel">
      console.log('window', window);
      class App extends React.Component {
        render() {
          return (
            <div>
              <h1>Hello world!</h1>
              <ContentLoader.Facebook />
            </div>
          );
        }
      }

      ReactDOM.render(<App />, document.getElementById('root'));
    </script>
  </body>
</html>

我认为您可以尝试以这种方式使用React，但是在生产环境中不建议像这样使用Babel。我强烈建议安装节点并使用create-react-app。这样，您可以立即使用整个工具链。

或者事件在CodeSandbox.io上创建一个新的React沙箱

添加对网站的反应：如何导入外部节点模块？

1 个答案: