Comment transmettre une valeur à la page en réaction

La méthode de transfert de valeur de page dans React : 1. Utilisez la méthode [props.params], le code est [] 2. La méthode de requête est très simple à utiliser, similaire au get ; méthode dans le formulaire, les paramètres de passage sont en texte clair.

La méthode de transfert de valeur de page dans React :

1.

Exemple officiel Lorsque vous utilisez le routeur React pour définir un itinéraire, nous pouvons spécifier un chemin pour f1752bb1b5753d208371fbe2bc37516a, puis spécifier des caractères génériques pour transporter les paramètres vers le chemin spécifié :

Premier définir l'itinéraire vers la page UserPage :

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>
    )
  }
}

Le paramètre spécifié ci-dessus est un nom de paramètre

Utiliser :

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

1. Composant de lien pour implémenter le saut :

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

<.>2. Saut d'historique :

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

Lorsque la page passe à la page UserPage, supprimez la valeur transmise :

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

La méthode ci-dessus peut transmettre une ou plusieurs valeurs, mais le type de chaque valeur est un caractère. La chaîne ne peut pas transmettre un objet. Si vous le transmettez, vous pouvez convertir l'objet json en chaîne, puis le transmettre. Après l'avoir transmis, convertissez la chaîne json en objet et supprimez les données.

Par exemple : définir l'itinéraire :

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

Utiliser :

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

Obtenir des données :

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

Lorsque vous accédez à la page UserPage de cette manière, vous ne pouvez transmettre que des paramètres. en passant une chaîne, y en a-t-il d'autres. Que diriez-vous d'un moyen de transmettre directement des objets avec élégance au lieu de simplement des chaînes ?

2. Requête

La méthode de requête est très simple à utiliser, similaire à la méthode get du formulaire. Les paramètres sont passés en texte brut :

Définissez d'abord l'itinéraire :

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

Utilisez :

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

Obtenez des données :

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

la méthode de requête peut transmettre tout type de valeur, mais l'URL de la page est également épissé par la valeur de la requête, et l'URL est très longue, existe-t-il donc un moyen de transmettre des données similaire à la méthode de publication de formulaire afin que les données transmises ne soient pas transmises en texte clair ?

3. state

La méthode state est similaire à la méthode post, et son utilisation est similaire à la requête

Définissez d'abord l'itinéraire :

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

Utiliser :

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

Obtenir des données :

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

la méthode d'état peut toujours transférer tout type de données, et elle ne peut pas être transmise en texte clair.

Vous pouvez comparer l'URL dans la barre d'adresse après la mise en œuvre pour observer la différence entre les trois URL de transmission de valeur

Recommandations d'apprentissage associées :

Tutoriel d'apprentissage du javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!