React Router의 핸들러 구성 요소에 소품을 전달하는 방법은 무엇입니까?

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

React Router를 활용하는 React.js 애플리케이션에서는 특정 속성을 전달하는 경우가 있을 수 있습니다. 하위 구성 요소가 필요합니다. 예를 들어 다음 구조를 고려해보세요.

<code class="javascript">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);
});</code>

목표는 속성을 Comments 구성 요소에 전달하는 것입니다. 일반적으로 이는 구성 요소 선언에서 직접 달성할 수 있습니다. 그러나 React Router를 사용하려면 대안적인 접근 방식이 필요합니다.

한 가지 옵션은 래퍼 구성 요소를 활용하는 것입니다. 여기에는 Comments 구성 요소를 래핑하고 원하는 props를 전달하는 별도의 구성 요소를 만드는 작업이 포함됩니다. 예는 다음과 같습니다.

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

// Then in the routes definition:

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

래퍼 구성 요소를 사용하지 않는 또 다른 접근 방식은 Index 구성 요소를 수정하는 것입니다.

<code class="javascript">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}/>
);</code>

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