score:0

what should work is something like this mycomp could look like this

render() {
  return <div ref="node"></div>
}

with this.refs.node you get the current dom element and with

this.res.node.parentnode

you should get the parentnode

score:1

you need to use react refs.

on your mycomp class:

class mycomp extends react.component {

  //all your proptypes and functions...

  //new function
  newfunction () {
    console.log(this.refs.refname);
    //this will give you the data component. there you can call methods to calculate width, or whatever you need to do with that component
  }

  //your render function
  render() {
    return <div ...whatever you have... ref="refname">
  }
}

you can check react documentation

score:13

check this working demo: jsfiddle:

var parent = react.createclass({
  render: function() {
    return <div id="parent">hello parent<child></child></div>;
  }
});

var child = react.createclass({
  componentdidmount: function() {
    alert('parent width: ' + this.refs.child.parentnode.clientwidth);
  },
  render: function() {
    return <div ref="child">hello child</div>;
  }
});

stating ref="child" will make the element accessable by the component itself, through this.refs.child. it is the vallina node instance. using this.refs.child.parentnode.clientwidth will return the parent's width. or, use this.refs.child.parentnode.getboundingclientrect().

reference: react refs


Related Query

More Query from same tag