So übergeben Sie in der Reaktion einen Wert an die Seite

Die Methode zur Seitenwertübertragung in React: 1. Verwenden Sie die Methode [props.params], der Code lautet [] 2. Die Abfragemethode ist sehr einfach zu verwenden, ähnlich der get-Methode im Formular Die Parameter werden im Klartext übergeben.

Methode der Seitenwertübertragung in React:

1. props.params

Offizielles Beispiel Wenn wir den React-Router zum Definieren einer Route verwenden, können wir einen Pfad für f1752bb1b5753d208371fbe2bc37516a angeben, und dann angeben, dass Platzhalter Parameter zum angegebenen Pfad übertragen können:

Definieren Sie zunächst die Route zur UserPage-Seite:

import { Router,Route,hashHistory} from 'react-router';
class App extends React.Component {
  render() {
    return (
        <Router history={hashHistory}>
            <Route path=&#39;/user/:name&#39; component={UserPage}></Route>
        </Router>
    )
  }
}

Geben Sie die oben genannten Parameter und einen Parameternamen an

Verwenden Sie:

import {Link,hashHistory} from 'react-router';

1. Linkkomponente zum Implementieren des Sprungs:

<Link to="/user/sam">用户</Link>

2. Verlaufssprung:

hashHistory.push("/user/sam");

Wenn die Seite zur UserPage-Seite springt, nehmen Sie den übergebenen Wert heraus:

export default class UserPage extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return(<div>this.props.params.name</div>)
    }
}

Die obige Methode kann einen oder mehrere Werte übergeben, aber der Typ jedes Werts ist eine Zeichenfolge und ein Wenn es übergeben wird, können Sie das JSON-Objekt in einen String konvertieren und ihn dann übergeben. Konvertieren Sie den JSON-String in ein Objekt und nehmen Sie die Daten heraus :

<Route path=&#39;/user/:data&#39; component={UserPage}></Route>

Daten abrufen:

var data = {id:3,name:sam,age:36};
data = JSON.stringify(data);
var path = `/user/${data}`;
<Link to={path}>用户</Link>
hashHistory.push(path);

Sie können Parameter nur durch die Übergabe von Zeichenfolgen übergeben, wenn Sie auf diese Weise zur UserPage-Seite springen. Gibt es also eine andere Möglichkeit, Objekte statt nur Zeichenfolgen elegant direkt zu übergeben?

2. Die Abfragemethode ist sehr einfach zu verwenden, ähnlich der Get-Methode im Formular:

Zuerst die Route definieren:

var data = JSON.parse(this.props.params.data);
var {id,name,age} = data;

Get Daten:

<Route path=&#39;/user&#39; component={UserPage}></Route>

Abfragemethode Es kann jede Art von Wert übergeben werden, aber die URL der Seite wird auch durch den Abfragewert gespleißt. Es gibt also eine Möglichkeit, Daten ähnlich dem Formularbeitrag zu übergeben Methode, damit die übergebenen Daten nicht im Klartext übertragen werden?

3. Zustand

Die Zustandsmethode ähnelt der Post-Methode und die Verwendungsmethode ähnelt der Abfragemethode

Zuerst die Route definieren:

var data = {id:3,name:sam,age:36};
var path = {
  pathname:'/user',
  query:data,
}
<Link to={path}>用户</Link>
hashHistory.push(path);

Daten abrufen:

var data = this.props.location.query;
var {id,name,age} = data;

Die Zustandsmethode kann weiterhin beliebige Datentypen übergeben und darf nicht im Klartext übertragen werden.

Sie können die URL in der Adressleiste nach der Implementierung vergleichen, um den Unterschied zwischen den drei Wertübergabe-URLs zu beobachten

Das obige ist der detaillierte Inhalt vonSo übergeben Sie in der Reaktion einen Wert an die Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!