Question

我甚至无法让我的根应用程序组件进行渲染。我加载localhost并成功加载index.html，没有js错误，但没有任何内容呈现给页面。如果没有错误，我无法确定问题:)。我查看了我的代码，但我不知道这笔交易是什么。我是React的新手所以...可能是下面的一系列问题，我不知道。

server.js

var express = require('express'),
    app = express();

app.set("view options", {layout: false});
app.use(express.static('.'));
app.set('views', __dirname + '/');
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

app.get('/', function (req, res) {
    res.render('index.html');
});

app.listen(4000, function () {
    console.log('Example app listening on port 4000!');
});

的index.html

<!DOCTYPE html>
<html lang="en">
    <head></head>
    <body>
        <div class="ink-grid vertical-space">
            <div id="content">
                <div class="panel vertical-space">
                    <div id="app"/>
                </div>
            </div>
        </div>
        <script type="text/babel" src="index.js"></script>
    </body>
</html>

index.js

import React from 'react';
import { render } from 'react-dom';

import App from 'src/components/App';

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

App.js

import React, { Component } from 'react';
import CompanyList from 'src/components/CompanyList';

class App extends Component {
    render() {
        return (
            <div id="companyList">
                <CompanyList />
            </div>
        );
    }
}

export default App

CompanyList.js

import React, { Component } from 'react';

class CompanyList extends Component{
    render(){
        return (
            <h3>No Companies Found</h3>
        );
    }
}
export default CompanyList

Answer 1

由于脚本标记上有type="text/babel"，因此无效。此类型旨在与现已弃用的babel browser一起使用，以在浏览器中转换ES6和JSX。

您必须将类型更改为“text / javascript”才能运行该文件。但是，由于浏览器不了解JSX和ES6的某些部分，这将主要抛出错误。

除了使其工作之外，您还需要做的是使用构建系统（例如webpack）来使用babel转换ES6和JSX，并将您的文件捆绑到浏览器可以使用的内容中。试试这个guide。

如果您只是想在没有构建系统麻烦的情况下进行反应，可以使用React Base Fiddle。

React组件无法渲染

1 个答案: