我有一个组件如下：

    var SingleEditableModule = React.createClass({
        getInitialState: function() {
            return {
                selected: false
            };
        },
        show_overlay: function() {
            $('.overlay').fadeIn();
        },
        render: function() {
            var show_overlay = this.show_overlay;
            return (
                <div className="large-4 small-12 columns">
                    <h3 className="title">{this.props.data.title}</h3>
                    <div className="month">
                        <p>
                            {this.props.data.month}
                        </p>
                    </div>
                    <div className="img-holder">
                        <div 
                            id={this.props.data.id} 
                            onClick={show_overlay} 
                            className="action_wrapper">
                                <span className="swap_trigger"></span>
                                <span className="action">
                                    {this.props.data.action}
                                </span>
                        </div>
                    </div>
                    <h4>{this.props.data.title_description}</h4>
                    <p>{this.props.data.description}</p>
                </div>
            );
        }
    });

我想根据从“get_campus_id”获得的“className”为这个组件分配一个CSS类：

    var Overlay = React.createClass({
        close_overlay: function() {
            $('.overlay').fadeOut();
        },
        get_campus_id: function(className) {
            console.log(className);
        },
        render: function() {
            var options = [],
                get_campus_id = this.get_campus_id;
            this.props.data.map(function(el, i){
                options.push(<li 
                className={el.className} 
                onClick={get_campus_id.bind(null, el.className)} 
                key={i}>{el.location}</li>);
            });
            return (
                <div className="overlay">
                    <div className="overlay-content">
                        <header className="clearfix">
                            <h3 className="float-left">Select your campus rotation</h3>
                            <div onClick={this.close_overlay} className="float-right close">
                                <span className="cancel">Cancel</span> 
                                <span className="x">x</span>
                            </div>
                        </header>
                        <ul>
                            {options}
                        </ul>
                        <footer>
                        </footer>
                    </div>
                </div>
            )
        }
    });

“SingleEditableModule”代表一个空module，它可以根据“get-campus_id”返回的值进行填充。

完整的 github 网址：https : //github.com/WebTerminator/Hult