React.render создает пустой подкомпонент в jsdom

Я играю с React в узле, используя jsdom. Когда я пытаюсь отобразить компонент, содержащий другой компонент с содержимым, он не сможет отобразить содержимое подкомпонентов. Например,

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, так что я делаю здесь что-то явно глупое?


reactjs node.js javascript jsdom
person Eric Palakovich Carr    schedule 30.05.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Когда вы делаете React.createElement(SubComponent, {}, "sub component"), вы передаете "sub component" в SubComponent через this.props.children. Однако в SubComponent вы не используете this.props.children, а просто визуализируете пустой div через React.createElement("div").

Простым решением было бы передать this.props.children в div, который вы создаете в методе render SubComponent:

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

Дополнительные сведения о this.props.children см. в разделе Тип реквизита Children.

person Alexandre Kirszenberg    schedule 30.05.2015