相关疑难解决方法(0)

我正在使用react-grid-layout来制作drag-drop and resize components，所以我能够实现文档中提到的功能。

我的问题

• 我正在创建动态 UI，所以我正在用数据渲染我的 UI。
• 在这个库中，我需要创建布局，例如 { {i: 'a', x: 0, y: 0, w: 1, h: 2}
• 当我创建静态 UI 时，我能够实现我想要的。这是工作代码沙箱

在具有预定义布局的静态 Ui 中，我喜欢下面的内容。

    const layout = [
    { i: "a", x: 0, y: 0, w: 2, h: 1 },
    { i: "b", x: 2, y: 0, w: 2, h: 1 },
    { i: "c", x: 4, y: 0, w: 2, h: 1 },
    { i: "d", x: 6, y: 0, w: 2, …

如果您知道密钥,则在React中设置属性很简单,例如

data-500={this.props.YDistance}

但是如何动态设置密钥的一部分.例如

data-{this.props.YDistance}="valueHere"

var Test = React.createClass({

    render: function() {
        return (
            <div data-{this.props.YDistance}="valueHere">
                {this.props.children}
            </div>
        );
    }

});

ReactDOM.render(
    <Test YDistance="500">Hello World!</Test>,
    document.getElementById('container')
);

有些库需要这种属性设置(例如skrollr等)

我正在努力实施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 …