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 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?

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

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

3. Zustand

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

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

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!