使用contextTypes時如何創建react-router？

我有react-router 4.0.0-alpha.4安裝在我的項目做出反應，這就是我下面的教程，和我有一個非常困難的時候，理解它如何被稱爲StorePicker.jsx使用contextTypes時如何創建react-router？

App.jsx

import React from 'react'; 
import { render } from 'react-dom'; 
import './css/style.css'; 

import {BrowserRouter, Match, Miss} from 'react-router'; 

import StorePicker from './components/StorePicker'; 
import App from './components/App'; 
import NotFound from './components/NotFound'; 

const Root =() => { 
    return(
     <BrowserRouter> 
      <div> 
       <Match exactly pattern="/" component={StorePicker}/> 
       <Match pattern="/store/:storeId" component={App}/> 
       <Miss component={NotFound}/> 
      </div> 
     </BrowserRouter> 
    ) 
} 

render(<Root/>, document.querySelector('#main'));

所以朝StorePicker.jsx末我創建StorePicker對象的contextTypes屬性。然後我設置該值等於{ router: React.PropTypes.object }。儘管如此，React.PropTypes.object與路由器無關。

但是在goToStore(event)中突然出現router對象可用於this.context.router。

這是從哪裏來的？是否因爲在contextTypes中使用router這個詞是一個特殊的關鍵字，並且React.PropTypes.object因爲某種原因知道獲取路由器對象並將其添加到this.context？
爲什麼本教程甚至告訴我使用這種模式？根據React文檔，context應該避免：https://facebook.github.io/react/docs/context.html
有沒有更好的方法來做到這一點？

StorePicker.jsx

import React from 'react'; 
import { getFunName } from '../helpers.js' 

class StorePicker extends React.Component{ 

    goToStore(event){ 
     event.preventDefault(); 
     const storeId = "1234"; 
     this.context.router.transitionTo(`/store/${storeId}`); 
    } 

    render(){ 
     return (
      <button onClick={(e) => this.goToStore(e)}>CLICK ME</button> 
     ) 
    } 
}; 

StorePicker.contextTypes = { 
    router: React.PropTypes.object 
} 

export default StorePicker;

從本教程中的代碼工作，但我不知道爲什麼它的工作。

來源

2017-08-27 fuzzybabybunny

你會注意到我已經鏈接到我的問題中的文檔。所以很明顯，告訴我答案是我已經聯繫到的東西不會讓我到任何地方。我很難理解文檔。原諒我愚蠢。 – fuzzybabybunny

我能夠找到比官方文檔更詳細，更清晰地解釋'context＆contextTypes'的更好的資源：https：//javascriptplayground.com/blog/2017/02/context-in-reactjs -applications / – fuzzybabybunny

3.是否有更好的方法來做到這一點？：

您不應該使用上下文。看起來你只需要在表單提交時重定向到一個URL（其值取決於文本框）。

在React中，您可以使用react routers。

下面是一些例子：StackOverflow: programmatically-navigate-using-react-router

或者在Javascript中，如果你只需要重定向到URL位置，你可以簡單地使用「window.location的」功能如下：

goToStore(event) { 
    event.preventDefault(); 
    const storeId = this.storeInput.value; 
    window.location.assign(`/store/${storeId}`) 
    }

然而，你可能不想使用第二個選項，因爲Javascript呈現整個dom，然後沒有使用React的優勢。

來源

2017-08-27 17:42:28

使用contextTypes時如何創建react-router？

回答

相關問題