React 응용 프로그램에서 DOM 작업을 안전하게 수행 할 수 있지만 React 구성 요소 외부에서 수행 할 수 있습니까?

나는 나의 첫번째 반작용 프로젝트를 수행 할 준비를하고있어, 나의 독서는 내가 모든 가상 DOM 렌더링을 처리 반작용 할 필요가 꽤 명확했다, 나는 방해 수동 DOM 작업을하지 말아야 할 것을 가상 DOM 계산React 응용 프로그램에서 DOM 작업을 안전하게 수행 할 수 있지만 React 구성 요소 외부에서 수행 할 수 있습니까?

나는 반작용 구성 요소가 다른 HTML이있는 페이지에 DIV의 #app 렌더링했다고 가정하자 :

내가 알아낼 수 없습니다 무엇, 그러나,이입니다. 이것은 내가 어떤 일반적인 자바 스크립트 DOM 작업 페이지에 어디 자제해야한다는 뜻인가요? 아니면 실제 내부의 #app 사업부 및 요소를 떠나 나는 안전하게 한 페이지에 다른 DOM 작업을 사용할 수있는 구성 요소 만 반응?

편집 : 동기 부여 유스 케이스

비 반작용 구성 요소는 HTML이 농구의 많은 통해 점프없이 구글 볼 수 있도록 대부분이다 반작용 구성 요소의 외부 DOM을 조작 가진 생각에 대한 나의 이유. SEO에 유용 할 수있는 앱에 대한 설명 텍스트가 필요하고 해당 설명에 드롭 다운 토글 등이있을 수 있다고 가정합니다 (따라서 DOM 문제). Really에서 모든 것을 작성하고 싶습니다. 단지 비용이 일부 텍스트를 Google에서 색인 생성하도록 만드는 경우 앱 자체의 복잡한 UI가 React를 사용하기 때문입니다.

출처

2016-09-20 DLH

당신은 페이지의 DOM 작업을 할 수 있지만, 난 당신이 반작용 루트의 * 내부의 DOM *을 수정 한 경우 무슨 일이 일어날 지 모른다. 나는 그것이 아주 폭발적 일 것이라고 상상할 것이다. –

번호. React-managed dom 요소를 조작하지 마십시오. 그리고 당신이 기술적으로 할 수있는 일조차도 할 수는 있지만 어떻게해야하는지에 대해 정말로 신중해야합니다. 그리고 만약 당신이 할 일이 컴포넌트의'render()'에서 할 수 있다면, 그렇게하십시오. –

귀하의 질문에 대한 오해가있을 수 있지만 React는 DOM의 "조작"에 대한 모든 답변을 처리 할 수있는 좋은 후보가 될 것입니다.

당신의 구성 요소는 평범한 JS DOM 조작으로 조작되는 요소와 동일한 페이지에서 살 수 반작용,하지만 당신은 충돌 패러다임을 도입하고있다. "React에서이 작업을 수행 할 수는 없지만 jQuery를 사용하는 방법을 알고있다"는 생각이들 때, 뭔가 빠졌을 가능성이 큽니다.

편집 : 유스 케이스를 명확히 주셔서 감사합니다. 당신은 확실히 모든 것을 React에 쓸 필요가 없습니다. 다른 사람들이 말했듯이 React가 소유 한 DOM의 일부만 다른 JS에 남겨 두라고 조언합니다. Fetch as Google은 React에서 SEO를 탐색하는 데 도움이 될 것 같습니다. HTML 파일을 가정

는

출처

2016-09-20 19:53:45 Rand

필자는 질문을 편집하여 페이지의 모든 내용에 대해 React를 사용하고 싶지 않은 이유를 설명했습니다. 아마도 지금은 어리석은 질문처럼 보일 것입니다. – DLH

내 답변이 업데이트되었습니다. 유효한 유스 케이스처럼 들립니다. 당신의 질문은 나를 REACT의 SEO 탐구에 관심있게 만들었습니다. :) – Rand

다음과 같습니다

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

과 같이 초기화 반응 : 그대로

ReactDOM.render(<Component/>, document.getElementById('app'));

안전하게 div#others 내부 div#app 제외하고는 DOM의 일부를 수정할 수 있습니다 React에 의해 관리됩니다.

출처

2016-09-24 12:18:55

React 응용 프로그램에서 DOM 작업을 안전하게 수행 할 수 있지만 React 구성 요소 외부에서 수행 할 수 있습니까?

답변

관련 문제