3

を実装しようとしています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",
4

1 に答える 1

5

これは、React が今年 5 月頃にコード ベースに加えた変更です。詳細については、このプル リクエストを参照してください。

このエラーが発生する理由は、HTML で認識されない属性をレンダリングしようとしているためです。

HTML5 では、 を使用してカスタム属性を定義する必要がありますdata-*。

あなたのケースで警告が表示されないようにするには、render メソッドをこれに変更する必要があります。

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

反応が有効な HMTL 属性として認識するよう_gridに変更されたことに注意してください。data-grid

React で注意すべきことの 1 つは、カスタム props をカスタム コンポーネントに渡すことができるということですが、これらのコンポーネントを HTML にレンダリングするときは、有効な HTML 属性である必要があります。

于 2016-07-14T07:57:45.413 に答える