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

Я играю с React in node, используя jsdom. Когда я пытаюсь отобразить компонент, содержащий другой компонент с содержимым, он не сможет отобразить содержимое подкомпонентов. Например,React.render делает пустой подкомпонент в 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 нет «подкомпонента» в качестве внутреннего содержимого? Я просто изучаю Реакт, так что я делаю что-то явно немое здесь?

источник

2015-05-30 Eric Palakovich Carr

Когда вы 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); 
    } 
});

См Type of the Children props для получения дополнительной информации о this.props.children.

источник

2015-05-30 14:59:04

А, это имеет смысл. Отлично работает сейчас, спасибо! –

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

ответ

Смежные вопросы