如何实现一个预处理所有urls并让所有其他组件对其进行扩展的基本组件？
如何实现一个预处理所有urls并让所有其他组件对其进行扩展的基本组件？
提问于 2017-09-12 12:45:42
当有人打开我的域中的任何url时，我希望跟踪一个查询字符串变量(名为var)，所以我的想法是在componentWillMount中创建一个父组件，获取查询字符串，并将其保存到redux状态变量，如果该状态变量当前未定义。
例如，如果有人访问此url：
mydomain.com/anyurl/?var=abc
现在我将状态变量设置为abc。
以下是我的方法：
import React, { Component } from 'react'
import { recordRefUrl } from '../actions/actions'
import { connect } from 'react-redux'
class BaseContainer extends Component {
componentWillMount() {
if (this.props.location.query.var && !this.props.urlRefParam) {
this.props.dispatch(recordRefUrl(this.props.location.query.var ));
}
}
}
function select(state) {
return {
urlRefParam: state.urlRefParam,
}
}
export default connect(select)(BaseContainer)然后在所有组件(与BaseContainer在同一根文件夹中)中，我将让它们扩展BaseContainer而不是组件：
import React, { Component } from 'react'
import BaseContainer from './BaseContainer'
import { connect } from 'react-redux'
export default class HomePageHandler extends BaseContainer {
render() {
return (
<div>hello</div>
)
}
}我的app.js是这样的：
import React from 'react'
import { render } from 'react-dom'
import { Route, Router, useRouterHistory, hashHistory } from 'react-router'
import createBrowserHistory from 'history/lib/createBrowserHistory'
//redux stuff
import { Provider } from 'react-redux'
import { applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import { createStore, renderDevTools } from './utils/devTools'
let appHistory = appHistory = useRouterHistory(createBrowserHistory)({basename: '/'})
let store = createStore(CitySearchApp,
compose(
applyMiddleware(thunk),
window.devToolsExtension ? window.devToolsExtension() : f => f
)
)
let routes = (
<MuiThemeProvider>
<div className="app">
<Provider store={store}>
<Router history={appHistory} onUpdate={fireTracking}>
<Route name="main" component={AppHandler}>
<Route name="home" path="/" component={HomePageHandler}/>
</Route>
</Router>
</Provider>
{renderDevTools(store)}
</div>
</MuiThemeProvider>
)
render(routes, document.body)package.json看起来像这样：
"dependencies": {
"bluebird": "^3.4.0",
"body-parser": "^1.15.1",
"chai": "^3.5.0",
"cors": "^2.7.1",
"express": "^4.13.4",
"jquery": "^2.2.4",
"material-ui": "^0.19.0",
"mocha": "^2.5.3",
"morgan": "^1.7.0",
"react": "^15.6.1",
"react-addons-css-transition-group": "^15.0.0",
"react-dnd": "^2.1.4",
"react-dnd-html5-backend": "^2.1.2",
"react-dnd-touch-backend": "^0.3.2",
"react-dom": "^15.0.0",
"react-flip-move": "^2.4.1",
"react-ga": "2.1.2",
"react-input-range": "^1.0.2",
"react-mount": "^0.1.3",
"react-redux": "^4.1.2",
"react-router": "^2.8.1",
"react-tools": "^0.13.3",
"redux": "^3.1.4",
"redux-thunk": "^2.1.0",
"request": "^2.72.0",
"react-scroll":"^1.5.4",
"url-parse": "^1.1.9"
},然而，这给了我一个错误：
Error: Could not find "store" in either the context or props of "Connect(BaseContainer)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(BaseContainer)".如果我修改了代码，让HomePageHandler直接扩展组件，那么它就可以工作了。
我的代码出了什么问题？谢谢!
回答 1
Stack Overflow用户
发布于 2017-09-12 22:42:42
render(
<Provider store={STORE}>
<Router history={history}>
<Route path="/" component={app}/>
</Router>
</Provider>, document.getElementById('app')
);您可以发布您的应用程序的入口点的内容。它应该是类似于上面的代码。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46168087
复制相关文章
相似问题
腾讯云开发者
