Question

如何访问使用另一个组件中的链接发送的状态

2020-06-09

542

javascript reactjs react-router

当使用 Link to 时，我尝试将 props 发送到另一个组件。

const printArr = sameLetterArr.map((obj, idx) => {
  return (
    <Link to={{ pathname: '/coursePage', state: { linkState: 'hello' } }} key={idx}>
      <li className={'DeptList'}>
        {obj.CRS_SUBJ_CD} - {obj.DEPT_NAME}
      </li>
    </Link>
  )
})

这是我尝试使用的 Link to，并且我发送了包含字符串 hello 的 linkState 。为了接收它，我尝试了 this.props.location.state 和 this.props.history.location.state ，但它们都导致错误：

TypeError: undefined is not an object (evaluating 'this.props.history.location').

不确定是什么原因造成的。任何见解都很好。

编辑： 下面的 CoursePage 组件：

render () {
    console.log(this.props.location.linkState)
    return (
      <div className='App'>
        <header className="Header"></header>
        <div>
          <h1>Dept</h1>
          <p><ListCourse letter={this.props.title}/></p>
        </div>
        <footer className="Footer">This is the footer</footer>
      </div>
    )
  };

Answer 1

您需要使用 withRouter HOC 来使 history 和其他 route-props 在您的类组件中可用：

import { withRouter } from 'react-router-dom'
class CoursePage extends Component<IProps, IState> {
  componentDidMount() {
    console.debug(this.props) // it will print all route-props (history, location, match)
  }
  render() {
    return <>CoursePage</>
  }
}

export default withRouter(CoursePage)

如果使用功能组件，您可以使用 useHistory 钩子：

const history = useHistory(); // inside function component

Answer 2

如果您使用功能组件，则状态存储在 props.location.state 中

export default props => {
    console.log('state', props.location.state)

    return null
}

如果您使用类组件，则必须使用构造函数才能获取 props。您的状态将存储在 this.props.location.state 中

export default class Demo extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        console.log('state', this.props.location.state)

        return null
    }
}