CODEWITHSUNDEEP
javascripthtmlreactjs
Jefter Rocha
Jefter Rocha

Reputation: 407

React - How to handle html element passed to in props?

I have a simple component called Component it gets on the props any HTML element, and i have to handle the element passed, something like insert id, class or get dimensions(width, height).

class Component extends React.Component {
  render() {
    return (
    //Handle element before
      <div>
        { this.props.element}
      </div>
    )
 }
}
ReactDOM.render(<Component element = {<div>Its Works!</div>} />, document.querySelector('#app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Well, if it's not a bother I'd like to know how to get the computedStyle from this element (like window.getComputedStyle()) because I need to get some properties even if they are not specified.

thank you very much!

Upvotes: 0

Views: 86

Answers (1)

Maheer Ali
Maheer Ali

Reputation: 36564

You can use refs

class Component extends React.Component {
  render() {
    return (
    //Handle element before
      <div ref="child">
        { this.props.element}
      </div>
    )
 }
 componentDidMount = () => {
   const {child} = this.refs; 
   console.log(getComputedStyle(child));
 }
}
ReactDOM.render(<Component element = {<div>Its Works!</div>} />, document.querySelector('#app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Upvotes: 1

Related Questions