Reactjs 为什么mobx react observer会中断react路由器dom navlink活动类?
使用Reactjs 为什么mobx react observer会中断react路由器dom navlink活动类?,reactjs,react-router,mobx,mobx-react,react-router-dom,Reactjs,React Router,Mobx,Mobx React,React Router Dom,使用mobx react的observer时,react路由器的NavLink组件上的活动类应用程序被中断 产生问题的设置: 使用CreateReact应用程序 package.json { "name": "routertest", "version": "0.1.0", "private": true, "dependencies": { "mobx": "^3.1.9", "mobx-react": "^4.1.8", "react": "^15.5
mobx react
的observer
时,react路由器的NavLink
组件上的活动类应用程序被中断
产生问题的设置:
使用CreateReact应用程序
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;
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;
import React,{Component}来自'React';
从“react router dom”导入{BrowserRouter,Route}
从“./Nav”导入Nav;
导入“/App.css”;
常量Home=()=>(
家
)
const About=()=>(
关于
)
常量主题=({match})=>(
话题
)
类应用程序扩展组件{
render(){
返回(
);
}
}
导出默认应用程序;
Nav.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;
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;
import React,{Component}来自'React';
从'react router dom'导入{NavLink};
从'mobx react'导入{observer};
const Nav=观察者(类Nav扩展组件{
render(){
返回(
- 家
- 关于
- 话题
);
}
})
导出默认导航;
这是问题的简化显示。我的用例涉及到实际使用mobx存储
来创建NavLink
,以及使用装饰器。查找观察者包装器停止应用活动类的原因。我只需要堆叠我的类包装器/装饰器。
本例使用的是基础createReactApp,因此没有装饰器,但我的实际用例使用的是createReactApp的typescript fork,并且确实支持装饰器
我的问题通过在类上堆叠装饰器来解决,这样来自react router和mobx的上下文就可以传递下去了
例如:
@withRouter
@inject('store')
@observer
export class MyComponent extends React.Component{
...
}
请注意,严格地说,这并不需要decorator,class\u MyComponent{};export const MyComponent=withRouter(inject('store')(observer(_MyComponent))
实现了同样的效果