Question

我在下面有以下容器：

我想要做的是检测用户的网址...

如果/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;

Answer 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一起使用的详细信息。

如何访问URL w react-redux以确定用户在您的应用程序中的进度？

1 个答案: