React: componentDidMount의 요소를 한 번에 다시 렌더링합니다. 오류: null의 'rootID' 속성을 읽을 수 없습니다.

에 만든 2016년 05월 10일 · 3코멘트 · 출처: facebook/react

componentDidMount 함수에서 ReactDOM.render #container element(top-level) 를 수행합니다. React 는 null 의 'rootID' 속성을 읽을 수 없다는 오류를 표시합니다.
setTimeout을 사용하면 ReactDOM.render를 실행하면 됩니다. (0ms 후에도)
확신이 서지 않습니다. 누군가 나를 도와줄 수 있습니까?

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>React</title>
</head>
<body>
    <div id="container"></div>
    <script type="text/javascript" src="script/lib/react.js"></script>
    <script type="text/javascript" src="script/lib/react-dom.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <script type="text/javascript" src="script/bundle.js"></script>
</body>
</html>

A.jsx 및 B.jsx:

var A = React.createClass({
    componentDidMount: function(){
        ReactDOM.render(
            <B />,
            document.getElementById('container')
        );
    },
    render: function(){
        return (
            <div>Hello World, I'm A.</div>
        )
    }
});

var B = React.createClass({
    render: function(){
        return (
            <div>Hello World, I'm B.</div>
        )
    }
});

앱.jsx:

ReactDOM.render(
    <A />,
    document.getElementById('container')
);

출처

h1orz

가장 유용한 댓글

진짜 질문은 왜 수명 주기 메서드 내에서 ReactDOM.render 를 호출하는 것입니까? 현재 구성 요소가 탑재된 노드에 새 구성 요소를 탑재하려고 합니다. 이는 안티 패턴처럼 보입니다.

루트에서 다시 마운트하는 대신 루트 상위 구성 요소를 사용하여 렌더링할 구성 요소를 관리해야 합니다. 여러 개의 React 루트가 절대적으로 있어야 하는 경우(정말 좋은 이유가 있어야 함) 일종의 도우미 시스템을 사용하여 이를 관리해야 합니다.

https://facebook.github.io/react/blog/2015/10/01/react-render-and-top-level-api.html#helpers

여러 React 루트가 있거나 시간이 지남에 따라 삭제되는 단일 루트가 있는 경우 항상 고유한 래퍼 API를 만드는 것이 좋습니다. 이것들은 모두 외부 시스템이 어떻게 생겼는지에 따라 약간 다르게 보일 것입니다. 예를 들어 Facebook에는 자동으로 페이지 전환 라우터에 연결하여 자동으로 unmountComponentAtNode를 호출하는 시스템이 있습니다.

모든 곳에서 ReactDOM.render()를 직접 호출하는 것보다 애플리케이션 내에서 마운트 및 마운트 해제를 관리하는 라이브러리 작성/사용을 고려하십시오.

aweary 에 2016년 06월 01일

👍2 🎉1

모든 3 댓글

jsfiddle에서 문제를 재현할 수 있습니까? https://jsfiddle.net/L3zn8dws/

cpb 에 2016년 06월 01일

https://facebook.github.io/react/blog/2015/10/01/react-render-and-top-level-api.html#helpers

여러 React 루트가 있거나 시간이 지남에 따라 삭제되는 단일 루트가 있는 경우 항상 고유한 래퍼 API를 만드는 것이 좋습니다. 이것들은 모두 외부 시스템이 어떻게 생겼는지에 따라 약간 다르게 보일 것입니다. 예를 들어 Facebook에는 자동으로 페이지 전환 라우터에 연결하여 자동으로 unmountComponentAtNode를 호출하는 시스템이 있습니다.

모든 곳에서 ReactDOM.render()를 직접 호출하는 것보다 애플리케이션 내에서 마운트 및 마운트 해제를 관리하는 라이브러리 작성/사용을 고려하십시오.

aweary 에 2016년 06월 01일

👍2 🎉1

이것은 지원되지 않는 패턴처럼 보입니다. 수명 주기가 현재 실행 중인 다른 구성 요소가 이미 포함된 컨테이너에 무언가를 렌더링하려고 합니다.

B 를 표시하려면 A <B /> 를 포함합니다.

gaearon 에 2016년 10월 27일

👍2

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

React: componentDidMount의 요소를 한 번에 다시 렌더링합니다. 오류: null의 'rootID' 속성을 읽을 수 없습니다.

가장 유용한 댓글

모든 3 댓글

관련 문제