如何打印/记录reactjs渲染的dom？

Question

I'm creating a component with ReactJS.

I would see the html react renders with my console, so for example:

 import React, { PropTypes } from 'react';
 import ReactDOM from 'react-dom';

 class CustomComponent extends React.Component {


   render() { return (<div>Custom</div>); }
 }

And instead of:

ReactDOM.render(<CustomComponent />, document.getElementById('app'));

I would do something like:

console.log(<CustomComponent />); 

but when in my console I call:

babel-node myfile.js

I get:

How can I print/log the effective html tags that react renders?

thanks. bye.

Answer 1

Use https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rendertostring

Now you're just printing the virtual dom representation which need to be transformed to string.

Answer 2

you need to use string renderToStaticMarkup(ReactElement element)

it will return you the StaticMarkup