React Router에서 처리되는 구성 요소에 소품을 전달하는 방법은 무엇입니까?

React Router에서 처리되는 구성 요소에 Prop 전달

React Router를 사용하는 React.js 애플리케이션에서는 처리되는 구성 요소에 Prop을 전달해야 하는 경우가 흔합니다. 이를 달성하기 위해 고려해야 할 몇 가지 접근 방식이 있습니다.

한 가지 간단한 접근 방식은 원하는 props를 가져와 필요에 따라 전달하는 새 구성 요소로 처리된 구성 요소를 래핑하는 것입니다.

<code class="javascript">var CommentsWrapper = React.createClass({
  render: function () {
    return <Comments myprop="value" />;
  }
});</code>

이 방법으로 CommentsWrapper를 원하는 경로에 대한 핸들러로 사용할 수 있습니다.

<code class="javascript">var routes = (
  <Route path="/" handler={Index}>
    <Route path="comments" handler={CommentsWrapper}/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);</code>

그러나 이 접근 방식은 처리된 여러 구성 요소에 소품을 전달해야 하는 경우 다루기 어려울 수 있습니다. 이러한 경우 더 유연한 접근 방식은 경로 구성에서 구성 요소 속성을 사용하는 것입니다. 이를 통해 props를 처리된 구성 요소에 직접 전달할 수 있습니다.

<code class="javascript">var routes = (
  <Route path="/" component={Index}/>
);

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

이 접근 방식을 사용하면 props를 처리된 구성 요소에 직접 전달할 수 있습니다. 래퍼가 필요 없는 Comments 구성 요소:

<code class="javascript"><Route path="comments" component={Comments}/></code>

위 내용은 React Router에서 처리되는 구성 요소에 소품을 전달하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!