我看了类似但无法找到一个解决我的问题的概念.我找不到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) 我是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) 我正在使用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)