reactjs - Can a component know its own DOM tree context? -

reactjs - Can a component know its own DOM tree context? -

i attempting write <heading /> component abstract away of headaches of dealing headings (h1, h2, etc) in conjunction accessibility standards.

the goal beingness component able dynamically take h(1,2,3) depending on closest parent heading. however, looking dom tree remind me more of jquery react. i've looked through docs , haven't seen it, i'm not sure if possible.

so question is: possible component know rendered in dom tree , execute logic info? (probably somewhere in componentwillmount).

you upward in dom in componentdidmount , componentdidupdate, that's messy , uncontrolable. there may improve solution first thing comes mind.

class="lang-js prettyprint-override">var headerfactories = ['h1', 'h2', 'h3', 'h4'].map(function(tag){ homecoming react.createfactory(tag) }); var makeheader = function(level){ var create = function(){ var mill = headerfactories[make.level] || headerfactories[headerfactories.length - 1]; homecoming factory.apply(this, arguments); }; make.sub = function(){ homecoming makeheader(make.level + 1); }; make.level = level; homecoming make; }

the api may seem bit strange, let's have page component , article kid may have article child.

class="lang-js prettyprint-override">var page = react.createclass({ render: function(){ // create root level header var header = makeheader(); homecoming <div> {header(null, "my page")} <article headerfactory={header.sub()} data={foo} subarticle={bar} /> </div> } }); var article = react.createclass({ render: function(){ var subarticle = false; if (this.props.subarticle) { subarticle = <article headerfactory={this.props.headerfactory.sub()} /> } homecoming <div> {this.props.headerfactory(null, this.props.data.title)} </div> } });

what happens when headerfactory(null, "foo") component of header level. when phone call .sub() version of headerfactory next header level.

class="lang-js prettyprint-override">var h1 = makeheader(); var h2 = h1.sub(); var h3 = h2.sub(); var h4 = h3.sub();

this allows components have header levels based on parents without breaking out of react.

reactjs