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>
)

我得到一个错误：

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",

Answer 1

这是 React 在今年 5 月左右对其代码库进行的更改。有关详细信息，请参阅 this pull request。

您收到此错误的原因是因为您正在尝试呈现 none 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 现在会将其识别为有效的 HMTL 属性。

React 需要注意的一件事是它允许您将自定义道具传递给自定义组件，但是当您将这些组件呈现给 HTML 时，它们需要是有效的 HTML 属性。

react-grid-layout 示例 <div> 标签上的未知道具 `_grid`

react-grid-layout example Unknown prop `_grid` on <div> tag

reactjs

react-grid-layout