[javascript] 반응 라우터-소품을 핸들러 구성 요소에 전달

JAVASCRIPT / 글쓴이

React Router를 사용하는 React.js 응용 프로그램의 구조는 다음과 같습니다 .

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);
});

일부 속성을 Comments구성 요소 에 전달하고 싶습니다 .

(일반적으로 나는 이렇게 할 것이다 <Comments myprop="value" />)

React Router로 가장 쉽고 올바른 방법은 무엇입니까?

답변

최신 정보

새로운 릴리스 이후 Route래퍼를 사용하지 않고 구성 요소 를 통해 직접 소품을 전달할 수 있습니다 . 예를 들어 prop 를 사용render 합니다.

구성 요소:

class Greeting extends React.Component {
  render() {
    const {text, match: {params}} = this.props;

    const {name} = params;

    return (
      <React.Fragment>
        <h1>Greeting page</h1>
        <p>
          {text} {name}
        </p>
      </React.Fragment>
    );
  }
}

용법:

<Route path="/greeting/:name" render={(props) => <Greeting text="Hello, " {...props} />} />

코드 및 상자 예

구 버전

내가 선호하는 방법은 Comments구성 요소를 감싸고 래퍼를 경로 처리기로 전달하는 것입니다.

다음은 변경 사항이 적용된 예입니다.

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

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

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

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

ReactRouter.run(routes, function (Handler) {
  React.render(<Handler/>, document.body);
});

답변

래퍼를 쓰지 않으려면 다음과 같이하십시오.

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}/>
);

답변

허용 된 응답에서 ciantic 의 주석에서 복사 :

<Route path="comments" component={() => (<Comments myProp="value" />)}/>

이것은 제 생각에 가장 우아한 해결책입니다. 효과가있다. 나를 도와 주었다.

답변

이것은 yuji 가 불편한 의견을 남기지 않고 Rajesh 의 솔루션으로 React Router 4 용으로 업데이트되었습니다.

코드는 다음과 같습니다.

<Route path="comments" render={(props) => <Comments myProp="value" {...props}/>}/>

render대신을 사용 합니다 component. 그 이유는 원하지 않는 재 장착 을 피하기 위함입니다 . 또한 props해당 메소드에 전달하고 , Object Spread 연산자 (ES7 제안)와 함께 Comments 구성 요소에 동일한 소품을 사용합니다.

답변

ColCh의 답변에 대한 후속 조치입니다. 구성 요소의 래핑을 추상화하는 것은 매우 쉽습니다.

var React = require('react');

var wrapComponent = function(Component, props) {
  return React.createClass({
    render: function() {
      return React.createElement(Component, props);
    }
  });
};

<Route path="comments" handler={wrapComponent(Comments, {myprop: value})}/>

이 솔루션을 아직 테스트하지 않았으므로 피드백이 중요합니다.

이 방법을 사용하면 라우터를 통해 전송 된 소품 (예 : 매개 변수)을 덮어 쓰거나 제거한다는 점에 유의해야합니다.

답변

소품을 <RouteHandler>v0.13.x에서 또는 v1.0에서 Route 구성 요소 자체에 전달하여 소품을 전달할 수 있습니다 .

// v0.13.x
<RouteHandler/>
<RouteHandler someExtraProp={something}/>

// v1.0
{this.props.children}
{React.cloneElement(this.props.children, {someExtraProp: something })}

( https://github.com/rackt/react-router/releases/tag/v1.0.0 의 업그레이드 안내서에서 )

모든 하위 처리기는 동일한 소품 세트를 받게됩니다. 상황에 따라 유용 할 수도 있고 그렇지 않을 수도 있습니다.

답변

ES6을 사용하면 구성 요소 래퍼를 인라인으로 만들 수 있습니다.

<Route path="/" component={() => <App myProp={someValue}/>} >

자녀를 합격시켜야하는 경우 :

<Route path="/" component={(props) => <App myProp={someValue}>{props.children}</App>} >