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
Source: stackoverflow.com
Related Query
- react-redux get width of component's parent div
- React redux - parent state changing, but child components not re-rendering
- How to get parent div in handleChange with React
- How to get the data from Redux store using class components in React
- Testing React Components that get state + setState properties passed by parent
- Get parent div in React Component
- How to get props from parent in React Styled Components
- How to get the value of redux store in other components on typescript react hooks project
- How to get event from components to container in React Redux
- React redux -how to get data in each components after the api response written in Reducer
- Get consolidated data from all the child components in the form of an object inside a parent component : React JS
- Get version number from package.json in React Redux (create-react-app)
- Make view 80% width of parent in React Native
- How to get the width of a react element
- having multiple instance of same reusable redux react components on the same page/route
- Nested components testing with Enzyme inside of React & Redux
- React get state from Redux store within useEffect
- how to make material data grid width to fill the parent component in react js
- How to get parent width/height in React using Hooks?
- How to get values from child components in React
- React & Redux : connect() to multiple components & best practices
- React - Get text of div on click without refs
- How to check when the react components get rendered or rerendered
- No need for state in React components if using Redux and React-Redux?
- Decoupling React Components and Redux Connect
- React - Get the ref present in child component in the parent component
- Pass React Ref from parent to child in order to get DOM element
- React.JS - Manage content of contenteditable div as React components
- How to get width of element using React ref?
- React components lifecycle, state and redux
More Query from same tag
- How to pass props to a component for routing inside ListItem tag in material-ui?
- Component List don't update state after deleting one item
- I'm having a problem triggering this classlist toggle in React
- How to add an anchor in React props?
- Javascript search string and display value
- React-router messes up request urls
- React hook form does not work with input from reactstrap
- React Hooks, how to implement useHideOnScroll hook?
- Change text at every time interval - React
- Listening to Window Resize event in Mobx not updating Stage component's width & height in React Konva
- In React, how to add key value to one object in array of objects
- typeerror: cannot read property of undefined javascript - empty JSON object from fetch despite postman showing object from API
- Create-react-app apple touch icon not working
- Updating values with React Hooks
- https undefined in react native axios
- problems with key Javascript
- Whitespace Issue - React Router
- Reading environmental variables set in configmap of kubernetes pod from react application?
- React | why does .map work when .forEach creates a ' Maximum call stack size exceeded' error
- Containerzied React app and NGINX not serving on the localhost port I want
- TypeError: undefined is not an object (evaluating 'ctx.item.Street') (NativeScript)
- How to access different components by routes with slug only in react-router-dom?
- React state doesn't update immediately with useState
- React Redux filtered by array onChange input
- What is the best way to provide multiple templates for a component?
- Couldn't add current user after signing up without reloading (Next JS + Firebase)
- How to pass state to components rendered by Router
- Lots of inputs but only one button submit in redux-saga
- Why my render method is react called twice
- React.js: Click on answer option toggles the color of all options instead of just the clicked option