React 从另一个组件更新组件状态 [英] React update component state from another component

查看：45
本文介绍了React 从另一个组件更新组件状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个组件如下:

 var SingleEditableModule = React.createClass({getInitialState: 函数() {返回 {选择:假};},show_overlay:函数(){$('.overlay').fadeIn();},渲染:函数(){var show_overlay = this.show_overlay;返回 (<div className="large-4 small-12 列"><h3 className="title">{this.props.data.title}</h3><div className="月"><p>{this.props.data.month}</p>

<div className="img-holder">

<span className="swap_trigger"></span><span className="action">{this.props.data.action}</span>

<h4>{this.props.data.title_description}</h4><p>{this.props.data.description}</p>

);}});

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

 var Overlay = React.createClass({close_overlay:函数(){$('.overlay').fadeOut();},get_campus_id:函数(类名){控制台日志(类名)；},渲染:函数(){var 选项 = [],get_campus_id = this.get_campus_id;this.props.data.map(function(el, i){options.push(<liclassName={el.className}onClick={get_campus_id.bind(null, el.className)}key={i}>{el.location});});返回 (<div className="overlay"><div className="overlay-content"><header className="clearfix"><h3 className="float-left">选择你的校园轮换</h3><div onClick={this.close_overlay} className="float-right close"><span className="cancel">取消</span><span className="x">x</span>

</标题><ul>{选项}<页脚></页脚>

)}});

SingleEditableModule"代表一个空模块，可以根据从get-campus_id"返回的值进行填充.

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

解决方案

您不能从另一个组件更改一个组件的状态.您能做的最好的事情是让它们都成为父组件的子组件，然后将参数作为 prop 传递.然后，您可以使用 componentWillReceiveProps(nextProps) 来拦截传入的新道具(如果您想基于此修改状态).

I have one component as follow: 

    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>
            );
        }
    });

I want to assign a CSS class to this component based on "className" gained from "get_campus_id":

    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" represents an empty module which can be populated based on the value returned from "get-campus_id".

Full github url: https://github.com/WebTerminator/Hult

解决方案

You cannot change the state of one component from another component. The best you can do is have both of them being children of a parent component, and then pass parameters as a prop. You can then use componentWillReceiveProps(nextProps) to intercept new props coming in (if you want to then modify a state based on that).

这篇关于React 从另一个组件更新组件状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆