Created
December 5, 2017 01:32
-
-
Save Claire/34c06912ec51d3444872b594992784d6 to your computer and use it in GitHub Desktop.
pseudo code example of refs usage with 3rd party Popover menu
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export class AContainer extends React.Component { | |
constructor(props) { | |
super(props); | |
} | |
componentDidMount() { | |
this.setState({ | |
targetElt: ReactDOM.findDOMNode(this.refs[targetRefName]) | |
}); | |
} | |
render() { | |
return ( | |
<div> | |
{/* ... snipped more stuff here... */} | |
<div ref='targetRefName'>the target block</div> | |
{/*Menu is a 3rd party component that takes a target dom element for positioning relative to it */} | |
<Menu | |
target = {this.state.targetElt} | |
arrowPlacement = 'bottom' | |
shown = {this.state.menuShown} | |
> | |
{/* ... popover menus content here... */} | |
</Menu> | |
</div> | |
) | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment