当我更新代码并重建解决方案时，看不到反应应用程序的更改

Question

我使用本教程在 Visual Studio 中创建一个 Node.js 和 React 应用程序。 我成功地遵循了教程中的所有内容，然后按了 Ctrl + F5，我收到了欢迎使用 React 消息。

当我向 app.tsx 添加更多代码时，问题就出现了。 我又编写了两个组件并渲染了它们，但是当我构建解决方案并运行应用程序时，与最初的“欢迎使用 React！！”相比没有任何变化。 信息。 这是我添加到 app.tsx 的附加代码：

 declare var require: any var React = require('react'); var ReactDOM = require('react-dom'); class Hello extends React.Component { render() { return ( <h1>Welcome to Reactive!!</h1> ); } } class Paragraph extends React.Component { render() { return ( <p1>We the best music!! </p1> ); } } class ShoppingList extends React.Component { render() { return ( <div className="shopping-list"> <h1>Shopping List for {this.props.name}</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div> ); } } ReactDOM.render(<Hello />, document.getElementById('root')); ReactDOM.render(<Paragraph />, document.getElementById('main')); ReactDOM.render(<ShoppingList />, document.getElementById('list'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

这是我在 index.html 文件中的代码：

 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="root"></div> <div id="main"></div> <div id="list"></div> <!-- scripts --> <script src="./dist/app-bundle.js"></script> </body> </html>

我应该注意，无论我向 index.html 或 app.tsx 添加什么代码，在构建解决方案时都会显示相同的 Welcome to React 消息。 这是消息的图片：

我应该进一步注意，每次构建 (Ctrl + F5) 时，我都会收到一条消息，说该项目已过期，我要重建它吗？

这是我的 webpack 配置：

 module.exports = { devtool: 'source-map', entry: "./app.tsx", mode: "development", output: { filename: "./app-bundle.js" }, resolve: { extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.jsx', '.tsx'] }, module: { rules: [ { test: /\\.tsx$/, exclude: /(node_modules|bower_components)/, use: { loader: 'ts-loader' } } ] } };

这是我的 package.json：

 { "name": "dcwims-menu", "version": "0.0.0", "description": "DCWIMS MENU", "main": "server.js", "author": { "name": "" }, "dependencies": { "express": "4.16.2", "path": "0.12.7", "react": "16.4.0", "react-dom": "16.4.0", "ts-loader": "4.0.1", "typescript": "2.7.2", "webpack": "4.1.1", "webpack-cli": "2.0.11" } }

Answer 1

好吧，通常在 React 中，你的 index.html 只留下一个

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

并在其中放置一个 App 组件

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

然后在 App Component 中导入所有其他组件：

import { Loading } from '../components/loading.js'
import { GridView } from '../components/news/GridView'
import { TextView } from '../components/news/TextView'
import { FilterTag } from '../components/shared/FilterTag'

class App extends React.Component {
    render() {
        return (
            <div>
            <Loading />
            <GridView />
            <TextView />
            <FilterTag />
            </div>
        );
    }
}

当我更新代码并重建解决方案时，看不到反应应用程序的更改

问题描述

1 个解决方案

解决方案1
1 2018-08-28 16:53:48

当我更新代码并重建解决方案时，看不到反应应用程序的更改

问题描述

1 个解决方案

解决方案1 1 2018-08-28 16:53:48

解决方案1
1 2018-08-28 16:53:48