Question

我很擅长做出反应，但我喜欢在一个相当简单的砌体网格布局上工作，并为新网站进行过滤。

为了实现砌体布局，我正在使用Dan Trains stone-cutter component，它看起来很棒，非常适合我的需要。

该组件的工作方式与广告有关。我目前有一个功能响应的砌体网格与自定义子组件（易于实现，看起来很棒！）。问题是当我尝试添加或删除数据中的项目时，这些项目正在为数据提供网格。应用程序重新渲染而不是进入和退出动画，而是直接添加或删除元素。

此外，如果我在此组件中设置状态，则说从Tile组件中的按钮会导致重新渲染。

如果我删除了石头切割器并用一个ul标签或甚至cssTransitionGroups标签替换它，问题就会消失。

我的应用程序结构如此（网格组件是切石头的）：

<ProdGridApp>
<Filter/>
<Grid>
    <Tile>
        <Status/>
        <FavouriteButton/>
        <AudioPlyer/>
    </Tile>
</Grid>
</ProdGridApp>

设置状态（过滤或偏好）时，我从子组件到达并在“ProdGridApp”组件中设置它。当我用石头切割器执行此操作时，它会触发应用程序重新渲染。去除石材切割器允许每个组件仅在必要时重新渲染。

主应用程序（ProdGridApp）的代码如下所示：

render() {
    const Grid = makeResponsive(measureItems(SpringGrid), {
        maxWidth: 1346,
    });

    const { enter, entered, exit } = enterExitStyle.foldUp;

    return (
        <div className="App">
        <Filter filterResults={this.filterResults}
                favourites={this.state.favourites}
                kits={this.state.kits}/>
            <Grid
                component="ul"
                className="prod-list"
                columnWidth={236}
                gutterWidth={40}
                gutterHeight={35}
                layout={layout.pinterest}
                enter={enter}
                entered={entered}
                exit={exit}
                easing="ease-out">
                {Object.keys(this.state.filterResults).map((keys) => {
                    return  <li key={keys}>
                                <Tile key={keys}
                                      index={keys}
                                      addFavourite={this.addFavourite}
                                      kits={this.state.kits}
                                      favourites={this.state.favourites}
                                      playStop={this.playStop}
                                      />
                            </li>
                    })}
            </Grid>
        </div>
    );
}

它值得附加的是浏览器中应用程序的屏幕截图。 Screenshot of masonry grid app

非常感谢任何帮助！

Answer 1

答案是移动

const Grid = makeResponsive(measureItems(SpringGrid), {
    maxWidth: 1346,
});

将渲染方法放到更高的范围内。 Dan Train在stone cutter github page上回答了这个问题。

React stone-cutter组件进入和退出动画

1 个答案: