Tooltip: Problems getting it to work
Closed this issue · 2 comments
Hi there,
I'm still on React 0.11.x, and have been trying to get the tooltip to work by trying to backport what I see in the latest versions which seems to be using 0.12.x.
- Where are the backtick operators from? I did not find any immediate references to the backticks in the React docs.
https://github.com/Khan/react-components/blob/master/js/tooltip.jsx#L65
- What is the equiv for 0.11.x for
https://github.com/Khan/react-components/blob/master/js/tooltip.jsx#L192
arrowLeft: (arrowSize) => -arrowSize - 2
Is it also a 0.12 notation?
When I search for these things I get a lot of CoffeeScript results, but the file itself does not seem to be valid CoffeeScript...
Thanks for your effort and work on this component, guys!
The backtick strings as well as the arrow notation are both features which will be in ECMAScript 6, and are not yet supported on most browsers. The JSX transformer from Facebook will transpile them into ECMAScript 5 (if it is passed the --harmony flag), which will run in modern browsers.
The equivalent of ES6's
var hBorder = `${this.props.width}px solid transparent`;
is roughly ES5's var hBorder = this.props.width + "px solid transparent";
.
The equivalent of ES6's arrowLeft: (arrowSize) => -arrowSize - 2
is roughly ES5's arrowLeft: function(arrowSize) { return -arrowSize - 2; }.bind(this)
.
Wow, thank you for the information!