Question

似乎是一个简单的问题，但几天后我仍然没有找到答案。

案例是我有一个简单的应用程序，我通过Redux的功能连接。结构看起来像这样：

ReactDOM.render(
  <Provider store={ store }>
    <App />
  </Provider>,
  document.getElementById('root')
);

然后在App组件中我有我的路线：

export class App extends Component {
  static propTypes = {
    isLoginPage: PropTypes.bool,
    activeMenu: PropTypes.bool,
  }

  render() {
    return (
      <BrowserRouter>
        <div >
              <Switch>
                <Route exact path={ publicPath } component={ Authorization(Timesheet) } />
                <Route path={ routeCodes.LOGIN } component={ Login } />
                <Route path={ routeCodes.SETTINGS } component={ Authorization(Settings) } />
                <Route path='*' component={ NotFound } />
              </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

const mapStateToProps = state => {
  return {
    isLoginPage: state.login.get('isLoginPage'),
    activeMenu: state.menu.get('activeMenu'),
  };
};

export default connect(
  mapStateToProps
)(App);

我的问题是，如果我创建另一个组件并将其插入其中一个组件（例如，在Timesheet中），那么该组件无论如何都不会连接。

我使用的示例组件是：

export class Menu extends Component {
  static propTypes = {
    // from react-redux connect
    dispatch: PropTypes.func,
  }

  constructor() {
    super();
    this.openMenu = this.openMenu.bind(this);
    this.state = {
      activeMenu: false,
    }
  }

  openMenu() {
    debugger;
  }

  render() {
    return (
      <div>
        Menu2
        <button onClick={this.openMenu}>button</button>
      </div>
    );
  }
}

Menu.contextTypes = {
  router: React.PropTypes.object.isRequired,
};

const mapStateToProps = state => {
  return {
    isLogout: state.menu.get('isLogout'),
  };
};

export default connect(
  mapStateToProps,
  null,
  null,
  {
    pure: false,
  }
)(Menu);

如果我在Timesheet中添加组件，它永远不会通过mapStateToProps函数，但是如果我把它放在App中，这样： render（）{ 回来（）; } 这完美地工作，连接，每次状态改变时，它都会通过Menu组件的mapStateToProps函数。

你认为它可能正在发生或遗失吗？

非常感谢！

React-Redux：将状态传递给内部容器

0 个答案: