首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >无法解析'react-horizontal-scrolling-menu/build/scrollMenu‘

无法解析'react-horizontal-scrolling-menu/build/scrollMenu‘
EN

Stack Overflow用户
提问于 2020-09-23 16:13:31
回答 1查看 639关注 0票数 2

我有一个反应js代码在一个magento pwa应用程序。

它有一个名为categoryList的组件,我需要为该类别列表添加一个水平滚动菜单。

以下是我的代码

代码语言:javascript
运行
复制
const mapCategory = categoryItem => {
    const { items } = categoryItem.productImagePreview;
    return {
        ...categoryItem,
        productImagePreview: {
            items: items.map(item => {
                const { small_image } = item;
                return {
                    ...item,
                    small_image:
                        typeof small_image === 'object'
                            ? small_image.url
                            : small_image
                };
            })
        }
    };
};

const list = [
    { name: 'item1' },
    { name: 'item2' },
    { name: 'item3' },
    { name: 'item4' },
    { name: 'item5' },
    { name: 'item6' },
    { name: 'item7' },
    { name: 'item8' },
    { name: 'item9' }
];
const MenuItem = ({ text, selected }) => {
    return (
        <div
            className="menu-item"
        >
            {text}
        </div>
    );
};
export const Menu = (list) => list.map(el => {
    const { name } = el;

    return (
        <MenuItem
            text={name}
            key={name}
        />
    );
});
const Arrow = ({ text, className }) => {
    return (
        <div
            className={className}
        >{text}</div>
    );
};
const ArrowLeft = Arrow({ text: '<', className: 'arrow-prev' });
const ArrowRight = Arrow({ text: '>', className: 'arrow-next' });

const CategoryList = props => {
    const { id, title } = props;
    const talonProps = useCategoryList({
        query: categoryListQuery,
        id
    });
    const { childCategories, error, loading } = talonProps;

    const classes = mergeClasses(defaultClasses, props.classes);
    console.log('ssss' +childCategories);
    const header = title ? (
        <div className={classes.header}>
            <h2 className={classes.title}>
                <span>{title}</span>
            </h2>
        </div>
    ) : null;

    let child;
    if (error) {
        child = (
            <div className={classes.fetchError}>
                Data Fetch Error: <pre>{error.message}</pre>
            </div>
        );
    }
    if (loading || !childCategories) {
        child = fullPageLoadingIndicator;
    } else if (childCategories.length === 0) {
        child = (
            <div className={classes.noResults}>No child categories found.</div>
        );
    } else {

        const { selected } = this.state;
        // Create menu from items
        const menu = Menu(list, selected);
        child = (
            <div className={classes.content}>
                {childCategories.map((item, index ) => (
                    <CategoryTile item={mapCategory(item)} key={index} />
                ))}
                <ScrollMenu data={menu}
                arrowLeft={ArrowLeft}
                arrowRight={ArrowRight}
                onSelect=''
                />
            </div>
        );
    }
    return (
        <div className={classes.root}>
            {header}
            {child}
        </div>
    );
};

CategoryList.propTypes = {
    id: number,
    title: string,
    classes: shape({
        root: string,
        header: string,
        content: string
    })
};

export default CategoryList;

当我尝试使用这段代码时,我得到了以下错误。该错误似乎与未解析特定的包或模块有关。

代码语言:javascript
运行
复制
ERROR in ./src/components/CategoryList/categoryList.js
Module not found: Error: Can't resolve 'react-horizontal-scrolling-menu/build/scrollMenu' in '/var/www/html/apekade/apekade-pwa/packages/pwa-neosolax/src/components/CategoryList'
ℹ 「wdm」: Failed to compile.

我不知道我放的代码是否正确。我是一个beginner.Please帮助

EN

回答 1

Stack Overflow用户

发布于 2021-01-28 07:53:37

运行一个简单的"npm install --update --save“对我来说很管用,我花了一个小时来解决这个问题。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64023693

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档