进补 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 选择器：

No document object in node. Tonic is a node environment, so document and other browser features won't exist.

但它没有提供替代方案。由于这是一个 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')
);

进补 getElementById()

Tonic getElementById()

javascript

npm

tonic

reactjs