反应：应用程序不包括在React.Component中时渲染到屏幕

Question

所以，我的应用程序被封装在一个类中后，不再呈现到屏幕上，也没有发出错误。只显示一个空白屏幕。

我在这里忽略了什么？

webpack.config

var path = require('path'); 
 
var webpack = require('webpack'); 
 
const Dotenv = require('dotenv-webpack'); 
 

 
module.exports = { 
 
    devtool: 'source-map', 
 
    entry: [ 
 
    'webpack-hot-middleware/client', 
 
    './client/index' 
 
    ], 
 
    output: { 
 
    path: path.join(__dirname, 'public'), 
 
    filename: 'bundle.js', 
 
    publicPath: '/static/' 
 
    }, 
 
    plugins: [ 
 
    new webpack.HotModuleReplacementPlugin(), 
 
    new webpack.NoEmitOnErrorsPlugin(), 
 
    new Dotenv({ 
 
     path: './.env', // Path to .env file (this is the default) 
 
     safe: true // load .env.example (defaults to "false" which does not use dotenv-safe) 
 
    }) 
 
    ], 
 
    module: { 
 
    rules: [ 
 
    // js 
 
    { 
 
     test: /\.js$/, 
 
     use: ['babel-loader'], 
 
     include: path.join(__dirname, 'client') 
 
    }, 
 
    // CSS 
 
    { 
 
     test: /\.styl$/, 
 
     include: path.join(__dirname, 'client'), 
 
     use: [ 
 
     'style-loader', 
 
     'css-loader', 
 
     'stylus-loader' 
 
     ] 
 
    } 
 
    ] 
 
    } 
 
};

index.js

import React from 'react'; 
 
import ReactDOM from 'react-dom'; 
 
import app from './app.js'; 
 

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

app.js

import React from 'react'; 
 
import { render } from 'react-dom'; 
 
import { Provider } from 'react-redux'; 
 
import { Router, Route, IndexRoute, Redirect } from 'react-router' 
 
import 'babel-polyfill'; 
 
import { ApolloProvider, graphql, gql } from 'react-apollo'; 
 
import client from './apolloClient'; 
 
    
 
import App from './components/App'; 
 
import Single from './components/Single'; 
 
import PhotoGrid from './components/PhotoGrid'; 
 
import LoginUser from './components/LoginUser'; 
 

 
import css from './styles/style.styl'; 
 

 
import store, { history } from './store'; 
 

 
import Raven from 'raven-js'; 
 
import { sentry_url } from './data/config'; 
 

 
if(window) { 
 
    Raven.config(sentry_url).install(); 
 
} 
 

 
import * as OfflinePluginRuntime from 'offline-plugin/runtime'; 
 

 
if (process.env.NODE_ENV === 'production') { 
 
    OfflinePluginRuntime.install(); 
 
} 
 

 
class app extends React.Component { 
 

 
    render() { 
 
    return (
 
     <ApolloProvider store={store} client={client}> 
 
     { /* Tell the Router to use our enhanced history */ } 
 
     <Router history={history}> 
 
      <Route path="/" component={App}> 
 
      <IndexRoute component={PhotoGrid} /> 
 
      <Route path="/view/:postId" component={Single}></Route> 
 
      <Route path="/login" component={LoginUser}></Route> 
 
      </Route> 
 
     </Router> 
 
     </ApolloProvider> 
 
    ) 
 
    } 
 
} 
 

 
export default app;

但如果我删除了类，如下所示，并指定app.js作为入门：在我webpack.config点，然后应用程序正确渲染：

render(
 
    <ApolloProvider store={store} client={client}> 
 
    { /* Tell the Router to use our enhanced history */ } 
 
    <Router history={history}> 
 
     <Route path="/" component={App}> 
 
     <IndexRoute component={PhotoGrid} /> 
 
     <Route path="/view/:postId" component={Single}></Route> 
 
     <Route path="/login" component={LoginUser}></Route> 
 
     </Route> 
 
    </Router> 
 
    </ApolloProvider>, 
 
    document.getElementById('root') 
 
);

Answer 1

jsx中的所有反应类必须具有大写的第一个字母。您需要更新您的index.js相应

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './app.js'; 

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

如果你要看看你的代码的HTML输出，你可能会看到<app></app>，你预计你的组件插入

Answer 2

怎么样尝试无状态组件：

export default function App() { 
    return (
     <ApolloProvider store={store} client={client}> 
     { /* Tell the Router to use our enhanced history */ } 
     <Router history={history}> 
      <Route path="/" component={App}> 
      <IndexRoute component={PhotoGrid} /> 
      <Route path="/view/:postId" component={Single}></Route> 
      <Route path="/login" component={LoginUser}></Route> 
      </Route> 
     </Router> 
     </ApolloProvider> 
    ) 
}