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

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

React Router를 활용하는 React 애플리케이션에서는 동적으로 로드된 핸들러 구성 요소에 속성을 전달해야 할 필요성이 발생합니다.

다음 React Router 구성을 고려하세요.

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

Comments 구성 요소에 속성을 전달하려면 다음과 같이 Index 구성 요소를 확장할 수 있습니다.

<code class="javascript">class Index extends React.Component { // using babel here

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <h1>
        Index - {this.props.route.foo}
      </h1>
    );
  }
}

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

이 접근 방식을 사용하면 Index 구성 요소 내에서 직접 foo 속성을 사용하여 효과적으로 Comments 구성 요소에 전달합니다.

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