Question

我正在使用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，所以我在做一些明显愚蠢的事情吗？

Answer 1

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

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

SubComponent

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

的详情，请参阅Type of the Children props

React.render在jsdom中生成空子组件

1 个答案: