如何在React

时间:2018-05-22 15:07:43

标签: javascript reactjs react-router react-router-v4

我目前有三个不同的组件,如A,B,C,我需要将信息从A传递给C到B. 我能够通过,但是当我按下后退按钮时我遇到问题,值也会丢失,我也会得到一些未定义的错误:

这就是我从cmp A传递到cmp B的方式(组件A的外观如何):

 this.state = {
            selectedIndustry: '',
            selectedJob: '' 
 }

<Link to={{
          pathname: '/information-job',
          state: {industry: this.state.selectedIndustry, job: this.state.selectedJob}
                        }}>
          <Button className={"primaryBtn"}>
                Apply
          </Button>
</Link>



 onIndustryChangeOption(event) {
        this.setState({selectedIndustry: event.target.value});
    }

    onJobChangeOption(event) {
        this.setState({selectedJob: event.target.value});
    }

在componentDidMound的组件B中,我有: console.log(this.props.location.state) //打印出行业和工作

事情就是当我从这个组件B转到C然后单击后退按钮,然后 this.props.location.state 没有任何值,所以基本上我从goint中丢失了值一个组件到另一个组件。

实现这一目标的最佳途径是,即使我回到组件

,我仍然可以保留值

1 个答案:

答案 0 :(得分:0)

编辑:工作示例:https://codesandbox.io/s/l50l0zxn6q

我会将所有内容都包装在Root组件中,并且只在URL中更改此Root组件的子项。

当你点击你的后退按钮时,这个.props.location.state显然是空的,因为你没有用你的道具传递任何东西。

解决此问题的一种方法是使Root组件在页面之间保持某种状态。如果你愿意,也可以使用Redux。

所以你想要的是这样的:

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom"

// Link does not allow overriding onClick as it is used internally by react-router
// add div inside Link and add onClick prop to div
const A = props => (
  <div>
    <Link to='/B'>
      <div onClick={() => props.setRootState({ test: 'foo' })}>
        Go to /B
      </div>
    </Link>
    {JSON.stringify(props.rootState)}
  </div>
)

const B = props => (
  <div>
    <Link to='/A'>
      <div onClick={ () => props.setRootState({ test: 'bar' }) }>
        Go to /A
      </div>
    </Link>
    {JSON.stringify(props.rootState)}
  </div>
)

class Root extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      test: '',
    }
  }

  render() {
    const DefaultComp = () => <Link to="/A">go to A</Link>

    // don't forget to bind this to setState
    const PageA = () => <A rootState={this.state}
      setRootState={this.setState.bind(this)} />
    const PageB = () => <B rootState={this.state}
      setRootState={this.setState.bind(this)} />

    return (
        <Switch>
          <Route exact path="/" component={ DefaultComp } />
          <Route path="/A" component={ PageA } />
          <Route path="/B" component={ PageB } />
        </Switch>
    )
  }
}

ReactDOM.render(
  <Router>
    <Root />
  </Router>,
  document.getElementById("root")
);

就像你在URL中拥有持久状态一样,每个页面组件都可以根据需要进行访问和修改。

如果我犯了错误,请告诉我,我已尝试过代码,行为是点击链接时状态会改变,而不是浏览器的后退按钮。如果有什么东西难以理解或者我完全误解了你的要求,请告诉我;)

干杯,祝你好运!

编辑:将代码转换为react-router;应该按预期工作