修复 TypeError：matchesSelector 不是 React 组件中的函数

Question

我正在尝试使用here 中的masonry-layout 在我的组件中创建一个砌体网格。但是，我遇到了单击组件呈现的元素返回错误TypeError: matchesSelector is not a function 的问题。我将砌体功能移至组件并将其包装在 useEffect 中，这似乎解决了其他渲染问题，但现在它说它无法在点击时触发该功能。

我在想我可能需要在网格上使用useRef，但不确定这里的实现。

我可以在fiddle 中使用纯 JS 来获得我想要的大部分功能，但尝试将其转换为 React 组件。

    import React, { useEffect } from 'react';
    import Masonry from 'masonry-layout';

    const Grid = items => {
        useEffect(() => {
        const grid = document.querySelector('.grid');
        const masonry = new Masonry(grid);
        let previouslyEnlarged;
        let matchesSelector = () => {};
        grid.addEventListener('click', function(event) {
            if (!matchesSelector(event.target, '.grid-item')) {
                return;
            }

            if (previouslyEnlarged === event.target) {
                return;
            } else if (previouslyEnlarged) {
                previouslyEnlarged.classList.remove('grid-item--gigante');
            }

            previouslyEnlarged = event.target;

            event.target.classList.toggle('grid-item--gigante');
            masonry.layout();
        });
    });
    return (
        <div>
            <div class="grid">
                <div class="grid-holder">{items.map((item, i) => <div class="grid-item">{item.name}</div>)}</div>
            </div>
        </div>
    );
};

export default Grid;

Answer 1

因此，启用对每个网格项的访问并单击它的技巧是使用挂钩来设置状态并切换类：

    const [selected, setSelected] = useState(null);
    const expandItem = e => {
        const index = parseInt(e.target.getAttribute('data-index'));
        setSelected(index);
    };

                

    <div className={`grid-item ${selected === i && 'grid-item--gigante'}`}
        onClick={expandItem}
        data-index={i}>item data</div>
        

Answer 2

let matchesSelector; 未定义。如果你想让它成为一个函数，你必须初始化它。类似：

let matchesSelector = () => { ... };