react-router当点击返回按钮时意外执行

我是新来的反应，这只是我的代码的一部分。react-router当点击返回按钮时意外执行

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的代码？

来源

2017-03-11 lx1412

这个问题的，因为在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>）也将被卸载。

来源

2017-03-11 07:28:41

这只是一个测试，我认为在使用像jqgrid这样的第三方库时，添加元素到'document'是不可避免的，所以我需要一种方法来解决这个问题 – lx1412

@ lx1412尝试更新的答案。 –

您需要首先了解React。您无法创建这样的元素，因为React无法跟踪它们。相反使用“componentDidMount”使用常规渲染。

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

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

来源

2017-03-11 07:25:48 wookieb

react-router当点击返回按钮时意外执行

回答

相关问题