防止组件被 React-router 卸载 [英] Prevent component be unmounted with React-router

问题描述

当涉及到

这是 ReactJS 代码:

/*全局定义、Backbone、React、$、Request、Router、Route、Link */var App = React.createClass({渲染:函数(){返回 (<div><h1>应用</h1><ul><li><Link to="/about">关于</Link></li><li><Link to="/timer">Timer</Link></li>{this.props.children}

)}});var About = React.createClass({渲染:函数(){返回<h3>这里是关于页面</h3>}});var Timer = React.createClass({getInitialState:函数(){返回{计数器:0}；},渲染:函数(){返回 (<div><h2>时间在流逝...</h2><b>{this.props.interval}</b><p>{this.state.counter}</p>

)},componentDidMount: 函数 () {this.loadCommentsFromServer();setInterval(this.loadCommentsFromServer, 1000);},loadCommentsFromServer: 函数 () {this.setState({计数器: this.state.counter + 1});}});React.render((<路由器位置=历史"><Route path="/" component={App}><Route path="about" component={About}/><Route path="timer" component={Timer}/></路线></路由器>), document.body);

解决方案

如果您想在不卸载的情况下再次显示组件，您可以始终显示它并在路由离开时隐藏它.为了达到这个地方，你可以在目标路线之外，例如你想阻止 ProjectsList 从 unmout:

 <IndexRoute 组件={ProjectsList}/>.....

1.将 ProjectsList 放入 App 并创建这样的代理组件而不是 component={ProjectsList}:

 const LayoutToogler = () =>(<div></div>);

看起来是这样:

 <IndexRoute 组件={LayoutToogler} showProjects={true}/>

2. 在顶级 App 组件中，只需检查此属性 (showProjects) 即可决定是否显示项目:

不要忘记处理 ProjectList 组件中的 style 属性

I am duffer when it comes to React-Router component. However I was not able to find explanation of why my components become unmount when I walk through links? And how to prevent it ?

In my example I have a component that contains timer and re-render content by

I got an error:

Here is ReactJS code :

/*global define, Backbone, React, $, Request, Router, Route, Link */

var App = React.createClass({
    render: function () {
        return (
            <div>
                <h1>App</h1>
                <ul>
                    <li><Link to="/about">About</Link></li>
                    <li><Link to="/timer">Timer</Link></li>
                </ul>
                {this.props.children}
            </div>
        )
    }
});

var About = React.createClass({
    render: function () {
        return <h3>Here is about page</h3>
    }
});

var Timer = React.createClass({
    getInitialState: function() {
        return {counter: 0};
    },
    render: function () {
        return (
            <div>
                <h2>Time is running over...</h2>
                <b>{this.props.interval}</b>
                <p>{this.state.counter}</p>
            </div>
        )
    },
    componentDidMount: function () {
        this.loadCommentsFromServer();
        setInterval(this.loadCommentsFromServer, 1000);
    },
    loadCommentsFromServer: function () {
        this.setState({counter: this.state.counter + 1});
    }
});

React.render((
    <Router location="history">
        <Route path="/" component={App}>
            <Route path="about" component={About} />
            <Route path="timer" component={Timer} />
        </Route>
    </Router>
), document.body);

解决方案

If you want show component again without unmount you can show it always and hide when routes leave. To achieve this place you competent outside target route, for example you want prevent ProjectsList from unmout:

   <Route path="/" component={App}>
        <IndexRoute component={ProjectsList} />
        .....

1. Place ProjectsList into App and create such proxy component instead component={ProjectsList}:

  const LayoutToogler = () => (<div></div>);

Will look so:

    <Route path="/(mobile.html)" component={App}>
        <IndexRoute component={LayoutToogler} showProjects={true}/>

2. In top level App component just check this property (showProjects) to decide show projects or not:

          <ProjectsList
            style={{display:this.props.children.props.route.showProjects?'block':'none'}}
                   />
   

Don't forget to handle style property in your ProjectList component

这篇关于防止组件被 React-router 卸载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！