标签: react-toolbox

我试图让react-toolbox运行.得到错误'找不到模块precss',但它与我从网站上获取的代码相同.我错过了什么吗？

postcss.config.js

module.exports = {
    plugins: [
        require('precss'),
        require('autoprefixer')
    ]
}

webpack.config.js

var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
    template: __dirname + '/app/index.html',    
    filename: 'index.html',
    inject: 'body'
});

module.exports = {

    entry: __dirname + '/app/index.js',
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                loaders: [
                    'style-loader',
                    'css-loader?importLoaders=1',
                    'postcss-loader'
                ]
            }

        ]
    },
    output: {
        filename: 'transformed.js',
        path: __dirname+'/build'
    },
    plugins: [HTMLWebpackPluginConfig]
};

有什么想法吗？

在我的反应应用程序中,我使用此代码的单选按钮:

 <RadioGroup name='steptype' className={css.ProcessStepRadioButtons} value={this.state.stepsData[stepNumber].stepType}
                                onChange={(value, event) => {
                                    this.changeInputOptionHandlerProcessStep(value, "stepType", stepNumber)
                                }}>
                        <RadioButton label={<T value='processes.new.processStepTypeDuty'/>} value={1} />
                        <RadioButton label={<T value='processes.new.processStepTypeVariable'/>} value={2}/>
                        <RadioButton label={<T value='processes.new.processStepTypeOptioanal'/>} value={3}/>
                    </RadioGroup>

和这个处理程序:

export function changeInputOptionHandlerProcessStep(value, field, step) {
this.setState((prevState) => ({
    stepsData: prevState.stepsData.map((currentStep, i) => {
        if (i === step) {
            return {
                ...currentStep,
                [field]: value
            }
        }
        return currentStep
    })
}), () => {
    console.log("New state in ASYNC callback:", this.state.stepsData);
} );
}

状态设置正确,但单选按钮不能直观切换,

在这种情况下可能是什么问题？

谢谢

更新this.state.stepsData的控制台日志

更新this.state.stepsData右侧bevore渲染的控制台日志

输入日期自定义.js

    从'react-toolbox/lib/date_picker/DatePicker'导入DatePicker；

    import React, { Component } from 'react';

    const datetime = new Date(2015, 10, 16);
    const min_datetime = new Date(new Date(datetime).setDate(8));
    日期时间.setHours(17);
    日期时间.setMinutes(28);


    导出默认类 InputDateCustomizado 扩展组件{


        状态 = {date2: 日期时间};
        handleChange = (item, value) => {
            console.log(item+" - "+value)
            this.setState({...this.state, [item]: value});
        };


      使成为（） {
        返回 （
            

                 日期选择器
                    标签 = {this.props.label}
                    语言环境 = {语言环境示例}                
                    名称 = {this.props.name}
                    required = {this.props.required}
                    onChange = {this.handleChange.bind(this, 'date1')}
                    值 = {this.state.date1}
                  />
             
            );
        }

}

其他组件：Cadastro.js

    构造函数（道具）{
        超级（道具）；
        this.state = {msg: '', fim_vigencia:'', …

我想在 React 中无限期地重新加载静态 URL 上的图像。通过一些搜索，我得出了以下不太理想的解决方案。它有效，但我想消除图像加载的闪烁。我意识到问题在于组件被重新渲染，然后图像加载。我见过几个例子，它们使用两个图像，一个作为占位符，加载一个隐藏直到使用onLoad和加载setState，但它们都假设图像数量有限。如何使其显示最后一个图像，直到CardMedia加载新图像，然后每五秒更换一次而不闪烁？

import React from 'react';
import ReactDOM from 'react-dom';

import { Card, CardMedia, CardTitle } from 'react-toolbox/lib/card';

const LIVE_IMAGE = 'https://cdn-images-1.medium.com/max/1600/1*oi8WLwC2u0EEI1j9uKmwWg.png';

class LiveImageCard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      liveImage: null
    };
  }

  componentDidMount() {
    this.interval = setInterval(
      () => this.setState({
        liveImage: `${LIVE_IMAGE}?${new Date().getTime()}`,
      }),
      5000
    );
  }
  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {

    return (
      <Card style={{width: '350px'}}>
        <CardTitle title="Live Image" />
        <CardMedia
          aspectRatio="wide"
          image={this.state.liveImage}
        /> …

我正在尝试引导一个新的反应应用程序并使用react-toolbox库和webpack.我无法同时获得react-toolbox的样式和我自己的应用程序样式.

我习惯导入scss文件的方式来自它们使用的react文件/视图/组件,因此它们位于同一个文件夹中.因此,如果我有一个名为header.js的react组件文件,则在同一目录中有header.scss.Header.js调用import './header.scss'.在webpack中,我以前用来加载scss的是:

        {
            test: /\.s?css$/i,
            loader: 'style!css!sass?' +
                'includePaths[]=' + (path.resolve(__dirname, './node_modules')),
        },

但是当我包含react-toolbox时,这个设置完全排除了react-toolbox的样式.我发现这个问题https://github.com/react-toolbox/react-toolbox/issues/121其中mattgi推荐这个webpack-config:

        {
           test    : /(\.scss|\.css)$/,
           include : path.join(__dirname, '../../', 'src'),
           loaders : [ 'style', 'css', 'sass' ]
         },
         {
           test    : /(\.scss|\.css)$/,
           include : /(node_modules)\/react-toolbox/,
           loaders : [
             require.resolve('style-loader'),
             require.resolve('css-loader') + '?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
             require.resolve('sass-loader') + '?sourceMap',
           ]
         },

这解决了反应工具箱样式没有加载,但是当我尝试在js文件中导入我自己的 scss文件时,webpack会为scss文件抛出此错误:( You may need an appropriate loader to handle this file type.我安装了sass-loader).

另外,如果我将scss文件包含在同一目录中的同名(some-react-class.js和some-react-class.scss),那么导入some-react-class.js的SomeReactClass的包含组件将它作为一个对象而不是一个函数导入,使它看起来像是导入scss而不是js.

救命 :(

这里是Webpack业余爱好者...我正在尝试theme.scss通过遵循此处指定的指示来合并文件以自定义React Toolbox使用的主题：

如果将Webpack用作模块捆绑程序，则可能也使用sass-loader。我们要做的是在每个SASS文件编译之前添加一堆要覆盖的变量，这可以使用data选项来完成。例如：

sassLoader：{数据：'@import“'+ path.resolve（__ dirname，'theme / _theme.scss'）+'”;' }

在这种情况下，我们会将主题导入添加到每个SASS编译的前面，以便在每个样式表中更改原色。

我在使用当前的webpack配置执行该指令时遇到问题，如下所示：

const webpack = require('webpack');
const path = require('path');
let ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    context: path.join(__dirname, 'client'),
    entry: [
        './main.js',
    ],
    output: {
        path: path.join(__dirname, 'www'),
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    'babel-loader',
                ],
            },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: {
                            modules: true,
                            sourceMap: true,
                            importLoaders: 1,
                            localIdentName: "[name]--[local]--[hash:base64:8]"
                        }
                    }, …