javascript - react : App not rendering to screen when wrapped in React. 组件

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 中的所有 React 类的首字母必须大写。您需要相应地更新您的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>您希望将组件插入的位置