小编Gus*_*itė的帖子

我试图通过获取 DOM 元素并使用 componentDidMount 将函数传递给它来制作粘性标头，但得到一个错误，即“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>123@gmail.com</li>
          </ul>
        </nav>
      </header>
    </>)
  };
};


export default Header;

错误：

Line 17:7:  Parsing …

我想通过动态导入将文件夹中的所有图片导入到组件中，如下所示：

索引.js

const testFolder = './2020/';
const fs = require('fs');
const path = require('path');
const files = fs.readdirSync(testFolder);
const allowedExts = ['.png', '.jpg', 'svg'] // add any extensions you need
const modules = {};

if (files.length) {
  let filterThruFiles = files.filter(file => allowedExts.indexOf(path.extname(file)) > -1)
  filterThruFiles.forEach(file => modules[file] = `./${file}`);
}

module.exports = modules;
let modulesStringify = JSON.stringify(modules);
fs.writeFileSync('pics-url-list.json', modulesStringify);

我得到一个带有路径的对象并将其写入文件，效果很好：

//pics-url-list.json
{
  "1-1.jpg":"./1-1.jpg",
  "1-2.jpg":"./1-2.jpg",
  "1-3.jpg":"./1-3.jpg"
//and so on
  }

但是当我运行 npm start 时，出现此错误。主要问题是如何在 React 组件中访问这个 .json 文件？现在 App.js 中没有 …