在使用Webpack的本地范围时,如何将classNames传递给react组件?

时间:2015-08-21 16:10:13

标签: javascript reactjs webpack

我使用Webpack’s local scope创建了作为其所属组件范围的CSS类。

我有一个<Icon /> React组件,如下所示:

Icon.js

'use strict';

var React = require('react')
var styles = require('./Icon.css')

module.exports = React.createClass({

    propTypes: {
        iconName: React.PropTypes.string.isRequired,
        height: React.PropTypes.number,
        width: React.PropTypes.number,
        classes: React.PropTypes.string
    },

    getDefaultProps() {
        return {
            iconName: 'cloud',
            height: 36,
            width: 36,
            classes: ''
        };
    },

    render() {

        var iconSize = {
            height: this.props.height + 'px',
            width: this.props.width + 'px'
        }

        return (
            <i className={this.props.classes + ' ' + styles[this.props.iconName]} style={iconSize} />
        )
    }
})

...使用CSS看起来像这样:

Icon.css

.base {
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    left: 0;
    position: absolute;
    top: 0;
}
.cloud {
    composes: base;
    background-image: url("./images/cloud.svg");
    transform: translate3d(0, -12px, 0);
}
.apps {
    composes: base;
    background-image: url("./images/apps.svg");
    transform: translate3d(0, -11px, 0);
}

我将其拉入另一个名为<Capsule />的组件中,我需要以<Capsule />组件特定的方式对其进行定位。

Capsule.js

'use strict';

var React = require('react')
var styles = require('./Capsule.css')

var Icon = require('../Icon/Icon.jsx')

module.exports = React.createClass({

    propTypes: {
        clickable: React.PropTypes.bool.isRequired,
        iconName: React.PropTypes.string,
        label: React.PropTypes.string,
        cta: React.PropTypes.string
    },

    getDefaultProps() {
        return {
            clickable: true,
            iconName: '',
            label: '',
            cta: ''
        };
    },

    render() {
        return (
            <div className={styles.withIcon}>
                {this.props.iconName ? <Icon classes={styles.icon} iconName={this.props.iconName} /> : ''}
                {this.props.label ? <span className={styles.label} dangerouslySetInnerHTML={{__html: this.props.label}} /> : ''}
                {this.props.children}
                {this.props.cta ? <span className={styles.cta}>{this.props.cta}</span> : ''}
            </div>
        )
    }
})

Capsule.css

.icon {
    left: 31px;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
}

.base {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
    box-sizing: border-box;
    color: rgb(114, 110, 101);
    font-size: 11px;
    margin-top: 24px;
    min-height: 54px;
    padding: 20px;
    position: relative;
}
.base + .base { margin-top: 8px; }
.clickable {
    composes: base;
    cursor: pointer;
}
.withIcon {
    composes: base;
    padding-left: 62px;
}
.label {}
.cta {
    color: rgb(216, 213, 210);
}

您将看到我在<Icon />组件中呈现<Capsule />组件,并且我已经传入classes道具。这是因为我需要使用.icon中的本地范围Capsule.css类来将<Icon />正确定位在<Capsule />内。它现在工作得很好,但我不太确定这是理想的,甚至是正确的方法。

结果截图:

enter image description here

改善建议?非常感谢我能得到的任何帮助。

0 个答案:

没有答案