여러 개의 반응 구성 요소를 올바르게 사용하는 방법은 무엇입니까?

Question

PHP laravel로 작성된 웹 응용 프로그램을 가지고 있으므로 라우팅 및 데이터베이스에 사용하고 있습니다. 이제 특정 페이지에서 반응 구성 요소를 사용하고 싶습니다. 반응에서 전체 사이트를 구축하고 싶지 않습니다. 하지만 webpack은 모든 것을 하나의 파일로 컴파일하기 때문에 오류가 계속 발생합니다.

로컬 호스트는/가정이 완벽하게

<div class="app"> 

</div> 

작동하지만

로컬 호스트/약이 오류를 갈 때까지

final.min.js 제공 : 1 개 catch되지 않은 불변 위반 : _registerComponent (...) : 대상 컨테이너가 DOM 요소가 아닙니다.

//this don't have <div class="app"> 

어떻게 구성 요소를 특정 페이지에 표시 할 수 있습니까?

Answer 1

나는 https://github.com/reactjs/react-router을 사용합니다.

<Router history={browserHistory}> 
    <Route path="/" component={App}> 
     <Route path="about" component={About}/> 
     <Route path="users" component={Users}> 
     <Route path="/user/:userId" component={User}/> 
     </Route> 
     <Route path="*" component={NoMatch}/> 
    </Route> 
    </Router> 

Answer 2

식별 할 수 있도록 div에 ID를 부여하는 것이 좋습니다.

<div id="app"> 
</div> 

그런 다음 현재 페이지에이 div가 있는지 확인하십시오. 이 div가있는 경우에만 반응 구성 요소를 렌더링하십시오.

var app = document.getElementById('app'); 
if (typeof app !== 'undefined') { // or just if (app) { 
    ReactDOM.render(yourReactElement, app); 
} 

Answer 3

React Habitat library을 살펴 보시기 바랍니다.

React의 모든 것을 원하지 않으므로이 문제가 가장 적합한 프레임 워크라고 생각합니다. 이를 통해 구성 요소를 등록하고 필요한 경우 DOM에 렌더링 할 수 있습니다.

예

등록 구성 요소 (들) :

container.register('MyComponent', MyComponent); 
container.register('MySecondComponent', MySecondComponent); 

그런 다음 그들은이처럼 DOM에서 사용할 수있는이 :

<div data-component="MyComponent"></div> 

<div data-component="MySecondComponent"></div> 

위의 자동 반응 구성 요소로 대체됩니다.

URL을 관리하고 다른 곳에서 변경 한 경우 (예 : PHP 코드에서) 앱이 손상 될 수 있으므로 라우터를 사용할 때 조심해야합니다.