Question

是否无法访问构建链接到的html文件中已有的“已构建”组件？

我正在尝试以下内容 -

在bundle.js中

var React = require('react');
var ReactDOM = require('react-dom');

     var Titles = React.createClass({
       render() {

          return (
             <div>
                <h1>{this.props.headerProp}</h1>
                <h2>{this.props.contentProp}</h2>
             </div>
          );
       }
    });

在我的html页面中 -

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>

    <div id="con"></div>
        <script type="text/javascript" src="/public/bundle.js'"></script>

      <script type="text/jsx">

    ReactDOM.render(<Titles headerProp = "Header from props..." contentProp = "Content
       from props..."/>, document.getElementById('con'));
        </script>

但是没有定义控制台输出React。

我甚至试图在捆绑中全局设置反应 -

window.React = React;

用窗口调用它。前缀但产生相同的结果。

Answer 1

由于您提及的bundle.js文件包含commonjs样式导入的代码段，因此我假设您正在使用Webpack。

我对你的代码有一些考虑。

bundle.js文件不会将任何模块公开为全局模块。这包括React和捆绑包内可能require的任何其他模块。没有window.ModuleName。但是，可以通过require.js在浏览器中访问这些模块，因为Webpack会将模块导出为UMD，也就是说，可以通过commonjs或AMD（Require.js）访问它们。 / LI>
我非常确定，如果在您的网络包配置文件的入口点中，您执行类似var React = require("react"); window.React = React的操作，那么它实际上将起作用。
Webpack模块旨在以比（2）称为expose-loader更为优雅的方式全局公开模块（如window.x）。你应该看看它。
你应该尽量避免做你想做的事情。在您的entry.js文件（webpack配置的入口点）应该负责执行ReactDOM.render(..., document.getElementById("#app"))之类的操作。所以，只要包含您的软件包，该应用就会自动呈现。每个人都这样做。
JSXTransformer.js以及<script type="text/jsx">已被弃用。现在你应该使用Babel来编译React。

从.html文件访问webpack /捆绑的React类

1 个答案: