react-router當點擊返回按鈕時意外執行

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

這個問題的，因爲在componentDidMount代碼

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

在這裏，您加載/About頁面代碼之後發生的，要附加一個div的身體與文本"okokokkokoko"。 但是，當您進入/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>）也將被卸載。

Answer 2

您需要首先了解React。您無法創建這樣的元素，因爲React無法跟蹤它們。相反使用「componentDidMount」使用常規渲染。

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

我強烈建議回到React文檔並理解它。 https://facebook.github.io/react/tutorial/tutorial.html