2

現在、React と CSS モジュールを使用する大規模なプロジェクトに取り組んでいます。リスト項目の束に「react-anything-sortable」を実装したいと考えています。

これまでのところ、「react-anything-sortable」が「react-anything-component」内の子に次のクラスを追加するため、実装は停止しています: .ui-sortable、.ui-sortable-item、.ui-draggableおよび .ui-sortable-placeholder。これらは、どのDOM要素がドラッグ、配置などされているかを認識するために「react-anything-sortable」に渡されるクラスであると思います.

次のように .scss ファイルを参照して、List コンポーネントのスタイルをインポートします。

import styles from './WidgetList.scss'

コンポーネントでスタイルを使用するには、styles.CLASS を追加してクラスを使用する必要があります。

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

したがって、'react-anything-sortable' によって配置される .ui-sortable は、.styles を追加しないため、スタイルシートを参照する方法がないことは理解できます。

ここに画像の説明を入力 他の div 要素が「ハッシュ化された」className (それぞれの css モジュール内のクラスが見つかったことを示す) を持つ方法を簡単に確認できますが、ui-sortable を持つ div にはクラスしかありませんが、.scss ファイルにアクセスする方法はありません。 .ui-sortable のスタイル プロパティを含む

これを修正するにはどうすればよいですか?

編集：これが私がそれを実装している方法です

WidgetList.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>
    }
}

WidgetList.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

className を制御ui-sortableできない場合、つまり css モジュールを使用できない場合は、代わりにこれらの className を「グローバル」クラスとしてエクスポートできます。

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

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

同じセレクターにグローバルとローカルの className の組み合わせがある場合は、個々の className を「global」として指定することもできます。

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