我正在使用 Webpack 捆绑一些以 JSX 格式编写的 React 代码。就编译而言，我已经完成并运行了所有内容，并且看起来 bundle.js 输出文件中的所有内容都是正确的。当我将其导入 HTML 文件并尝试显示 React 代码时，由于某种原因它没有显示。我制作了一个常规的 javascript 文件并将其包含在 main.js 中，以便它也包含在 Webpack 输出文件 bundle.js 中，并且这确实显示在浏览器。因此，当在我的 html 文件中使用 bundle.js 时，我只会收到文本“Hello，im located in a single file”，而不是 React 元素。
react 代码(main.js)
require('./extra.js');
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
常规JS文件(extra.js)
document.write("Hello, im located in a seperate file");
运行webpack(bundle.js)后的输出文件
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
__webpack_require__(1);
React.render(React.createElement(
"h1",
null,
"hello world"
), document.getElementById("app"));
var HelloMessage = React.createClass({
displayName: "HelloMessage",
render: function () {
return React.createElement(
"div",
null,
"Hello ",
this.props.name
);
}
});
ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode);
/***/ },
/* 1 */
/***/ function(module, exports) {
/**
* Created by sf on 1/14/2016.
*/
document.write("Hello, im located in a seperate file");
/***/ }
/******/ ]);
使用脚本中的 HTML 文件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="example"></div>
<script src="bundle.js" type="text/javascript"></script>
</body>
</html>
最佳答案
React homepage 上的示例不是自给自足的，而是 React 本身的最小示例。以下是您使用的示例的外观，以 index.js 开头:
var React = require( 'react' );
var ReactDOM = require( 'react-dom' );
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
var mountNode = document.getElementById( 'app' );
ReactDOM.render(<HelloMessage name="John" />, mountNode);
还有你的index.html:
<html>
<body>
<div id="app"></div>
<script src="./build/bundle.js"></script>
</body>
</html>
请注意，它需要一个名为 bundle.js 的脚本，而我们的源代码名为 index.js。要转换 JSX 并将我们的源代码打包到 bundle 中，我们可以使用具有以下基本配置的 Webpack:
var webpack = require( 'webpack' );
module.exports = {
context: __dirname + '/src',
entry: './index.js',
devtool: 'source-map',
output: {
path: __dirname + '/build',
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loaders: [ 'babel-loader?presets[]=react' ],
}
],
},
};
关于html - React 代码未在浏览器中显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34797840/