2016-01-28 25 views
7

Tôi có một khá đơn giản phản ứng thiết lập dự án:Reactjs: tài liệu không được định nghĩa

├── app.js 
├── components 
│   ├── MainWrapper.js 
│   └── html.js 
├── package.json 
└── server.js 

Ứng dụng này được bắt đầu bởi:

node server.js 

Trong đó sử dụng các máy chủ nhanh và làm cho đánh dấu cho một HtmlComponent trong html.js:

import React from 'react'; 
import MainWrapper from './MainWrapper.js' 

class HtmlComponent extends React.Component { 
    render() { 
     return (
      <html> 
       <head> 
        <meta charSet="utf-8" /> 
        <title>My Awesome Site</title> 
        <meta name="viewport" content="width=device-width, user-scalable=no" /> 
        <link rel="stylesheet" href="awesome.css" /> 
       </head> 
       <body> 
        <div id="root"></div> 
       </body> 
      </html> 
     ) 
    } 
} 

export default HtmlComponent; 

Mục đích là tạo một Trình bao bọc sẽ điền vào div 'gốc'. Nó rất đơn giản ngay bây giờ:

MainWrapper.js:

import React from 'react'; 
import ReactDOM from 'react-dom'; 

var MainWrapper = React.createClass ({ 
    render: function() { 
     return (
      <button>go</button> 
     ) 
    } 
}); 

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

Khi tôi chạy nút server.js có một ngoại lệ:

/Users/me/Desktop/Simple/components/MainWrapper.js:36 
_react2['default'].render(_react2['default'].createElement(MainWrapper, null), document.getElementById("root")); 
                      ^

ReferenceError: document is not defined 
    at Object.<anonymous> (/Users/me/Desktop/Simple/components/MainWrapper.js:27:31) 
    at Module._compile (module.js:425:26) 
    at normalLoader (/Users/me/Desktop/Simple/node_modules/babel-core/lib/api/register/node.js:199:5) 
    at Object.require.extensions.(anonymous function) [as .js] (/Users/me/Desktop/Simple/node_modules/babel-core/lib/api/register/node.js:216:7) 
    at Module.load (module.js:356:32) 
    at Function.Module._load (module.js:311:12) 
    at Module.require (module.js:366:17) 
    at require (module.js:385:17) 
    at Object.<anonymous> (/Users/me/Desktop/Simple/components/Html.js:5:26) 
    at Module._compile (module.js:425:26) 

Tôi không hiểu tại sao tài liệu không được định nghĩa. Có vẻ như nó là javascript đơn giản.

+1

bạn có hiển thị phía máy chủ này không? –

Trả lời

13

nếu bạn đang kết xuất phía máy chủ này, sẽ không có đối tượng "tài liệu". thử gói nó trong những điều sau đây:

if(typeof window !== 'undefined') { 
    React.render(<MainWrapper />, document.getElementById("root")); 
} 

này sẽ kiểm tra xem nếu một đối tượng cửa sổ đang hiện diện (nghĩa của nó trong trình duyệt) nếu nó trong trình duyệt, sau đó các đối tượng tài liệu hiện diện

+0

Xin chào Abdul. Tôi bọc React.render (...) như bạn đã gợi ý. Tôi vẫn gặp lỗi tương tự. – Matt

+0

bạn có quy trình xây dựng không? bạn đã xây dựng lại chưa? bạn đã khởi động lại máy chủ chưa? hãy thử tất cả các bước đó –

+0

Ok. Tôi chạy npm xây dựng lại. Phải mất vài lần vì lý do nào đó. Tôi không nhận được lỗi ... Phải làm bên máy chủ này bằng cách nào đó. Tôi sẽ điều tra. – Matt

0

document won Không được xác định khi hiển thị trên máy chủ - hãy thử gọi số React.render() trong số if(typeof window !== 'undefined') { }.

Các vấn đề liên quan