Question

因此，我的应用程序在被包装在一个类中后，不再呈现到屏幕上，并且不会发出错误。只显示一个空白屏幕。

我在这里俯瞰什么？

webpack.config

＆＃13;

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'
      ]
    }
    ]
  }
};

＆＃13;

index.js

＆＃13;

import React from 'react';
import ReactDOM from 'react-dom';
import app from './app.js';

ReactDOM.render (
    <app />,
    document.getElementById('root')
)

＆＃13;

app.js

＆＃13;

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;

＆＃13;

但是，如果我删除该类，如下所示，并指定app.js作为我的webpack.config中的条目：指向，则应用程序正确呈现：

＆＃13;

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')
);

＆＃13;

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>
    )
}

React：当包装在React.Component中时，App无法呈现到屏幕

2 个答案: