반응에서 페이지에 값을 전달하는 방법

반응에서 페이지 값 전송 방법: 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>
    )
  }
}

위의 매개변수와 하나의 매개변수 이름을 지정합니다.

사용:

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

위 메소드는 하나 이상의 값을 전달할 수 있지만 각 값의 유형은 문자열이며 객체를 전달할 수 없는 경우 json 객체를 문자열로 변환한 다음 전달할 수 있습니다. 전달한 후 json 문자열을 객체로 변환하고 데이터를 꺼냅니다. 예: 경로 정의:

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

사용 :

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

데이터 가져오기:

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

이런 식으로 UserPage 페이지로 이동할 때 문자열을 전달하여 매개변수만 전달할 수 있는데, 문자열 대신 개체를 직접 우아하게 전달할 수 있는 다른 방법이 있나요?

2. query

query 메소드는 양식의 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);

Get data:

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

query method 어떤 유형의 값이라도 전달할 수 있지만 페이지의 URL도 쿼리 값으로 이어져 있습니다. 그래서 양식 게시물과 유사한 데이터를 전달하는 방법이 있습니까? 전달된 데이터가 일반 텍스트로 전송되지 않도록 하는 방법은 무엇입니까?

3. state

state 방식은 post 방식과 유사하며, 사용법도 query 방식과 유사합니다.

먼저 경로 정의:

<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을 비교하여 세 가지 값 전달 URL의 차이를 관찰할 수 있습니다

관련 학습 권장 사항:

javascript 학습 튜토리얼

위 내용은 반응에서 페이지에 값을 전달하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!