Rails 5 Redux React Server Side Rendering은 클라이언트 측 JavaScript 경고 'React-rendered Children을 새로운 것으로 바꾸는 것'을 제공합니다. '

Question

업데이트 : 문제의 반응 - 레일과 npm 버전의 React가 다릅니다 - 자신의 대답은

레일 (5)에 레일이-반응하여이 경고를 받고 :

이

Replacing React-rendered children with a new root component. If you 
intended to update the children of this node, you should instead have 
the existing children update their state and render the new 
components instead of calling ReactDOM.render. 

사이트가 잘 작동하는 것 같다,하지만 분명히 뭔가 최대 :

index.html.erb :

,536을

<div class="item"> 
    <%= react_component('WeatherRoot', {}, { :prerender => true }) %> 
</div> 

components.js :

window.React = require('react'); 
window.ReactDOM = require('react-dom'); 
window.WeatherRoot = require('./components/containers/WeatherRoot.es6').default; 

WeatherRoot.es6.js

import React, { Component } from 'react'; 
import { render } from 'react-dom' 
import { Provider } from 'react-redux'; 
import WeatherContainer from './WeatherContainer.es6'; 
import configureStore from '../store/configureStore.es6'; 

import {fetchWeather} from '../actions/weather.es6'; 

const store = configureStore(); 

// Request Data as Early as Possible 
store.dispatch(fetchWeather()); 

export default class WeatherRoot extends Component { 
    render() { 
    return (
     <Provider store={store}> 
     <WeatherContainer /> 
     </Provider> 
    ); 
    } 
} 

WeatherContainer.es6

import { connect } from 'react-redux' 
import Weather from '../components/Weather.es6'; 


export function WeatherContainerImpl(props){ 
    return (<div>HELLO</div>); 
} 

const mapStateToProps = (state, ownProps) => { 
    return { 
    weather: state.weather.data 
    } 
} 

const mapDispatchToProps = (dispatch, ownProps) => { 
    return { 
    dispatch 
    } 
} 

const WeatherContainer = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(WeatherContainerImpl); 

export default WeatherContainer; 

페이지 렌더링 :

<div data-react-class="WeatherRoot" data-react-props="{}"> 
    <div data-reactroot="" data-reactid="1" data-react-checksum="-951512882">HELLO</div> 
</div> 

클라이언트 측 렌더링으로 교체 :

/** 
* True if the supplied DOM node has a direct React-rendered child that is 
* not a React root element. Useful for warning in `render`, 
* `unmountComponentAtNode`, etc. 
* 
* @param {?DOMElement} node The candidate DOM node. 
* @return {boolean} True if the DOM element contains a direct child that was 
* rendered by React but is not a root element. 
* @internal 
*/ 
function hasNonRootReactChild(node) { 
    var reactRootID = getReactRootID(node); 
    return reactRootID ? reactRootID !== ReactInstanceHandles.getReactRootIDFromNodeID(reactRootID) : false; 
} 

기본적 노드가 "1"의 ID를 갖는 행 :

<div data-react-class="WeatherRoot" data-react-props="{}"> 
    <div data-reactid=".0">HELLO</div> 
</div> 

디버깅 ReactMount.js는 경보의 소스 인 사실 반환이 방법을 도시 이 구현 널 서버 측 렌더링 및

ReactInstanceHandles.getReactRootIDFromNodeID(reactRootID) 

반환 값 :

(id) { 
    if (id && id.charAt(0) === SEPARATOR && id.length > 1) { 
    var index = id.indexOf(SEPARATOR, 1); 
    return index > -1 ? id.substr(0, index) : id; 
    } 
    return null; 
} 

ID가 a로 시작해야합니다. 넘기기?

왜 서버 측 렌더링 ID가.으로 시작하지 않습니까?

아마도 다른 버전의 반응이 있습니까? 하지만 둘은 14.8

몇 가지 디버깅을 추가처럼 :

export function WeatherContainer(props){ 
    console.log("WeatherContainer", React.version) 
    return (<div>HELLO</div>); 
} 

는 이러한 로그를 표시합니다 :

WeatherContainer 15.2.1 
WeatherContainer 0.14.8 

!!!!

이제 두 가지 버전을 얻는 방법을 어떻게 알 수 있습니까?

Answer 1

OK 클라이언트 측 버전

export function WeatherContainer(props){ 
    console.log("WeatherContainer", React.version) 
    return (<div>HELLO</div>); 
} 

는 준 :

,

WeatherContainer 15.2.1 
WeatherContainer 0.14.8 

참고 : 콘솔 로그 때문에 application.rb

config.react.server_renderer_options = { 
    files: ["react-server.js", "components.js"], # files to load for prerendering 
    replay_console: true,     # if true, console.* will be replayed client-side 
    } 

의 replay_console 설정에 보이는 클라이언트 쪽 반응 레일-1.8.1 번들 그래서 패키지에

15.2.1 반응. JSON 나는 반응 및 반응-DOM을 버전 0.14.3에 내가

로 1.5.0에 반응 레일을 강제

npm install -S react@0.14.3 
npm install -S react-dom@0.14.3 

로하고 Gemfile에 강제 617,451,515,

gem 'react-rails', '1.5' 

지금 모두 0.14.3

반응하며 경고

Answer 2

이런 <div>에 WeatherRoot 응답을 포장하십시오 :

내가 반응의 서버 버전에서 다른 것을 볼 수 있었다 콘솔 로그를 추가하여 문제

을 발견

export default class WeatherRoot extends Component { 
    render() { 
    return (
     <Provider store={store}> 
     <div><WeatherContainer /></div> 
     </Provider> 
    ); 
    } 
}