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

IT技术 reactjs react-grid-layout
2021-04-28 02:34:16

我正在尝试实施react-grid-layout. 所有示例都通过_griddiv 属性传递网格项配置

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",
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 现在将识别为有效的 HMTL 属性。

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