小编Chr*_*tty的帖子

我是React的新手,我正在努力解决我认为简单的问题.这是我构建的组件的图片.

颜色拣选组件

我想要完成的事情似乎微不足道,但实际上我读过的每篇文章都解释了要做的事情告诉我一些不同的事情,而且其中一个解决方案并没有奏效.它分解为:当用户点击标签时,它会构建一个托盘并循环遍历一系列颜色以构建颜色按钮.单击颜色按钮时,需要将单击的颜色传递给其父组件并运行函数以更新其颜色.我已经读过关于焊剂,事件冒泡,将"this"绑定到属性,并且这些解决方案似乎都没有起作用.对于像我这样的新手来说,React文档基本上没用.我想在这一点上避免像flux这样的复杂事件结构,因为我将一些简单的组件附加到我最初没有在React中编写的现有应用程序中.

另外,PS,这个代码在JSX中,对我来说比直接JS反应更有意义.在此先感谢您的帮助!

var colorsArray = ["#ED5851", "#9CCC64", "#337AEC", "#ff7a45", "#7E58C2", "#FFEB3B", "#78909C", "#FFFFFF", "#213a4b"];

var EditDrawer = React.createClass({
    updateColor: function() {
        console.log("New Color: " + i);
    },
    render: function(){
        var passTarget = this;
        return (
            <div className="container-fluid animated fadeIn extra-fast-animation tag-edit-drawer">
                <div className="row">
                    <div className="col-xs-12">
                        {colorsArray.map(function(object, i){
                            return <ColorButton buttonColor={object} key={i} />;
                        })}
                    </div>
                </div>
            </div>
        );
    }
})

var ColorButton = React.createClass({
    render: function(){
        var buttonStyle = {
            backgroundColor: this.props.buttonColor,
        };
        return (
            <div className="tag-edit-color-button" style={buttonStyle} > …

每当我尝试运行生产 webpack 构建时，我都会收到此错误。

ERROR in ./~/css-loader!./~/sass-loader!./assets/src/css/nav.scss
Module build failed: BrowserslistError: Unknown version 55 of and_chr

经过一番尝试和错误后，看起来这是一个与 default 相关的问题UglifyJsPlugin。如果将其删除，它将正确构建，但它也不再是生产构建。我已经用谷歌搜索了好几天，试图在任何地方找到这个问题，但似乎没有人见过类似的东西。我的每一个 SASS 文件都会重复上述错误。

我正在努力解决这个问题，任何帮助将不胜感激。让我知道您可能需要哪些其他信息。

这是我的 webpack 生产配置的副本：

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    entry: {app: './assets/src/app.js', common: './assets/src/common.js'},
    devtool: 'cheap-module-source-map',
    output: {
        filename: './assets/build/[name].bundle.js',
    },
    watch: false,
    module: {
        loaders: [
            { test: /\.json$/, loader: "json-loader" },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015', …