Tonic getElementById（）

Question

我想在tonicdev.com上爲我在Npm上託管的開源反應組件設置一個代碼示例。

這裏是我試圖運行（在tonicdev.com here現場編輯）代碼：

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var {Calendar, CalendarControls} = require('react-yearly-calendar'); 

function onDatePicked(date) { 
    alert(date); 
} 

ReactDOM.render(
    <Calendar 
    year={2016} 
    onPickDate={onDatePicked} 
    />, 
    document.getElementById('calendar') 
); 

進補抱怨，因爲它沒有一個document選擇：

號文件對象在節點中。 Tonic是一個節點環境，因此文檔和其他瀏覽器功能將不存在。

但它沒有提供替代方案。由於這是一個React組件，我應該使用ReactDOM.render來渲染它，這需要第二個參數domContainerNode。我如何在Tonic中獲得一個？

更一般地說：我做錯了什麼？有什麼方法可以在Tonic中運行React示例？

Answer 1

加維諾，你弄錯了。 Tonic是一個節點原型製作服務，這意味着它允許您運行/測試nodeJS的代碼。

正如你可能已經知道的那樣，nodeJS是一個後端服務，這意味着它是服務器端的。因此，document或任何其他瀏覽器特定（客戶端功能）不可用。

使用nodeJS獲取數據出你對/public文件夾作爲服務器是您要使用以下的地方：

function onDatePicked(date) { 
    alert(date); 
} 

ReactDOM.render(
    <Calendar 
    year={2016} 
    onPickDate={onDatePicked} 
    />, 
    document.getElementById('calendar') 
);