Question

对于React-Router组件，我很沮丧。但是当我浏览链接时，我无法找到解释为什么我的组件会被卸载的原因？以及如何预防？

在我的示例中，我有一个包含计时器的组件，并通过

重新呈现内容

我收到了一个错误：

这是ReactJS代码：

/*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);

Answer 1

如果您希望再次显示组件而不卸载，则可以始终显示它并在路径离开时隐藏。为了达到这个位置，您可以胜任外部目标路线，例如，您希望阻止ProjectsList取消注销：

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

1。将ProjectsList放入App并创建此类代理组件，而不是component={ProjectsList}：

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

看起来如此：

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

在顶级应用程序组件中，只需检查此属性（showProjects）以决定是否显示项目：

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

请勿忘记处理style组件中的ProjectList媒体资源

Answer 2

在您的情况下，react-router正在按预期工作，如果您希望计时器在整个应用程序中可见，那么您需要处理的是组件而不是视图

import xlwt
import xlrd

workbook = xlrd.open_workbook('C:/Users/admin/Documents/omkar.xlsx')

sheet = workbook.sheet_by_index(0)

i=0

data = [sheet.cell_value(0<i<i++, col) if sheet.Ei = 'pending' 

sheet.cell_value(i, col) for col in range(sheet.ncols) else increment i]

workbook = xlwt.Workbook()

sheet = workbook.add_sheet('test')

for index, value in enumerate(data):
    sheet.write(i, index, value)

workbook.save('C:/Users/admin/Documents/om.xls')

Answer 3

为避免在路由器再次安装组件时获取/构造大块/慢块数据，可以执行以下操作：1）实现全局缓存对象（只需从应用程序的根目录导出空对象）在纯JavaScript级别上）2）在您的组件中，执行以下操作：

import {cache} from '.....App';
const myComponent = props => {
if (!cache.myBigList) {
  cache.myBigList = [];
}
const [list, setList] = useState(cache.myBigList);
cache.myBigList = list;
...

这样，第一次安装组件时，它将在[]处启动缓存。然后，每次更改列表时，都会再次执行该功能，并将列表保存在缓存中。再次安装组件时，赋予useState的初始状态是上一个安装周期中最后保存的状态。

防止组件使用React-router卸载

3 个答案: