javascript - componentDidMount，React 中出现意外的关键字 'const'

我试图通过获取 DOM 元素并使用 componentDidMount 将函数传递给它来制作粘性 header ，但得到一个错误，即“const”是一个意外的关键字:

成分:

class Header extends Component {

  componentDidMount(){
    window.addEventListener('scroll', () => {
      const isTop = window.scrollY > 100,
      const nav = document.getElementById('nav');
      if (isTop) {
        nav.classList.add('scrolled');
      }else {
        nav.classList.add('scrolled');
      }
    });
  }

  componentWillUnmount() {
    window.removeEventListener('scroll');
  }


  render() {
    return (<>
      <header>
        <nav class="nav" id="nav">
          <ul class="header-list">
            <li>
              <img alt='phone' src={phonelogo} />
            </li>
            <li>123456789</li>
          </ul>
          <ul class="header-list">
            <li>
              <img alt='email' src={email} />
            </li>
            <li>[email protected]</li>
          </ul>
        </nav>
      </header>
    </>)
  };
};


export default Header;

错误:

Line 17:7:  Parsing error: Unexpected keyword 'const'

  15 |     window.addEventListener('scroll', () => {
  16 |       const isTop = window.scrollY > 100,
> 17 |       const nav = document.getElementById('nav');
     |       ^
  18 |       if (isTop) {
  19 |         nav.classList.add('scrolled');
  20 |       }else {

虽然，使用 React refs 可能更好，但这里发生的事情仍然很有趣。

最佳答案

你写:

 const isTop = window.scrollY > 100,
 const nav = document.getElementById('nav');

您需要将第 16 行末尾的逗号替换为逗号。像这样:

 const isTop = window.scrollY > 100;
 const nav = document.getElementById('nav');

关于javascript - componentDidMount，React 中出现意外的关键字 'const'，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/62002995/