小编als*_*ion的帖子

forEach over JS6中的es6 Map

我有一个使用渲染组件的javascript数组array.map.我将此数组切换为es6 Map,以便能够使用键值对更轻松地查找项目,并通过Map 从a切换.map到a forEach.在forEach我内部调用一个返回React组件的render方法,但它没有被渲染.如何在里面渲染组件forEach

<div className='gallery__items'>
    {resultsByGuid.forEach((result, index) => {
        key++;
        this.renderGalleryItem(result, key);
    })} 
</div>
Run Code Online (Sandbox Code Playgroud)

这是renderGalleryItem方法:

renderGalleryItem = (item, index) => {
    const { gridItemSelected, itemThumbnailRequested } = this.props;
    return (<GalleryItem key={index}
        item={item}
        onClick={gridItemSelected}
        fetchThumbnailFunc={itemThumbnailRequested}
    />);
};
Run Code Online (Sandbox Code Playgroud)

我明白forEach不返回任何东西,但这是否意味着我无法在其中渲染?

javascript foreach jsx

12
推荐指数
3
解决办法
2万
查看次数

Webpack没有使用react-toolbox加载SCSS

我正在尝试引导一个新的反应应用程序并使用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')),
        },
Run Code Online (Sandbox Code Playgroud)

但是当我包含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',
           ]
         },
Run Code Online (Sandbox Code Playgroud)

这解决了反应工具箱样式没有加载,但是当我尝试在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.

救命 :(

javascript reactjs webpack react-toolbox

4
推荐指数
1
解决办法
3856
查看次数

标签 统计

javascript ×2

foreach ×1

jsx ×1

react-toolbox ×1

reactjs ×1

webpack ×1