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

React Router를 사용하여 핸들러 구성 요소에 Prop 전달

React Router를 활용하는 React.js 애플리케이션에서는 특정 핸들러 구성 요소에 Prop을 전달해야 하는 시나리오가 발생할 수 있습니다. . 다음 애플리케이션 구조를 고려하십시오.

<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 구성 요소에 prop을 전달하려면 일반적으로 와 같은 구문을 사용합니다. 그러나 이 접근 방식은 핸들러 구성 요소가 순수 함수 또는 클래스 구성 요소일 것으로 기대하는 React Router와 호환되지 않습니다.

한 가지 해결책은 핸들러 구성 요소와 전달된 props를 모두 캡슐화하는 래퍼 구성 요소를 만드는 것입니다.

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

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

또는 클래스 구성 요소와 this.props.route 개체를 활용하여 상위 경로에 전달된 prop에 액세스할 수 있습니다.

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

/ 경로에 foo prop을 설정하여 , 나중에 this.props.route를 사용하여 Index 구성 요소 내에서 prop에 액세스할 수 있습니다.

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