React-Grid-Layout示例：在<div>标签上出现未知属性“_grid”

Question

我正在尝试实现react-grid-layout。所有的例子都通过_grid div属性传递网格项配置：

createElement(el) {
  ...
  return (
    <div key={i} _grid={el}>
      ...
    </div>
  );
},

在我的实现中：

return (
  <div key={i} _grid={el}>
    <DashboardTestWidget widgetName={el.name} menuName={this.props.menuName}/>
    <span className="remove" style={removeStyle} onClick={this.onRemoveItem.bind(this, i)}>x</span>
  </div>
)

I get an error:

dashboard_view.browserify.browserified.js:1216 Warning: Unknown prop `_grid` on <div> tag. Remove this prop from the element. For details, see <URL ommitted because SO complained about URL shorteners>
  in div (created by DashboardLayout)
  in Resizable (created by GridItem)
  in DraggableCore (created by GridItem)
  in GridItem (created by ReactGridLayout)
  in div (created by ReactGridLayout)
  in ReactGridLayout (created by ResponsiveReactGridLayout)
  in ResponsiveReactGridLayout (created by _class)
  in _class (created by DashboardLayout)
  in div (created by DashboardLayout)
  in DashboardLayout

我对React比较陌生。我做错了什么吗？

---

我使用的相关npm包版本:

"react": "^15.2.1",
"react-dom": "^15.2.1",
"react-grid-layout": "^0.12.7",

- Csaba Toth

---

https://github.com/STRML/react-grid-layout/issues/283 - Yury Tarabanko

Answer 1

这是React在今年5月左右对其代码库所做的更改。有关更多信息，请参见此拉取请求。

您之所以会收到此错误，是因为您正在尝试呈现一种HTML无法识别的属性。

在HTML5中，您需要使用data-*来定义自定义属性。

为了防止在您的情况下显示警告，您需要将渲染方法更改为以下内容。

return (
    <div key={i} data-grid={el}>
        <DashboardTestWidget widgetName={el.name} menuName={this.props.menuName}/>
        <span className="remove" style={removeStyle} onClick={this.onRemoveItem.bind(this, i)}>x</span>
    </div>
);

请注意，_grid 已更改为 data-grid，React 现在将其识别为有效的 HTML 属性。

需要注意的一点是，在 React 中，它允许您向自定义组件传递自定义属性，但当您将这些组件渲染到 HTML 时，它们需要是有效的 HTML 属性。

- Enijar

---

将“_grid”更改为“data-grid”后，错误消失了，但现在我为每个“el”设置的“h”和“w”似乎不适用于所有仪表板项目在加载时都会缩小为“1x1”。这将是正确的方向，只是框架必须接收“w”和“h”（以及其他属性）。 - Csaba Toth

在调试器中我看到 data-grid="[object Object]"。我猜我需要进行JSON序列化？ - Csaba Toth

尝试过也可以使用以下代码：var propBag = { 'data-grid': {x: ${el.x}, y: ${el.y}, w: ${el.w}, h: ${el.h}} }; 然后 <div key={i} {...propBag}>。 - Csaba Toth

看起来一个提交已经淘汰了_grid，现在使用data-grid。所以很快你的答案就会正确。https://github.com/vpezeshkian/react-grid-layout/commit/d35e24754b13f8d8223a2b37ae72162fe08c880c - Csaba Toth

新的react-grid-layout现在已经没有这个了。 - Csaba Toth