Heim  >  Artikel  >  Web-Frontend  >  Wie übergebe ich benutzerdefinierte Requisiten an untergeordnete Komponenten in React Router v4?

Wie übergebe ich benutzerdefinierte Requisiten an untergeordnete Komponenten in React Router v4?

Linda Hamilton
Linda HamiltonOriginal
2024-10-30 14:40:28681Durchsuche

How to Pass Custom Props to Child Components in React Router v4?

So übergeben Sie benutzerdefinierte Requisiten an untergeordnete Komponenten in React Router v4

Problem:

In React Router v4 wird versucht um auf Routen-Requisiten über this.props.route zuzugreifen, wird undefiniert zurückgegeben. Untergeordnete Komponenten können keine benutzerdefinierten Requisiten empfangen, die von übergeordneten Komponenten übergeben werden.

Beispielcode:

<code class="javascript">// Parent Component
render() {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/" exact test="hi" component={Home} />
          <Route path="/progress" test="hi" component={Progress} />
          <Route path="/test" test="hi" component={Test} />
        </Switch>
      </div>
    </Router>
  );
}

// Child Component
render() {
  console.log(this.props); // Returns {match: {...}, location: {...}, history: {...}, staticContext: undefined}
}</code>

Lösung:

Um benutzerdefinierte Requisiten an untergeordnete Komponenten zu übergeben, verwenden Sie eine Render-Requisite, um die Komponente inline mit der Route zu definieren:

<code class="javascript">// Parent Component
render() {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/" exact render={(props) => <Home test="hi" {...props} />} />
          <Route path="/progress" render={(props) => <Progress test="hi" {...props} />} />
          <Route path="/test" render={(props) => <Test test="hi" {...props} />} />
        </Switch>
      </div>
    </Router>
  );
}</code>

Greifen Sie in der untergeordneten Komponente wie folgt auf die benutzerdefinierte Requisite zu:

<code class="javascript">render() {
  console.log(this.props.test); // Returns "hi"
}</code>

Hinweis: Stellen Sie sicher, dass {...props} an die untergeordnete Komponente übergeben wird, um den Zugriff auf Standard-Router-Requisiten (z. B. Übereinstimmung, Standort, Verlauf) beizubehalten.

Das obige ist der detaillierte Inhalt vonWie übergebe ich benutzerdefinierte Requisiten an untergeordnete Komponenten in React Router v4?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn