m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 18:00:18 +01:00
Code

Use ref in Mascot component rather than reaching into DOM directly (#7893)

Browse Source 
Accessing the dom via `document` is strongly discouraged in React.
Instead the DOM element is now referenced by ref instead.
This commit is contained in:
Mark Stacey 2020-01-24 14:15:34 -04:00 committed by GitHub
parent 550fba2466
commit 70a689410a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui/app/components/ui/mascot.js
View File

@ -1,5 +1,5 @@
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import React, { createRef, Component } from 'react'
import metamaskLogo from 'metamask-logo'
import debounce from 'debounce'
@ -22,6 +22,8 @@ export default class Mascot extends Component {
height,
})
this.mascotContainer = createRef()
this.refollowMouse = debounce(this.logo.setFollowMouse.bind(this.logo, true), 1000)
this.unfollowMouse = this.logo.setFollowMouse.bind(this.logo, false)
}
@ -43,9 +45,7 @@ export default class Mascot extends Component {
}
componentDidMount () {
const targetDivId = 'metamask-mascot-container'
const container = document.getElementById(targetDivId)
container.appendChild(this.logo.container)
this.mascotContainer.current.appendChild(this.logo.container)
}
componentWillUnmount () {
@ -62,7 +62,7 @@ export default class Mascot extends Component {
this.handleAnimationEvents()
return (
<div
id="metamask-mascot-container"
ref={this.mascotContainer}
style={{ zIndex: 0 }}
/>
)