React.render 在 jsdom 中创建空子组件答案

【问题标题】：React.render makes empty subcomponent in jsdomReact.render 在 jsdom 中创建空子组件
【发布时间】：2015-08-13 09:05:04
【问题描述】：

我正在使用 jsdom 在节点中使用 React。当我尝试呈现包含另一个具有内容的组件的组件时，它将无法呈现子组件的内容。例如，

var React = require('react');
var SubComponent = React.createClass({
  render: function() {
    return React.createElement("div");
  }
});

var TestComponent = React.createClass({
  render: function () {
    /* JSX would look like this:
      <div>
        <p>regular tag</p>
        <SubComponent>sub component</SubComponent>
      </div>
    */
    return React.createElement(
      "div", {},
      React.createElement("p", {}, "regular tag"),
      React.createElement(SubComponent, {}, "sub component")
    );
  }
});

global.document = require('jsdom').jsdom('<!doctype html><html><body></body></html>');
global.window = document.parentWindow;
global.navigator = window.navigator;

React.render(React.createElement(TestComponent), global.document.body) console.log(document.body.innerHTML);

这会将以下标记记录到控制台：

<div data-reactid=".zf2pciql8g">
  <p data-reactid=".zf2pciql8g.0">regular tag</p>
  <div data-reactid=".zf2pciql8g.1"></div>
</div>

注意<p>标签有它的内容，但是<SubComponent>标签变成了一个空的div。

为什么 div 没有“子组件”作为其内部内容？我只是在学习 React，所以我在这里做了一些明显愚蠢的事情吗？

【问题讨论】：

标签： javascript node.js reactjs jsdom

【解决方案1】：

当您执行React.createElement(SubComponent, {}, "sub component") 时，您将通过this.props.children 将"sub component" 传递给SubComponent。但是，在SubComponent 中，您没有使用this.props.children，而只是通过React.createElement("div") 呈现一个空的div。

一个简单的解决方法是将this.props.children 传递给您在SubComponent 的render 方法中创建的div：

var SubComponent = React.createClass({
  render: function() {
    return React.createElement("div", {}, this.props.children);
  }
});

有关this.props.children 的更多信息，请参阅Type of the Children props。

【讨论】：