Question

我很反应，这只是我代码的一部分。

About.js

import React from 'react'

export default React.createClass({
    render() {
        return <div > About < /div>
    },
    componentDidMount() {
        var elem = document.createElement("div");
        elem.innerText = "okokokkokoko";
        document.getElementById('app').appendChild(elem);
    }
})

App.js

import React from 'react'
import { Link } from 'react-router'

export default React.createClass({
  render() {
    return (
      <div>
        <h1>React Router Tutorial</h1>
        <ul role="nav">
          <li><Link to="/about">About</Link></li>
          <li><Link to="/repos">Repos</Link></li>
        </ul>
      </div>
    )
  }
})

index.js

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, browserHistory } from 'react-router'
import App from './modules/App'
import About from './modules/About'
import Repos from './modules/Repos'

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}/>
    <Route path="/repos" component={Repos}/>
    <Route path="/about" component={About}/>
  </Router>
), document.getElementById('app'))

当我点击“关于”页面上的浏览器后退按钮时，borwser将返回到应用页面，但页面仍保留元素

<div>okokokkokoko</div>

如何在不更改About.js代码的情况下解决此问题？

Answer 1

您需要先了解React。您无法创建此类元素，因为React无法跟踪它们。而是使用＆＃34; componentDidMount＆＃34;使用常规渲染。

render() {
    return <div> okokokkokoko</div>;
}

我强烈建议您回到React docs并理解它。 https://facebook.github.io/react/tutorial/tutorial.html

Answer 2

由于componentDidMount代码中的代码

，因此发生此问题

componentDidMount() {
        var elem = document.createElement("div");
        elem.innerText = "okokokkokoko";
        document.getElementById('app').appendChild(elem);
    }

在您加载/About页面后，您将使用文本"okokokkokoko"向正文附加div。但是在到达/App页面后，您不会从页面中删除它。这就是为什么它仍然在那里。

实际上这是不好的做法，这不是应该如何使用反应。

而是将/About代码的渲染更改为以下

render() {
        return (
           <div>
             <div > About < /div>
             <div>okokokokokoko</div>
           </div>
        )
    }

<强>更新在这种情况下，以下解决方案可能会帮助您

componentDidMount() {
        document.getElementById('abc').innerText = "okokokkokoko";
    }
render() {
        return (
           <div>
             <div > About < /div>
             <div id="abc"></div>
           </div>
        )
    }

在这里，您将在当前组件中创建一个div。因此，当您重定向到另一条路线时，整个组件（即包括您的<div>okokok</div>）也将卸载。

单击后退按钮

2 个答案: