补品 getElementById()

Question

我正在尝试在 tonicdev.com 上为我托管在 Npm 上的开源 React 组件设置一个代码示例。

这是我尝试运行的代码（在 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')
);

Tonic 抱怨，因为它没有 document 选择器：

节点中没有文档对象。 Tonic 是一个节点环境，因此不会存在文档和其他浏览器功能。

但它没有提供替代方案。由于这是一个 React 组件，我应该使用 ReactDOM.render 渲染它，它需要 domContainerNode 作为第二个参数。如何在补品中获得一个？

更笼统地说：我做错了什么吗？有没有办法在 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')
);