반응이없는 간단한 구성 요소

저는이 질문에 대해 새로운 대답을했습니다. 기본 React 구성 요소를 렌더링하려고합니다. 이것은이 내하는 index.js반응이없는 간단한 구성 요소

import React from 'react'; 
import 'babel-polyfill'; 
import { render } from 'react-dom'; 
import './styles/style.css'; 
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; 
import Layout from './components/Layout'; 

React.render(<Layout />, document.getElementById("root"));

내 index.html을

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <title>React</title> 
    </head> 
    <body> 

    <div id="root"></div> 
    <script src="/bundle.js"></script> 
    </body> 
</html>

입니다 이건 내 레이아웃 구성 요소입니다.

import React from 'react'; 
import {render } from 'react-dom'; 

class Layout extends React.Component{ 
    render(){ 
    return(
     <div className="container-fluid"> 
     <div className="jumbotron"> 
      <h1>This is home now</h1> 
     </div> 
     </div> 
    ); 
    } 
} 
export default Layout;

이

은

Uncaught TypeError: _react2.default.render is not a function

내가 dev에 서버를 시작

, 나는 아무것도 빈 페이지가 렌더링 얻기를 참조하십시오 내가 콘솔에 표시되는 오류입니다. 어떤 도움을 주셔서 감사합니다.

출처

2016-10-26 Anonymous

페이지를로드 할 때 무엇이 보이나요? 경고/오류 – finalfreq

'render (, document.getElementById ("root")); ' –

이 번들을이 js로 무엇을 사용하고 있습니까? – Sandro

react-dom에서 index.js의 렌더링 함수를 가져 오는 방법은 사용자가 호출하는 방식을 변경합니다.

import { render } from 'react-dom';

이제 반응 -dom 개체에서 렌더링 메서드를 가져옵니다. 그래서 그것을 사용하면

render(<Layout />, document.getElementById("root"));

출처

2016-10-26 21:18:11

가능한 혼란을 해결하는 것이 좋습니다. 구성 요소 내부의'render'는'ReactDOM.render'가 아니며 DOM에 실제로 렌더링하는 데 사용되지 않습니다 - 즉 ReactDOM.render는 – Li357

을위한 것입니다. @AndrewLi index.js 파일에서 가져 오기를 참조합니다. –

을 지정하여 편집했습니다.하지만 이해할 수 있지만 구성 요소에 react-dom 가져 오기가 필요 없음을 언급합니다. 혼란의 원인이 될 수 있습니다. – Li357

반응이없는 간단한 구성 요소

답변

관련 문제