> 웹 프론트엔드 > JS 튜토리얼 > React Router의 핸들러 구성 요소에 소품을 어떻게 전달할 수 있나요?

React Router의 핸들러 구성 요소에 소품을 어떻게 전달할 수 있나요?

Patricia Arquette
풀어 주다: 2024-10-23 18:44:31
원래의
545명이 탐색했습니다.

How Can I Pass Props to Handler Components in React Router?

React Router의 핸들러 구성요소에 Prop 전달

React Router에서는 Props를 핸들러 구성요소에 전달하는 것이 일반적인 요구 사항입니다. 다음 구조를 고려하세요.

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');

var Index = React.createClass({
  render: function () {
    return (
        <div>
            <header>Some header</header>
            <RouteHandler />
        </div>
    );
  }
});

var routes = (
  <Route path="/" handler={Index}>
    <Route path="comments" handler={Comments}/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);

ReactRouter.run(routes, function (Handler) {
  React.render(<Handler/>, document.body);
});
로그인 후 복사

Prop를 직접 전달

전통적으로는 다음과 같이 Comments 구성 요소에 Prop을 직접 전달했습니다.

<Comments myprop="value" />
로그인 후 복사

React Router를 통해 Prop 전달

그러나 React Router에서는 Prop이 Route의 컴포넌트 Prop을 통해 전달되어야 합니다. 이를 수행하는 방법에는 두 가지가 있습니다:

1. 래퍼 구성 요소 사용

핸들러 구성 요소를 감싸는 래퍼 구성 요소를 만듭니다.

var RoutedComments = React.createClass({
  render: function () {
    return <Comments {...this.props} myprop="value" />;
  }
});
로그인 후 복사

그런 다음 경로에서 Comments 구성 요소 대신 RoutedComments 구성 요소를 사용합니다.

<Route path="comments" handler={RoutedComments}/>
로그인 후 복사

2. 경로 속성과 함께 클래스 구성 요소 사용

React.Component에서 확장되는 클래스 구성 요소를 정의하고 구성 요소 소품을 사용합니다.

class Index extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <h1>
        Index - {this.props.route.foo}
      </h1>
    );
  }
}

var routes = (
  <Route path="/" foo="bar" component={Index}/>
);
로그인 후 복사

위 내용은 React Router의 핸들러 구성 요소에 소품을 어떻게 전달할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿