Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/21.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs 为什么mobx react observer会中断react路由器dom navlink活动类?_Reactjs_React Router_Mobx_Mobx React_React Router Dom - Fatal编程技术网

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))
实现了同样的效果