如何從 Object 中的組件訪問道具

Question

我必須檢查我網站的當前路徑名，才能為我的 React-Joyride 導覽設置步驟。

我有一個父組件，其中定義了路線並實施了 Joyride 之旅。 教程組件實現了步驟對象來設置游覽的步驟，如下所示：

import Tutorial from './tutorial/tutorial'
class App extends Component {
 constructor (props) {
    super(props)
    this.state= {
    // state things 
    }
 }
  render () {
    return ( 
    <BrowserRouter>
        <Tutorial
          run={this.state.run}
          stepIndex={this.state.stepIndex}
          firstPartClicked={this.state.firstPartClicked}
          secondPartClicked={this.state.secondPartClicked}
          handleRestart={this.handleRestart}
          handleEnd={this.handleEnd}
          handleSteps={this.handleSteps}
          handleFirstPart={this.handleFirstPart}
          handleSecondPart={this.handleSecondPart}
          handleClickedFalse={this.handleClickedFalse}
          handleSetVisited={this.handleSetVisited}
          handleCheckTourDone={this.handleCheckTourDone}
        />
        // many other Routes 
        <Route
            exact path='/matches/:matchId/' render={(props) => {
              this.removeGlobalTimeRef()
              const matchId = this.props.matchId
              return this.checkLoginThen(this.gotoMatchDetails(props))
            }}
          />
    </BrowserRouter>
    )
  }
}
    
export default App  



import matchSteps from '../tutorial/steps/matchSteps'
class Tutorial extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      isUpdatet: false,
      steps: []
    }
  }
  
  callback = (tour) => {
    const { action, index, type, status } = tour

    if ([STATUS.FINISHED].includes(status)) {
      this.props.handleEnd()
      this.props.handleClickedFalse()
      if (this.props.location.pathname.startsWith('/matches/') && this.props.location.pathname.includes('sequence')) {
        this.props.handleSetVisited()
      }
    } else if ([STATUS.SKIPPED].includes(status)) {
      this.props.handleEnd()
      this.props.handleClickedFalse()
      this.props.handleSetVisited()
    } else if (action === 'close') {
      this.props.handleEnd()
      this.props.handleClickedFalse()
    } else if ([EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND].includes(type)) {
      const step = index + (action === ACTIONS.PREV ? -1 : 1)
      this.props.handleSteps(step)
    }
  }
  
  render () {
    let { steps } = this.state
    const pathname = this.props.location.pathname
    const siteSteps = [matchSteps, matchEditorSteps, matchEditorStepsOne, matchEditorStepsTwo,
      matchSequenceSteps, matchSequenceStepsOne, matchSequenceStepsTwo, matchSiteSteps, matchSiteStepsOne, matchSiteStepsTwo]

    for (let i = 0; i < siteSteps.length; i++) {
      if (pathname === siteSteps[i].onSite && siteSteps[i].part === 'full') {
        steps = siteSteps[i].steps
      } else if (pathname === siteSteps[i].onSite && siteSteps[i].part === 'one') {
        if (this.props.firstPartClicked === true) {
          steps = siteSteps[i].steps
        }
      } else if (pathname === siteSteps[i].onSite && siteSteps[i].part === 'two') {
        if (this.props.secondPartClicked === true) {
          steps = siteSteps[i].steps
        }
      }
    }
   }
   return (
      <>
        <Joyride
          callback={this.callback}
          run={this.props.run}
          stepIndex={this.props.stepIndex}
          steps={steps}
          continuous
          disableOverlayClose
          spotlightClicks
          showSkipButton
          locale={{
            back: <span>Zurück</span>,
            last: (<span>Beenden</span>),
            next: (<span>Weiter</span>)
          }}
          styles={{
            options: {
              primaryColor: '#2d98da'
            }
          }}
        />
      </>
    )
}

export default withRouter(Tutorial)



const matchSteps = {
  name: 'matchSteps',
  // onSite: '/matches/:matchId/',   <-- HERE 
  part: 'full',
  steps: [{
    target: '.row',
    title: '',
    content: 'bla bla',
    placement: 'center',
    disableBeacon: true
  }]
  
export default matchSteps

現在我必須在onSite: '/matches/:matchId/'的步驟 Object 中設置 matchId，以便我可以在教程組件中檢查路徑名。 我不知道如何正確地做到這一點我已經測試了一些想法，但 matchId 始終未定義。

Answer 1

可以使用react router hooks useParams獲取當前url的參數

import { useParams } from "react-router-dom";

let { slug } = useParams();

或使用反應路由器掛鈎useLocation獲取當前 url 作為位置object

import { useLocation } from "react-router-dom";

let location = useLocation();

Answer 2

你的問題我不清楚。 好吧，問題很清楚，但代碼片段卻不是。

javascript 中只有兩個數據流。 數據通過屬性從父級流向子級。 數據可以通過回調傳遞回父級。 您可以從孩子 -> 父母 -> 祖父母鏈接該回調。

class grandparent extends Component {
   getDecentData = (data) => { do something with data}

   render(){
        <Parent CB = {this.getDecentData}/>
    }
}

class Parent extends Component {

   render(){
        <Child CB = {this.props.CB} />
    }
}

class Child extends Component {

    clickHandler=(e) => {
       // do something to get data
       this.props.CB(data)
    }

   render(){
          <Control  onClick={this.clickHandler} />
    }
}