javascript – Problem mit verschachtelten Unterkomponenten beim Abrufen von Standortobjekten durch React-Router

Question

Zum Beispiel hat eine Seite eine modale Komponente, die in der Unterkomponente (ModalDetail) nicht abgerufen werden kann. Bitte geben Sie mir eine Antwort von der übergeordneten Komponente und durch das Fensterobjekt Nehmen Sie es, gibt es einen anderen Weg?

Answer 1

react-router v4之前的版本，有一个叫做withRouter的高阶组件。你在定义自己的modal组件时包一层即可。

v4版本暂时没有用过，有没有改动不清楚

import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router'

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { match, location, history } = this.props

    return (
      <p>You are now at {location.pathname}</p>
    )
  }
}

// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
export default withRouter(ShowTheLocation)

包一层withRouter之后，就可以访问到你想要的属性了，你还可以进一步学习，看看里面都有些什么。

Answer 2

还可以使用withRouter，通过this.props.location获取

import React, { Component } from 'react';
import { withRouter } from 'react-router'


class  MyComponent extends Component {

   .....
}

export default withRouter(MyComponent)