当使用mobx-react
的observer
时,在react-router
上应用事件类' s NavLink
组件已损坏。
产生问题的设置:
使用创建 react 应用程序
package.json
{
"name": "routertest",
"version": "0.1.0",
"private": true,
"dependencies": {
"mobx": "^3.1.9",
"mobx-react": "^4.1.8",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-router-dom": "^4.1.1"
},
"devDependencies": {
"react-scripts": "0.9.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
App.js
import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom'
import Nav from './Nav';
import './App.css';
const Home = () => (
<div>
<h2>Home</h2>
</div>
)
const About = () => (
<div>
<h2>About</h2>
</div>
)
const Topics = ({ match }) => (
<div>
<h2>Topics</h2>
</div>
)
class App extends Component {
render() {
return (
<BrowserRouter>
<div className="App">
<Nav />
<hr />
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/topics" component={Topics} />
</div>
</BrowserRouter >
);
}
}
export default App;
Nav.js
import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import { observer } from 'mobx-react';
const Nav = observer (class Nav extends Component {
render() {
return (
<ul>
<li><NavLink exact to="/" activeClassName="active">Home</NavLink></li>
<li><NavLink to="/about" activeClassName="active">About</NavLink></li>
<li><NavLink to="/topics" activeClassName="active">Topics</NavLink></li>
</ul>
);
}
})
export default Nav;
这是问题的简化显示。我的用例实际上涉及使用 mobx store
来创建 NavLink
以及使用装饰器。寻找为什么观察者包装器阻止 react-router-dom
应用事件类。
最佳答案
我只需要堆叠我的类包装器/装饰器。 这个示例使用了基础 createReactApp,因此没有装饰器,但我的实际用例是使用 createReactApp 的 typescript 分支,并且确实支持装饰器。
我的问题是通过在类上堆叠装饰器来解决的,这样来自React路由器和mobx的上下文
就可以被传递下去。
示例:
@withRouter
@inject('store')
@observer
export class MyComponent extends React.Component{
...
}
关于reactjs - 为什么 mobx-react 观察者会破坏 react-router-dom navlink 事件类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43661560/