代码之家 › 专栏 › 技术社区 › stloc

添加到网站:如何导入外部节点模块?

npm reactjs

stloc · 技术社区 · 7 年前

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>

像_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页面,但我有一个错误“未捕获引用错误:未定义Facebook”

1 回复 | 直到 7 年前

Peter Ambruzs 7 年前

我从来没有试过这个密码 Add React to a Website

第二个问题是您不能在这里使用导入。您必须找到包的名称空间。我注销了窗口对象,检查了它,它是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>

我认为您可以尝试这种方式,但不建议在生产中使用巴别塔。我强烈建议安装node并使用createreact应用程序。这样,您就可以在短时间内使用整个工具链。

或事件在CodeSandbox.io上创建新的React沙盒

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

11 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前