m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +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 PropTypes from 'prop-types'
import React, { Component } from 'react' import React, { createRef, Component } from 'react'
import metamaskLogo from 'metamask-logo' import metamaskLogo from 'metamask-logo'
import debounce from 'debounce' import debounce from 'debounce'
@ -22,6 +22,8 @@ export default class Mascot extends Component {
height, height,
}) })
this.mascotContainer = createRef()
this.refollowMouse = debounce(this.logo.setFollowMouse.bind(this.logo, true), 1000) this.refollowMouse = debounce(this.logo.setFollowMouse.bind(this.logo, true), 1000)
this.unfollowMouse = this.logo.setFollowMouse.bind(this.logo, false) this.unfollowMouse = this.logo.setFollowMouse.bind(this.logo, false)
} }
@ -43,9 +45,7 @@ export default class Mascot extends Component {
} }
componentDidMount () { componentDidMount () {
const targetDivId = 'metamask-mascot-container' this.mascotContainer.current.appendChild(this.logo.container)
const container = document.getElementById(targetDivId)
container.appendChild(this.logo.container)
} }
componentWillUnmount () { componentWillUnmount () {
@ -62,7 +62,7 @@ export default class Mascot extends Component {
this.handleAnimationEvents() this.handleAnimationEvents()
return ( return (
<div <div
id="metamask-mascot-container" ref={this.mascotContainer}
style={{ zIndex: 0 }} style={{ zIndex: 0 }}
/> />
) )