我在下面有以下容器:
我想要做的是检测用户的网址...
如果/welcome/step1
设置step = 1,如果/welcome/XXXX
设置step = 2,等等......
使用react redux,检测URL的正确方法是什么?我应该在构造函数中更新状态吗?
谢谢!
Welcome.js
import React from 'react';
import {connect} from 'react-redux';
class Welcome extends React.Component {
constructor(props) {
super(props);
this.state = {
step: 1
};
}
showStep(props) {
const {history} = this.props
switch (this.state.step) {
case 1:
return <TBD />
case 2:
return <TBD />
}
}
render() {
var style = {
width : (this.state.step / 4 * 100) + '%'
}
return (
<main>
<span className="progress-step">Step {this.state.step}</span>
<progress className="progress" style={style}></progress>
{this.showStep()}
</main>
)
}
}
export default Welcome;
答案 0 :(得分:1)
结帐react-router。
要设置它,您需要一个看起来像这样的Root
组件:
import React, { PropTypes } from 'react';
import { Provider } from 'react-redux';
import { Router, Route, browserHistory } from 'react-router';
import Welcome from './Welcome';
const Root = ({ store }) => (
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/welcome/(:filter)" component={Welcome} />
</Router>
</Provider>
);
Root.propTypes = {
store: PropTypes.object.isRequired,
};
export default Root;
您的index.js
需要重构才能使用Root
组件:
import React from 'react';
import { render } from 'react-dom'
import Root from './components/Root'
import configureStore from '../configureStore'
const store = configureStore()
render(
<Root store={store} />,
document.getElementById('root')
)
您的Welcome
组件现在应该会收到包含您的网址参数的params
媒体资源(例如step1
或step2
):
constructor(props) {
// props.params.filter == 'step1' || props.params.filter == 'step2'
super(props);
this.state = {
// we're going to remove everything in the string
// that isnt numerical with regex
// e.g., 'step1' -> '1', 'step234' -> '234'
step: props.params.filter.replace( /^\D+/g, '')
};
}
至于将状态设置为it really depends on what you want to accomplish。如果您只是想在render()
和showStep()
方法中使用它,那么将其设置为组件状态就可以了。
有关将react-router
与Redux here一起使用的详细信息。