React $ {}字符串替换器不起作用

时间:2018-01-31 06:20:04

标签: javascript html reactjs

我正在使用教科书学习React,并且此特定示例中的字符串替换器$ {}不起作用,无法弄清楚原因。我已经仔细检查了任何拼写错误以确保。本书中的其他例子到目前为止一直运作良好。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      class Hello extends React.Component {
        constructor (props) {
          super(props)
          this.clickHandler = this.clickHandler.bind(this) //isolates 'this' of Hello class from other 'this'
        }
        clickHandler (e) {
          const name = this.props.name
          window.alert('Hello, ${name}') //!!this doesn't work....
        }
        render () {
          return (
            <div onClick={this.clickHandler}>Say Hello</div>
          )
        }
      }
      ReactDOM.render((<Hello name="Johnny" />),document.getElementById("root"))
    </script>
  </body>
</html>

1 个答案:

答案 0 :(得分:1)

使用反击

window.alert(`Hello, ${name}`)