React Router Link不适用于LeafletJS [英] React Router Link doesn't work with LeafletJS

问题描述

版本:

• react-router-dom 4.1.1
• react-router-redux 5.0.0-alpha.4
• 反应叶1.1.3
• 传单1.0.3

我创建了一张传单地图.在其中添加一些标记.这些标记具有弹出窗口. 在每个这些弹出窗口中，我都想拥有一个<Link>

I create a leaflet map. In which I add some markers. These markers have popups. In each of these popup I want to have a <Link>

如果有帮助，这也是我的路由"配置:

Also if it helps this is my Routing config:

ReactDOM.render(
  <Provider store={store}>
    <div>
      <AppContainer />
      <ConnectedRouter history={history}>
        <div>
          <MenuContainer />
          <Switch>
            <Route path='/:area/:sport/list' component={ListContainer} />
            <Route path='/:area/:sport/map' component={MapContainer} />
            <Route path='/:area/:sport/rasp' component={RaspContainer} />
            <Route path='/:shortcode/details' component={StationDetailsContainer} />
            <Redirect exact from='/' to='/wellington/paragliding/list' />
            <Route component={NoMatch} />
          </Switch>
        </div>
      </ConnectedRouter>
    </div>
  </Provider>,
  document.getElementById('root')
)

预期行为

我可以看到我的链接，并在弹出窗口打开时单击它.

Expected Behavior

I can see my link and click on it when popup opens.

看不见链接.它不是生成的.

Impossible to see the link. It's not generated.

在我的<MapMode>内部，我使用传单中的<Map>. 如果我在<Map>标记上方设置了<Link>，则它可以正常工作. 一旦我想在我的<Map>中建立一个链接，它就会以某种方式中断. 这是我页面的React结构，<Popup>标签仅包含null，因为Javascript损坏了:

Inside my <MapMode> I use <Map> from leaflet. If I set a <Link> just above the <Map> tag it works. As soon as I want to have a link inside my <Map>, somehow it breaks. This is the React structure of my page, <Popup> tag just contains null as Javascript is breaking:

这是一个非常复杂的问题，请随时向我提问. 谢谢.

It's quite a complex problem so feel free to ask me questions. Thanks.

推荐答案

我不确定此答案是否100％.但是无论如何，我都会尝试，因为我认为至少这对将来尝试解决此问题的人可能会有所启发.

I'm not 100% sure about this answer. But anyway I'm going to try because I think at least it might shed some light to anyone who will try to solve this problem in future.

我在react-leaflet GitHub中的此问题中得到了第一个提示回购.根据该错误和您的错误，看来问题出在Popup无法从context访问router，因为context并未以其呈现方式传递给Popup.因此，如果我们可以将上下文显式传递给Popup，我们应该能够解决该问题.

I got the first hint from this issue in react-leaflet GitHub repo. According to that and your error, it seems the problem is Popup can't access the router from the context because context isn't passed into the Popup with the way they render it. So we should be able to fix the problem if we can explicitly pass the context to Popup.

然后，我在

Then I found a way to explicitly pass the context into a component in this StackOverflow answer. With that, I think you should be able to use a HoC(Higher order Component) as follows to solve your problem.

这是将上下文注入组件的HoC:

This is the HoC that inject context to a component:

function withContext(WrappedComponent, context){

  class ContextProvider extends React.Component {
    getChildContext() {
      return context;
    }

    render() {
      return <WrappedComponent {...this.props} />
    }
  }

  ContextProvider.childContextTypes = {};
  Object.keys(context).forEach(key => {
    ContextProvider.childContextTypes[key] = React.PropTypes.any.isRequired; 
  });

  return ContextProvider;
}

比方说，您在名为MapMaker的组件中使用Popup.然后，您可以像这样使用HoC将router上下文插入Popup.

Let's say you are using Popup inside a component called MapMaker. Then you can inject the context with router into Popup using the HoC like this.

class MapMaker extends React.Component {

  //......

  // This make sure you have router in you this.context
  // Also you can add any other context that you need to pass into Popup
  static contextTypes = {
    router: React.PropTypes.object.isRequired
  }

  render(){

    const PopupWithContext = withContext(Popup, this.context);

    return (
      //..... your JSX before Popup
      <PopupWithContext/> // with your props
      //..... your JSX after Popup
    );
  }

}

这篇关于React Router Link不适用于LeafletJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！