Question

我试图阻止渲染方法重新渲染状态变化。

我有路线文件如下：

var routes = (
    <Route path="/" component={App}>
        <IndexRoute component={HomePage}/>
        <Route path="registration" component={RegistrationPage}/>
    </Route>
);

然后我有我的主要应用程序组件：

var App = React.createClass({
    getInitialState: function(){
        return {
            lang: 1
        };
    },

    changeLang: function(name, event){

        switch (name){
            case "fra" :
                this.setState({lang: 2});
                break;
            case "ger" :
                this.setState({lang: 3});
                break;
            case "ned" :
                this.setState({lang: 4});
                break;
            default:
                this.setState({lang: 1});
        }
    },
    render: function () {
        var currentRoute = this.props.location.pathname.slice(1);
        var header = currentRoute === "" ? <Header onClick={this.changeLang} lang={this.state.lang}/> : <HeaderCompact currentRoute={currentRoute} onClick={this.changeLang} lang={this.state.lang}/>;
        return (
            <div>
                {header}
                {React.cloneElement(this.props.children, { lang: this.state.lang })}
                <Footer lang={this.state.lang}/>
            </div>

        );
    }
});

module.exports = App;

如果在组件中发生click，我想禁用重新渲染。 HeaderCompact组件用于我的注册页面，当我单击更改注册页面上的语言时，App组件中的初始状态会更改并呈现函数重新呈现，我再次获得索引页面路径。

我想要的是，如果我点击标志来更改headerCompact组件中的语言，我的应用程序组件中的状态会发生变化，但该路由保持不变，即（<Route path="registration" component={RegistrationPage}/>）保留并且它是＆＃39 ; s未更改为（<IndexRoute component={HomePage}/>）。

修改

发生问题的My HeaderCompact组件是：

<div className="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                            <ul className="langAndBtn">
                                <li className={phoneNrLi}>
                                    <Link to="/" className={hideNed} style={{marginRight: 10}} onClick={this.props.onClick.bind(this, 'ned')}><img src="../images/languages/nl.png" /></Link>
                                    <Link to="/" className={hideEng} style={{marginRight: 10}} onClick={this.props.onClick.bind(this, 'eng')}><img src="../images/languages/gb.png" /></Link>
                                    <Link to="/" className={hideFra} style={{marginRight: 10}} onClick={this.props.onClick.bind(this, 'fra')}><img src="../images/languages/fr.png" /></Link>
                                    <Link to="/" className={hideGer} onClick={this.props.onClick.bind(this, 'ger')}><img src="../images/languages/ger.png" /></Link>
                                </li>
                                {regButton}
                            </ul>
                        </div>

防止渲染方法在反应js中重新渲染

0 个答案: