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')
);

Tonic抱怨，因为它没有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')
);

Tonic getElementById（）

1 个答案: