reactjs - 如何在 react-grid-layout 中呈现自定义占位符

Question

有什么方法可以在 react-grid-layout 中呈现自定义占位符（红色项目）？

例如，我想<img src...>在这个红色占位符中渲染一些。

我在官方文档（ https://github.com/react-grid-layout/react-grid-layout）中没有找到任何有关此的信息。

有小费吗？

Answer 1

您可以使用 css 类.react-grid-placeholder覆盖占位符。这是您导入的 CSS 样式的一部分。所以你在哪里导入样式：

import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';

import './yourstyles.css';

在 yourstyles.css 中，您可以使用图像作为背景，如下所示：

.react-grid-item.react-grid-placeholder {
    background-color: background-image: url("imageURL")
  }