Using React.createRef

This commit is contained in:
Jeff Avallone 2018-05-28 12:16:44 -04:00
parent 41f10c0dc3
commit b9f6766a66

View File

@ -18,6 +18,8 @@ const syntaxes = {
class App extends React.PureComponent { class App extends React.PureComponent {
state = {} state = {}
image = React.createRef()
componentDidMount() { componentDidMount() {
window.addEventListener('hashchange', this.handleHashChange); window.addEventListener('hashchange', this.handleHashChange);
this.handleHashChange(); this.handleHashChange();
@ -116,14 +118,12 @@ class App extends React.PureComponent {
syntax, syntax,
expr expr
}, async () => { }, async () => {
await this.image.doReflow(); await this.image.current.doReflow();
this.setSvgUrl(this.image.svg.current); this.setSvgUrl(this.image.current.svg.current);
this.setPngUrl(this.image.svg.current); this.setPngUrl(this.image.current.svg.current);
}); });
} }
imageRef = image => this.image = image
render() { render() {
const { svgUrl, pngUrl, permalinkUrl, syntax, expr, image } = this.state; const { svgUrl, pngUrl, permalinkUrl, syntax, expr, image } = this.state;
const downloadUrls = [ const downloadUrls = [
@ -146,7 +146,7 @@ class App extends React.PureComponent {
<p>Sample warning message</p> <p>Sample warning message</p>
</Message> </Message>
{ image && <div className={ style.render }> { image && <div className={ style.render }>
<SVG data={ image } imageRef={ this.imageRef }/> <SVG data={ image } imageRef={ this.image }/>
</div> } </div> }
</React.Fragment>; </React.Fragment>;
} }