2

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

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

以下是我的代码

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;

尝试使用此代码时出现以下错误。该错误似乎与不解决特定包或模块有关。

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.

我不知道我是否放置了正确的代码。我是初学者。请帮助

4

1 回答 1

0

经过一个小时的努力解决了这个问题，运行一个简单的“npm install --update --save”对我有用。

于 2021-01-27T23:53:37.343 回答