score:1
so i finally figured this out.
as <fullrowimage />
renders an <img>
itself, the clientheight
is called before the <img>
is loaded and this would leads to a zero height of <img>
as well as <fullrowimage>
.
in this case, method componentdidmount()
would not be enough since a mounted component does not guarantee a loaded image.
on the other hand, onload
event will come in handy:
class fullrowimage extends react.component {
constructor(props){
super(props);
this.state = {
loaded: false,
};
this.handleloaded = this.handleloaded.bind(this);
}
handleloaded(){
console.log(document.getelementbyid('test').offsetheight);
this.setstate(
{loaded: true,}
);
}
render(){
return(
<img id='test'
onload={this.handleloaded}
src={this.props.src}
alt= {this.props.alt} />
);
}
}
and this will print the height of <img>
after it is loaded.
thanks to this article detect when images have finished loading with react
Source: stackoverflow.com
Related Query
- 'clientHeight' not counting all element - React
- React Error: Target Container is not a DOM Element
- React wrapper: React does not recognize the `staticContext` prop on a DOM element
- How to solve Warning: React does not recognize the X prop on a DOM element
- React Uncaught Error: Target container is not a DOM element
- React native flex box not using all available space
- Material-UI React does not recognize the `underlineStyle` prop on a DOM element
- React Native FlatList horizontal mode not working at all
- Using JS React component in TypeScript: JSX element type 'MyComponent' is not a constructor function for JSX elements
- Warning: React does not recognize the X prop on a DOM element
- React - Uncaught Error: Target container is not a DOM element
- React - cannot be used as a JSX component. Its return type 'void' is not a valid JSX element
- How to solve Warning: React does not recognize the `currentSlide`, ` slideCount` prop on a DOM element
- flexWrap not working for <Text> element in React Native
- React and using ReactDOM.createPortal() - Target container is not a DOM element Error
- React Typescript tests - Target container is not a DOM element
- Flow React: Cannot create element because React.Component [1] is not a React component
- React event.target is not the element I set event Listener on
- React Router: How to render element on all routes, except one?
- Jest enzyme shallow test is not rendering all elements of the React component
- React JS Events Not Firing for the Last rendered element
- react helmet not showing meta tags in view page source but shows in element on inspect
- React 13.3 unmountComponentAtNode() Error: Target container is not a DOM element
- React does not recognize the `toggleNode` prop on a DOM element
- React Native: Android is not showing all images (even though they are the same)
- React + Redux - Why not connect all the components?
- React forwardRef HoC not giving reference to container element
- react js how to import only the required function from a file and not the all functions
- <picture /> element is not working as expected in Safari browser, while using React
- React + Backbone, Target container is not a DOM element
More Query from same tag
- How to override the og:url meta tag with reactjs
- How to make loading screen in ReactJS web app like splash in React Native
- Fetching API data, nested in two arrays and displaying it with React
- Pass value to another component in ReactJs on onClickEvent not working
- Firebase - onAuthStateChanged 2 second delay. Add loading text/spinner
- Calling a django APi in React shopping Cart
- Mobx returning ObservableObjectAdministration instead of my object
- React Context API - persist data on page refresh
- How to trigger child component function
- How to create a JSDoc of ref when using React.fowardRef and useImperativeHandle?
- Import syntax React Redux
- React-Native Invalid hook call for Flat List Render Item
- React-Virtualized table to grow up to a maximal height
- How to save authenticated user in state using Redux and React?
- React: How to access and change state/atributes via another component?
- Passing value from select box as argument in React
- How to insert (inject?) an existing React app (just a UI without a backend) into a SilverStripe page layout?
- Best way to include custom react components between strings/p-tags?
- Property 'auth' does not exist on type 'FirebaseApp' on REACT
- How can I import and use data from a JSON file in my React app?
- How do I render and replace changes to a specific tag in React?
- fill inside the wave shape on svg
- ReactJS Component not updating on parent state change
- Nesting Routes in React Router v4 with Class Components
- How to integrate React js along with Laravel 8?
- Basic React/redux testing with mocha/chai
- drag and drop not work in cypress but working by user
- Open and Close a recursively nested list in React js
- Finding and updating an object, returning the whole object, recursively
- Webpack - url-loader cannot resolve jpg