已解决:我已将 yarn 添加到文件中。我删除了它并删除了模块,然后重新安装了 NPM 并且它起作用了......不太确定那里发生了什么,但这似乎做到了。
编辑:事实证明字符串插值无关(使用单引号而不是反引号 - 手掌),但无法评估案例陈述的问题仍然很大。
所以我正在做韦斯·博斯的Redux Course ,这非常酷,到目前为止我很喜欢它,即使它需要很快掌握。
为了让它正常工作,我需要到处更新一些东西。 (例如我的主要组件中的这一行,没有它热重载根本无法工作: module.hot.accept() ,但它不在 his files 中)
我还扩展了 React.Component 而不是使用 .createClass 来尝试更新。除此之外,我的文件大体上与上面链接的他的文件完全相同。
我正在制作第 13 个视频,但我遇到了一个完全阻止我的问题,我无法克服这个问题,我对此只有一个可能错误的想法,但我希望有人可以帮助。
首先,我认为这另一个更琐碎的问题可能相关,我的组件不会按照他的意愿进行字符串插值:
import React from 'react';
import { Link } from 'react-router';
import CSSTransitionGroup from 'react-addons-css-transition-group';
export default class Photo extends React.Component {
constructor(props) {
super(props);
}
render() {
const { post, index, comments } = this.props
return (
<figure className="grid-figure">
<div className="grid-photo-wrap">
<Link to={'/view/${post.code}'}>
<img className="grid-photo" src={post.display_src} alt={post.caption} />
</Link> ...
这对他完全有效,但对我不起作用。链接目标将不会被评估,我将不得不使用:
<Link to={'/view/' + post.code}>
否则 href 将会像这样出现:
http://localhost:7770/view/$%7Bpost.code%7D
无法找到不起作用的原因,我使用了丑陋的字符串添加方法并继续前进。但后来我在几个视频之后遇到了一个停止问题,这让我觉得相似,并且可能相关,所以我在这里询问它。
在他的第 12 个视频中,他用以下代码充实了帖子缩减器:
function posts(state=[], action) {
switch(action.type) {
case 'INCREMENT_LIKES':
const index = action.index;
return [
...state.slice(0,index), // before what we are updating
{...state[index], likes: state[index].likes + 1},
...state.slice(index + 1), // after what we are updating
]
default:
return state;
}
}
export default posts;
这对他来说是预期的。对我来说,一点也不。我得到:
5 | return [
6 | ...state.slice(0,index), // before what we are updating
> 7 | {...state[index], likes: state[index].likes + 1},
| ^
8 | ...state.slice(index + 1), // after what we are updating
9 | ]
10 | default:
我的猜测是,由于某种原因,在这两种情况下,注入(inject)的 ES6 都没有被评估。尽管这两者在其他地方单独工作,因为应用程序中的其他所有内容都依赖于注入(inject)的 JS 或 ES6,直到此时都工作正常。例如,在第一个示例中,post.display_src 在括号内被很好地评估,使用解构的常量赋值也是如此。所以我不知道罪魁祸首是否是括号内的ES6。但这是我唯一的想法,也是我所能接受的。希望有人可以救我,这样我就可以继续教程。
PS - 就像我说的,除了提到的小改动外,我的文件与他的文件基本相同。尽管如此,我还是会在此处包含 webpack.config.dev.js,因为我预计它可能是很多人的第一个停靠点:
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'source-map',
entry: [
'webpack-hot-middleware/client',
'./client/rootMount'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
],
module: {
loaders: [
{
test: /\.js$/,
loaders: ['babel'],
include: path.join(__dirname, 'client'),
},
{
test: /\.styl$/,
include: path.join(__dirname, 'client'),
loader: 'style-loader!css-loader!stylus-loader'
}
]
}
};
以及 .babelrc 文件:
{
"presets": ["react", "es2015"],
"env": {
"development": {
"plugins": [
["transform-object-rest-spread"],
["transform-react-display-name"],
["react-transform", {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}, {
"transform": "react-transform-catch-errors",
"imports": ["react", "redbox-react"]
}]
}]
]
},
"production": {
"plugins": [
["transform-object-rest-spread"],
["transform-react-display-name"]
]
}
}
}
最佳答案
看起来您的代码没有使用反引号 从这里开始:
'/view/${post.code}'
对此:
`/view/${post.code}`
关于javascript - React/Redux 项目未评估括号内的 ES6,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42375196/