var React = require('react');This component renders the current code.
Include React.
var React = require('react');Create the component.
var Output = React.createClass({
renderHTML: function(code) {
var iframe = window.frames[0];
var doc = iframe.document;
doc.body.innerHTML = code;
},
renderCSS: function(code) {
var iframe = window.frames[0];
var doc = iframe.document;
doc.head.querySelector('style.custom').textContent = code;
},
renderJavaScript: function(code) {
var iframe = window.frames[0];
iframe.livecoding.callCode(code);
},Render the component. We use an iframe to prevent the user’s JS/CSS from interfering with the application.
render: function() {
return (
<div className='output'>
<iframe src='iframe.html' />
</div>
);
},
Tell React not to manage this component’s DOM.
shouldComponentUpdate: function(nextProps) {Get the iframe.
var iframe = window.frames[0];
var doc = iframe.document;If renderAllCode is true, then render all codes.
if (nextProps.renderAllCode) {
this.renderHTML(nextProps.html);
this.renderJavaScript(nextProps.javascript);
this.renderCSS(nextProps.css);
} else {If the current mode is html,
if (this.props.html !== nextProps.html) {render html
this.renderHTML(nextProps.html);and javascript.
this.renderJavaScript(nextProps.javascript);
}If the current mode is css,
if (this.props.css !== nextProps.css) {render css.
this.renderCSS(nextProps.css);
}If the current mode is javascript,
if (this.props.javascript !== nextProps.javascript) {render html
this.renderHTML(nextProps.html);and javascript.
this.renderJavaScript(nextProps.javascript);
}
}
return false;
}
});
module.exports = Output;