小编kri*_*axv的帖子

我已经在StackOverflow和GitHub问题上经历了很多答案,但是,我仍然陷入了Webpack中的热模块替换.我npm start用来运行我的服务器webpack-dev-server --hot --inline.我正在尝试更改我的React组件中的代码,但浏览器中没有任何反应.

我在Ubuntu 14.04LTS上使用Google Chrome版本49.0.2623.87(64位).

在我的浏览器中console,我收到日志消息

[HMR]等待来自WDS的更新信号......

[WDS]启用热模块更换.

但是,没有热/实时重载正在发生.当我在React组件文件中更改代码时,没有显示任何内容.我正在关注本教程的第一个视频,Egghead.io/ReactFundamentals,其中一切正常.

以下是我的package.json和webpack.config.js文件.

的package.json

{
  "name": "react-fundamentals",
  "version": "1.0.0",
  "description": "Fundamentals of ReactJS",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot --inline"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.0.0-rc.2",
    "react-dom": "^15.0.0-rc.2"
  },
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.7.2",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "react-hot-loader": "^1.3.0",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  }
}

webpack.config.js

module.exports = {
  context: __dirname,
  entry: "./main.js", …

我在StackOverflow上经历了很多答案.我在这里也经历了List文档,react-virtualized/List.但是,我仍然无法理解如何在react-virtualized List中动态设置行高.如何计算rowHeight道具功能的高度？

我可以称我的功能为rowHeight={({ index }) => this.computeRowHeight({ index })}.但是该函数将如何计算行高？

以下是供参考的代码.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { AutoSizer, InfiniteLoader, List } from 'react-virtualized';
import _ from 'lodash';

class InfiniteList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: props.list,
      loading: false
    };
  }
  componentDidMount() {
    fetch('http://jsonplaceholder.typicode.com/comments')
      .then((response) => {
        response.json().then((data) => {
          this.setState({
            list: _.concat(this.state.list, _.map(data, 'body')),
            loading: false
          });
        });
      });
  }
  isRowLoaded({ index }) …

我正在尝试使用Google的Material Design Lite和ReactJS.我正在使用MDL库的Spinner Loading和Text Field Component.

但是,当我使用React Router切换路由时,动画不会发生,当我刷新页面时,它工作正常.我想,这可能是因为MDL组件没有升级.然后,我正在尝试使用componentHandler.upgradeDom(),但是Console会抛出错误app.js:27160 Uncaught TypeError: Cannot read property 'upgradeDom' of undefined.

这是代码,

var React = require('react');
var ReactDOM = require('react-dom');
var PropTypes = React.PropTypes;
var MDLite = require('material-design-lite');
var componentHandler = MDLite.componentHandler;

var styles = {
  loader: {
    marginTop: '70px',
  }
}

var Loading = React.createClass({
  render: function() {
    return (
      <div className="mdl-spinner mdl-js-spinner is-active" style={styles.loader}></div>
    );
  },
  componentDidMount: function() {
    componentHandler.upgradeDom();
  },
});

module.exports = …