CODEWITHSUNDEEP
reactjshigher-order-components
CyberJunkie
CyberJunkie

Reputation: 22684

React compose prevent div wrap

I have a simple component in React:

const applyFallbackStyles = withFallbackStyles( ( node, ownProps ) => {
  const { imageWidth } = ownProps;
  const divNode = node.querySelector( '.text' );
  return {
    fallbackImageWidth: getComputedStyle( divNode ).width,
  };
} );


class Image extends Component {
    constructor( props ) {
        super( ...arguments )
    }

    render() {
       <div className="test">Hello world</div>
    }
 }

and using compose to wrap a function

export default compose( [
    applyFallbackStyles,
] )( Image );

The component renders:

<div>
   <div className="test">Hello world</div>
</div>

Why were there extra divs added? compose seems to by wrapping <div className="test">Hello world</div> in another <div>

Is it possible to avoid that? Or at least specify a class name for it.

Upvotes: 1

Views: 250

Answers (1)

duc mai
duc mai

Reputation: 1422

as I understand from the source code of that lib, you will need to specify a node reference as props to your component otherwise it will add div by default. To avoid that maybe you can do like this

1)wrap your component by a div and get ref from that elemen

2)set that element as node props for the image element

class App extends React.Component{
  node = null;
  render() {
    <div ref={el => this.node = el} className="test">
      <Image node={this.node} />
    </div>
  }
}

Upvotes: 2

Related Questions