구성 요소 레벨에서 소품을 정의하는 방법은 무엇입니까?

여러 레벨의 React JSX 템플릿을 익스프레스 애플리케이션 (예 : https://github.com/reactjs/express-react-views)에 대한 내 뷰로 사용하고 있으며 가장 낮은 레벨의 템플릿 (default.jsx, 다음 예제의 prop)을 전달하는 가장 좋은 방법을 알고 싶습니다. GitHub 및 내 프로젝트 용)을 {this.props.children}을 사용하는 모든 템플릿에 추가합니다. 나는 default.jsx 수준으로 설정하는 것이 좋습니다.구성 요소 레벨에서 소품을 정의하는 방법은 무엇입니까?

내 문제는 다음과 같습니다. 소품을 정의하는 올바른 방법 (내가하고 싶은 것은 siteName)이 <CustomComponent prop="prop value"> 구문을 사용하지 않으면 무엇인지 알 수 없습니다. 동일한 레벨에서/구성 요소와 동일한 파일에서이를 수행하는 적절한 방법은 무엇입니까? 아니면 내가 누락 된 추상화 수준이 있습니까? 코드는 다음과 같습니다.

/** @jsx React.DOM */ 

var SiteHeader = require('../header.jsx'); 

var DefaultLayout = React.createClass({ 
    render: function() { 
     return (
      <html> 
       <head> 
        <h1>{this.props.siteName} - {this.props.title}</h1> 
       </head> 
       <body> 
       <SiteHeader></SiteHeader> 
       {this.props.children} 
       </body> 
      </html> 
     ); 
    } 
}); 

module.exports = DefaultLayout;

/views/index.jsx :

/** @jsx React.DOM */ 

var DefaultLayout = require('./layouts/default.jsx'); 

var ViewsExport = React.createClass({ 
    render: function() { 
     return (
      <DefaultLayout title={this.props.title}> 
       <div>Hello, {this.props.name}!</div> 
      </DefaultLayout> 
     ) 
    } 
}); 

module.exports = ViewsExport;

/views/header.jsx :

/** @jsx React.DOM */ 

var SiteHeader = React.createClass({ 
    return: function() { 
     <header> 
      <h1><a href="">{this.props.siteName}<h1> 
      <nav> 
       ... 
      </nav> 
     </header> 
    } 
});

/routes/index.js (나는 siteHeader을 정의 할, 그리고 그것을 끝까지 전파가)

/views/layouts/default.jsx

exports.index = function(req, res){ 
    res.render('index', { /* props */ }); 
};

출처

2014-11-29 bitandbang

달성하려는 목표가 조금 분명하지 않습니다. 'return ;'. – daniula

확실하지 않지만 찾고있는 것은 React context입니다.

문맥을 문서화하지는 않았지만 어떤 형태로든 에 이미 존재합니다. 모든 포인트에서 소품을 사용하지 않고도 트리를 통해 값을 전달하는 방법으로 존재합니다. . 우리는이 이 시간과 시간을 다시 필요로하는 것을 본 적이 있으므로 만큼 쉽게 만들 수 있기를 바랍니다. 사용에는 성능상의 상충 관계가 있으며 구현시 약점이있는 것으로 알려 졌으므로 솔리드 기능인지 확인하고 싶습니다.

는 일부 코너의 경우 문제가있는 것처럼 보이지만 실제로는 많은 사람들이 사용하고 프레임 워크 반응 위에 구축으로 그것은 아직 공식적으로 발표되지도 http://davehking.com/2014/11/15/introduction-to-contexts-in-react-js.html

참조하십시오. 나는 또한 그것을 사용하고 아직 어떤 버그를 통지하지 않았다. React 팀원은 API가 변경 될 수 있으므로이 기능을 제거하지 않을 것이라고 말했지만 다음 버전에서도이 기능이 제공 될 것으로 기대할 수 있습니다.

출처

2014-11-30 02:49:51

싱글 톤은 node.js와 잘 맞지 않으므로 컨텍스트 (또는 비실용적 인 순도)는 서버 측 렌더링에 필요합니다. 이를 사용하는 경우 정확한 반응 버전을 잠그고 업그레이드하기 전에 자세한 출시 정보를 읽으십시오. – FakeRainBrigand

구성 요소 레벨에서 소품을 정의하는 방법은 무엇입니까?

답변

관련 문제