reactjs - Can I mount a React component automatically (like angularjs' direct)? -
update 3
i have been using angularjs several years, , want try reactjs. angularjs can define directive , put node inside html dom, this:
<!doctype html> <html> <head> .... </head> <body> <!--helloworld directive--> <hello-world></hello-world> </body> </html> however, in react, knowledge, 1 needs call
react.render( <helloworld />, targetelement); to mount component. there way in react mount component automatically?
i have created codepen here show idea experiment. main piece of code below:
function r() { var classname = 'hello'; if (window[classname]) { var elements = document.getelementsbytagname(classname); angular.foreach(elements, function (element) { react.render(react.createelement(window[classname]), element); }); } settimeout(r, 50); } every 50ms, check if class has been created. if render under element in real dom node <hello> </hello>.
*warning: code works in trivial cases.
the jsx code create react class:
<script type="text/jsx"> var hello = react.createclass({ render: function() { return <h1>hello</h1>; } }); // react.render called here, below: react.render( <hello> </hello>, document.getelementbyid('example') ); // want <hello> </hello> stays in html dom. don't // repeat calling react.render. first piece of code, find // node , render reactclass there. </script> in html:
<hello> </hello> i don't want use settimeout, don't know if there other approaches.
i don't understand you're trying use eventemitter bind listener when class created.
var eventemitter = require('events').eventemitter; var assign = require('object-assign'); var myclassfactory= assign({}, eventemitter.prototype, { addlistener: function(myclassname,callback) { this.on(myclass,callback); }, createclass: function(myclassname) { //create class ===>>>>>> react.createclass !! this.emit(myclassname); } }); then add listener in view:
myclassfactory.addlistener(myclassname, render(myclassname)); var render = function(myclassname) { react.render(myclassname, myelement); }