Question

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

当我向app.tsx添加更多代码时，就会出现问题。我又写了两个组件并进行了渲染，但是当我构建解决方案并运行应用程序时，从最初的“ Welcome to 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'));

然后在“应用程序组件”中导入所有其他组件：

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 个答案: