Question

我有一个组件如下：

    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”表示一个空模块，可以根据“get-campus_id”返回的值填充该模块。

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

Answer 1

您无法从其他组件更改一个组件的状态。您可以做的最好的事情是将它们都作为父组件的子项，然后将参数作为prop传递。然后，您可以使用componentWillReceiveProps(nextProps)拦截新的道具（如果您想根据该状态修改状态）。

从另一个组件反应更新组件状态

1 个答案: