問題描述

版本:

• react-router-dom 4.1.1
• react-router-redux 5.0.0-alpha.4
• 反應(yīng)傳單 1.1.3
• 傳單 1.0.3

重現(xiàn)步驟

我創(chuàng)建了一張傳單地圖.我在其中添加了一些標(biāo)記.這些標(biāo)記有彈出窗口.在每個(gè)彈出窗口中，我都希望有一個(gè) <Link>

如果有幫助，這是我的路由配置:

ReactDOM.render(<提供者商店={商店}>
<應(yīng)用容器/><ConnectedRouter 歷史={歷史}>
<菜單容器/><開關(guān)><Route path='/:area/:sport/list' 組件={ListContainer}/><路線路徑='/:area/:sport/map' 組件={MapContainer}/><Route path='/:area/:sport/rasp' 組件={RaspContainer}/><Route path='/:shortcode/details' 組件={StationDetailsContainer}/><從='/' 重定向到='/wellington/paragliding/list'/><路由組件={NoMatch}/></開關(guān)></div></連接路由器></div></提供者>,document.getElementById('root'))

預(yù)期行為

當(dāng)彈出窗口打開時(shí)，我可以看到我的鏈接并點(diǎn)擊它.

實(shí)際行為

無法看到鏈接.它沒有生成.

額外細(xì)節(jié)

在我的 <MapMode> 中，我使用傳單中的 <Map>.如果我在 <Map> 標(biāo)簽上方設(shè)置一個(gè) <Link> ，它就可以工作.只要我想在我的 <Map> 中有一個(gè)鏈接，它就會以某種方式中斷.這是我頁面的 React 結(jié)構(gòu)，<Popup> 標(biāo)簽只包含 null，因?yàn)?Javascript 正在破壞:

這是一個(gè)相當(dāng)復(fù)雜的問題，所以請隨時(shí)向我提問.謝謝.

我不能 100% 確定這個(gè)答案.但無論如何我都會嘗試，因?yàn)槲艺J(rèn)為至少它可能會為將來嘗試解決此問題的任何人提供一些啟示.

我從 react 中的 this issue 得到了第一個(gè)提示-leaflet GitHub 存儲庫.根據(jù)那個(gè)和你的錯(cuò)誤，問題似乎是 Popup 無法從 context 訪問 router 因?yàn)?context 沒有傳入以他們呈現(xiàn)的方式彈出窗口.因此，如果我們可以將上下文顯式傳遞給 Popup，我們應(yīng)該能夠解決問題.

然后我找到了一種將上下文顯式傳遞到組件中的方法 this StackOverflow 答案.有了這個(gè)，我認(rèn)為你應(yīng)該能夠使用如下的 HoC(高階組件)來解決你的問題.

這是向組件注入上下文的 HoC:

function withContext(WrappedComponent, context){類 ContextProvider 擴(kuò)展 React.Component {getChildContext() {返回上下文；}使成為() {返回 <WrappedComponent {...this.props}/>}}ContextProvider.childContextTypes = {};Object.keys(context).forEach(key => {ContextProvider.childContextTypes[key] = React.PropTypes.any.isRequired;});返回上下文提供者；}

假設(shè)您在一個(gè)名為 MapMaker 的組件中使用 Popup.然后你可以像這樣使用 HoC 將帶有 router 的上下文注入到 Popup 中.

類 MapMaker 擴(kuò)展 React.Component {//......//這確保你有路由器 this.context//您還可以添加需要傳遞到 Popup 的任何其他上下文靜態(tài)上下文類型 = {路由器:React.PropTypes.object.isRequired}使成為(){const PopupWithContext = withContext(Popup, this.context);返回 (//..... 你的 JSX 在 Popup 之前<PopupWithContext/>//用你的道具//.....彈出后你的JSX);}}

Versions:

• react-router-dom 4.1.1
• react-router-redux 5.0.0-alpha.4
• react-leaflet 1.1.3
• leaflet 1.0.3

Steps to reproduce

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.

Actual Behavior

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

Extra details

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.

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.

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.

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;
}

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
    );
  }

}

這篇關(guān)于React Router Link 不適用于 LeafletJS的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！