반응 레일이있는 눈에 잘 띄지 않는 JS

Question

저는 현재 ReactJS 프런트 엔드가있는 레일즈를 사용하고 있습니다.

React.render(
    React.createElement(CommentBox, {url: "/demo"}), 
      document.getElementById('content') 
     ); 
</script> 

을가 완벽하게 작동이 구성에서 : 나는이 스크립트 태그 아래에 index.html.erb에 앉아있다, 그러나, 적절한 .js.jsx 파일에 내 JS의 대부분을 가지고있다.

나는 평범한 "Rails Way"가 방해가되지 않는 JS이지만, 그렇게 힘든 시간을 보내고 있습니다. 위 코드를 주 .js 파일로 옮기면 content 요소가 존재하기 전에로드되고 아무 것도 렌더링되지 않습니다.

실제 레일은 눈에 잘 띄지 않는 JS를위한 특별한 보석을 제공하지만 실제로 두 가지 문제가 있습니다. 첫째, 문서가 실제로 URL 태그를 부착하는 방법을 참조하지 않기 때문에이 작품의도는 (오류, 그냥 아무것도 렌더링하지 않음) :

<% react_component('CommentBox', url: '/demo') %> 
<div data-react-class="CommentBox" data-react-props="url: /demo" /> 

더 큰 문제는 그러나,이다 끝까지 react- 그 ujs gem 작업은 body close 태그 앞에 자동으로 수백 줄의 JavaScript를 포함시키는 것입니다. 이것은 내가 시작했던 네 가지 임베디드 라인보다 덜 눈에 띄지 않거나, 그것을 뛰어 넘는 것으로 느껴지지 않습니다.

첫 번째 문제를 해결할 수 있다고 가정 할 때 왜이 방법이 더 좋을지 모르는 이유가 무엇입니까?

메인 .js 파일로 옮겨서 렌더링하는 방법이 있습니까? 전용 .js 파일로 옮기고 컨텐트 태그 다음에 호출 할 수는 있지만 자산 파이프 라인을 망쳐 놓고 네 줄의 임베디드 스크립팅을 다른 전체 파일 호출로 바꿉니다.

레일 커뮤니티의 절반은 이단적인 스크립팅을 이단이라고 부르지 만, 가장 효율적인 솔루션처럼 계속 찾고 있습니다.

Answer 1

위의 코드를 주 .js 파일로 옮기면 콘텐츠 요소가 존재하기 전에로드되고 아무것도 렌더링되지 않습니다.

당신은 같은 일을 시도 할 수 있습니다 :

document.addEventListener("DOMContentLoaded", function(event) { 
    React.render(React.createElement(CommentBox, { url: '/demo' }), 
       document.getElementById('content') 
); 
}); 

나는 눈에 거슬리지 방법은 '더 나은'인지 주관적인 질문의 종류인지를 생각합니다. 나는 지금도 React.js를 Rails와 함께 사용하는 단계를 아직도 알고 있으며, 나는 무엇을해야하는지에 정착하지 못했습니다. 나는 눈에 잘 띄지 않는 스타일과 비슷하지만 react_ujs.js는 글로벌 네임 스페이스에있는 모든 것에 달려있다. 또한 자산 관리를 webpack/npm으로 바꾸는 것을 실험하고있다. 거기에는 모든 것이 멋지게 모듈화되어있다. 그러나 그것은 react_ujs를 짜증나게한다).

Answer 2

React-Rails 구성 요소에 대해서는 실제로 렌더링 할 구성 요소의 등호가 누락 된 것처럼 보입니다.

이 같아야합니다

<%= react_component('CommentBox', url: '/demo') %> 

는 대신에, 당신이이 : 실제로 레일이있는 페이지에 아무것도 렌더링하지 않습니다

<% react_component('CommentBox', url: '/demo') %> 

.