首页 文章

反应组件赢了't render. I' ve检查了其他问题，可以't see what I'米失踪

提问于
浏览 次
2

我试图渲染我的App组件 . 我已经尝试过使用 ReactDOM.render ，但我做出了反应，并且做出了这样的改变 . App组件的文件路径是正确的 . 没有错误 . 当我检查DOM时，div是空的 .

这是html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Hyzer</title>
    <link rel='stylesheet' href='css/application.css'>
  </head>
  <body>

    <div id='app'></div>

    <script type='text/javascript' src='build/bundle.js'></script>

  </body>
</html>

这是index.js：

import React from 'react';
import { render } from 'react-dom';
import App from './components/App.jsx';

render(
  <App />,
  document.getElementById('app')
);

这是App.jsx：

import React, { Component } from 'react';

class App extends Component {
  render() {
    return <h1> Hello World </h1>;
  }
}

export default App;

根据以下要求澄清，编辑添加我的webpack.config.js（删除了测试模块因为它们无关）：

const webpack = require('webpack');
const path = require('path');

const BUILD_DIR = path.resolve(__dirname, './build');

module.exports = {
  mode: 'development',
  context: __dirname,
  entry: {
    main: path.join(__dirname, 'front-end', 'index.js'),
  },
  output: {
    filename: 'bundle.js',
    path: BUILD_DIR,
  },
 };
reactjs

2 回答

  • 1

    莎拉，

    您需要将App.jsx更改为App.js然后它应该工作 . 请更改文件名，以及将其导入index.js时

    import App from './components/App.jsx';

    做了：

    import App from './components/App.js';

    并将文件名从App.jsx更改为App.js.

    回复于
  • 0

    我愚蠢地将webpack捆绑到一个位置 build . 我的项目正在编译到一个目录 dist ，其中我的 index.html 的副本显然也存在 . 一旦我按照@ iceveda06给出的答案更改了软件包的位置和 .jsx 文件类型，应用程序就会按预期呈现 . 谢谢！

    回复于

相关问题