小编Abd*_*bdi的帖子

使用webpack-dev-server时,webpack build中缺少bundle.js

我看了类似但无法找到一个解决我的问题的概念.我找不到bundle.js文件,即使我指定它应该输出到哪里,一切都在浏览器中工作.据我所知,webpack-dev服务器正在从内存中加载文件而没有任何内容被写入磁盘,我如何获取文件并将其添加到配置文件中output属性中指定的目录?

这是我的package.json:

    {
    "name": "redux-simple-starter",
    "version": "1.0.0",
    "description": "Simple starter package for Redux with React and Babel support",
    "main": "index.js",
    "repository": "git@github.com:StephenGrider/ReduxSimpleStarter.git",
    "scripts": {
     "start": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js -- content-base build"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
      "babel-core": "^6.2.1",
      "babel-loader": "^6.2.0",
      "babel-preset-es2015": "^6.1.18",
      "babel-preset-react": "^6.1.18",
      "react-hot-loader": "^1.3.0",
     "webpack": "^1.12.9",
     "webpack-dev-server": "^1.14.0"
     },
     "dependencies": {
     "babel-preset-stage-1": "^6.1.18",
     "react": "^0.14.3",
     "react-dom": "^0.14.3",
     "react-redux": "^4.0.0",
     "redux": "^3.0.4"
    }
    }
Run Code Online (Sandbox Code Playgroud)

webpack配置:

    var path = require('path');
    var webpack = require('webpack');

    module.exports = {
     entry: [
       'webpack-dev-server/client?http://localhost:8080', …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs webpack webpack-dev-server

7
推荐指数
2
解决办法
7687
查看次数

React子组件不会在父状态更改时重新呈现

我是React的新手,在SO中查看了类似的问题,找不到任何问题.这可能是微不足道的,但请耐心等待.

我有嵌套组件

const IndicatorsSteepCardContainer = React.createClass({
getInitialState () {

    return {
        steep: {
            Social: true,
            Tech: true,
            Economy: true,
            Ecology: true,
            Politics: true
        }, 

        data: indicatorData
    }
}

 render () {

    let props = this.props;
    let state = this.state;
    console.log('STATE inside steepcardcontainer >>>>', this.state.data);
    // VisualisationContainer to have different data eventually
    return (
        <div className="indicators">
            <h3 className="description-text">Tap on an issue group below to filter indicators available in the data visualisation. Tap it again to return to the full list of …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs

5
推荐指数
1
解决办法
4040
查看次数

如何使用高阶组件进行身份验证时延迟检查redux存储

我正在使用react,redux,react-router和更高阶的组件.我有一些用户需要登录才能查看的受保护路由,我将这些路由包含在一个更高阶的组件中,我会尝试尽可能清楚地给出一个上下文,所以请耐心等待.这是我的高阶组件(HOC):

import React from 'react';
import {connect} from 'react-redux';
import { browserHistory } from 'react-router';

export function requireAuthentication(Component, redirect) {

class AuthenticatedComponent extends React.Component {

    componentWillMount() {
        this.checkAuth();
    }

    componentWillReceiveProps(nextProps) {
        this.checkAuth();
    }

    checkAuth() {
        if (!this.props.isAuthenticated) {
            browserHistory.push(redirect);
        }
    }

    render() {
        console.log('requireAuthentication render');
        return (
            <div>
                {this.props.isAuthenticated === true
                    ? <Component {...this.props}/>
                    : null
                }
            </div>
        )

    }
}

const mapStateToProps = (state) => ({
    isAuthenticated: state.loggedIn
});

return connect(mapStateToProps)(AuthenticatedComponent);

}
Run Code Online (Sandbox Code Playgroud)

HOC检查redux存储以查看用户是否已登录并且能够执行此操作,因为返回的Auth组件已连接到redux存储.

这就是我在使用路由器的路由中使用HOC的方式:

import React, { Component } …
Run Code Online (Sandbox Code Playgroud)

javascript authentication reactjs react-router redux

3
推荐指数
1
解决办法
1004
查看次数