Khan/react-components

Tooltip: Problems getting it to work

Closed this issue · 2 comments

theogravity commented

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.

  1. 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

  1. 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!

zgotsch commented

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).

theogravity commented

Wow, thank you for the information!