Reactでページに値を渡す方法

react でのページ値転送のメソッド: 1. [props.params] メソッドを使用します。コードは []; 2. get と同様のクエリ メソッドを使用するのは非常に簡単です。フォーム内のメソッドに渡すパラメータはクリア テキストです。

#react でのページ値転送のメソッド:

1.props.params#公式の例 React ルーターを使用してルートを定義する場合、f1752bb1b5753d208371fbe2bc37516a のパスを指定し、指定されたパスにパラメーターを運ぶワイルドカードを指定できます。 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>
    )
  }
}

上で指定したパラメータは 1 つのパラメータ名です

使用:

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

1. ジャンプを達成するためのリンク コンポーネント:

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

2. 履歴ジャンプ :

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

ページが UserPage ページにジャンプしたら、渡された値を取り出します:

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

上記のメソッドは 1 つ以上の値を渡すことができますが、それぞれの型は異なりますvalue は文字列です オブジェクトを渡すことはできません 渡す場合は、json オブジェクトを文字列に変換して渡すことができます 渡した後、json 文字列をオブジェクトに変換してデータを取り出します

例: ルーティングの定義:

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

Use:

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

Get data:

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

この方法で UserPage ページにジャンプする場合、渡すことができるのはパラメーターのみです文字列を渡すことによって、文字列だけではなくオブジェクトを直接渡す方法は他にありますか?

2. クエリ

クエリ メソッドはフォームの get メソッドと同様に非常に簡単に使用でき、パラメータはプレーン テキストで渡されます: 最初にルートを定義します:

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

使用:

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;

query メソッドは任意のタイプの値を渡すことができますが、ページの URL はまた、クエリ値によって結合され、URL が非常に長いため、渡されたデータがクリア テキストで送信されないように、フォーム投稿メソッドと同様のデータを渡す方法はありますか?

3. State

state メソッドは post メソッドと似ており、その使用法はクエリと似ています。最初にルートを定義します。

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

使用:

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

データの取得:

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

ステート メソッドは引き続きあらゆるタイプのデータを転送できますが、クリア テキストで送信することはできません。

実装後にアドレス バーの URL を比較すると、3 つの値渡しメソッドの URL 間の違いを観察できます

関連学習の推奨事項:

JavaScript 学習チュートリアル

以上がReactでページに値を渡す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。