2

目前正在从事一个使用 React 和 CSS 模块的大型项目。我想在一堆列表项上实现“react-anything-sortable”。

到目前为止，实现已经停滞不前，因为“react-anything-sortable”将以下类添加到“react-anything-component”内的任何子项中：.ui-sortable、.ui-sortable-item、.ui-draggable和 .ui-sortable-placeholder。我假设这些是为“react-anything-sortable”传递的类，以识别正在拖动、放置等的 DOM 元素。

我通过引用 .scss 文件来导入我的 List 组件的样式，如下所示：

import styles from './WidgetList.scss'

要在组件上使用样式，您需要添加 styles.CLASS 以使用类：

<div className={styles.container}>Something</div>

因此，'react-anything-sortable' 放置的 .ui-sortable 无法引用样式表是可以理解的，因为它不添加 .styles。

在此处输入图像描述 可以很容易地看到其他 div 元素如何具有“散列”类名（表明已在其各自的 css 模块中找到该类），但是，具有 ui-sortable 的 div 仅具有该类，但无法访问 .scss 文件包含 .ui-sortable 的样式属性

我该如何解决？

编辑：这是我实施它的方式

小部件列表.js：

import React from 'react';
import ThinScrollbar from 'components/Scrollbars/ThinScrollbar';
import PureComponent from '../PureComponent';

import Sortable from 'react-anything-sortable';
import { sortable } from 'react-anything-sortable';
import styles from './WidgetList.scss';

@sortable
class WidgetListItem extends PureComponent {
    render() {
        return (
            <div {...this.props}>
                {this.props.children}
            </div>
        )
    }
}

export default class WidgetList extends PureComponent {
    constructor() {
        super();
        this.state = {};
    }

    handleSort(data) {
        this.setState({
            result: data.join(' ')
        });
        console.log(this.state.result)
    }

    toggleCheckbox(evt) {
        console.log(evt)
    }

    render() {
        let items = [1,2,3,4,5,6]
        // TODO: move widget creation to its own component <WidgetItem/>
        const widgetItems = items.map(i => {
            return (
                <WidgetListItem className="vertical" sortData={i} key={i}> //<--- this is where .ui-sortable-item is added on render
                    <div className={styles.item} i={i}>
                        <i className={styles.fa}></i>{`Widget ${i}`}
                        <div className={styles.checkbox} onClick={this.toggleCheckbox}></div>
                    </div>
                </WidgetListItem>
            )
        })
        return <div className={styles.container}>
            <ThinScrollbar>
                <Sortable onSort={::this.handleSort} className="vertical-container" direction="vertical"> //<--- this is where .ui-sortable is added on render
                    {widgetItems}
                </Sortable>
            </ThinScrollbar>
        </div>
    }
}

小部件列表.scss

@import "../../theme/variables";

.container {
    width: 100%;
    height: calc((100% - 335px) / 2);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0 4px 0 10px;
}

.item {
    border-left: 5px solid #46484C;
    background-color: #303236;
    padding: 8px;
    min-height: 36px;
    font-size: 12px;
    line-height: normal;
    cursor: pointer;
    margin-bottom: 5px;
    margin-right: 15px;
}

.item:hover {
    background-color: #34363b;
}

.item:last-of-type {
    margin-bottom: 0;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #b7b7b7;
    margin-right: 8px;
}

.fa:before {
    content: '\f07b';
}

.checkbox {
    width: 20px;
    height: 20px;
    float: right;
    background: url('img/checkboxes.gif') 0 0 no-repeat;
}

.activeCheckbox {
    composes: checkbox;
    background-position: 0 -20;
}

.ui-sortable {
    display: block;
    position: relative;
    overflow: visible;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.ui-sortable:before,
.ui-sortable:after {
    content: " ";
    display: table;
}

.ui-sortable:after {
    clear: both;
}

.ui-sortable .ui-sortable-item {
    float: left;
    cursor: move;
}

.ui-sortable .ui-sortable-item.ui-sortable-dragging {
    position: absolute;
    z-index: 1688;
}

.ui-sortable .ui-sortable-placeholder {
    display: none;
}

.ui-sortable .ui-sortable-placeholder.visible {
    display: block;
    z-index: -1;
}

.vertical-container {
    width: 200px;
    height:500px;
    padding: 10px;
    border: 1px #ccc solid;
    background-color: red;
}

.vertical.ui-sortable-item {
    float: none;
    display: block;
    width: 100%;
    padding: 10px 5px;
    margin-bottom: 10px;
    border: 1px #eee solid;
    background-color: red;
}
4

1 回答 1

0

如果您无法控制ui-sortable类名，即不能使用 css 模块，则可以将这些类名导出为“全局”类：

/* Will be hashed */
.activeCheckbox {
    background-position: 0 -20px;
}

/* Will be left as 'ui-sortable' */
:global .ui-sortable {
    display: block;
}

如果您在同一个选择器中有全局和本地类名的组合，您还可以将单个类名指定为“全局”：

/* 'ui-sortable' will be left as 'ui-sortable', 'bar' will be hashed */
:global(.ui-sortable) .bar {
    display: block;
}
于 2016-07-25T12:04:54.923 回答