在 React 组件中提取网格项

Question

这是 react-grid-layout 文档中的一段代码

  var ReactGridLayout = require('react-grid-layout');
  //...

  render: function() {
  var layout = getOrGenerateLayout(); 
  return (
    <ReactGridLayout className="layout" layout={layout} 
      cols={12} rowHeight={30}>
      <div key={1}>1</div>
    </ReactGridLayout>
  )
}

有了这个，我想提取 React 组件中的 div 元素。所以我添加了这段代码：

var SimpleDiv = React.createClass({
    render() {
        return (<div>1</div>);
    }
});

因此第一部分变为：

  var ReactGridLayout = require('react-grid-layout');
  //...

  render: function() {
  var layout = getOrGenerateLayout(); 
  return (
    <ReactGridLayout className="layout" layout={layout} 
      cols={12} rowHeight={30}>
      <SimpleDiv key={1}>1</SimpleDiv>
    </ReactGridLayout>
  )
}

问题是它不起作用，div 元素存在，但没有发生 class 名称转换。

我是不是漏掉了什么？

Answer 1

问题是您在自定义组件中包装了 div 元素，因此当 ReactGridLayout 组件尝试为其子组件设置属性时，它将在 [=13] 上设置它们=] 组件。您可以通过传递以下道具来使其工作：

var SimpleDiv = React.createClass({
    render() {
        return (<div {...this.props}>1</div>);
    }
});

或明确地：

var SimpleDiv = React.createClass({
    render() {
        return (<div style={this.props.style} className={this.props.className}>1</div>);
    }
});

但我对 ReactGridLayout 不太熟悉，所以如果这不起作用，您可能需要 ping 他们并询问是否可行。

Answer 2

如果您不介意额外的 'div' 元素，您可以使用：

render: function() {
   var layout = getOrGenerateLayout(); 
   return (
      <ReactGridLayout className="layout" layout={layout} 
         cols={12} rowHeight={30}>
         <div key={1}><SimpleDiv>1</SimpleDiv></div>
     </ReactGridLayout>
  )
}

在 React 组件中提取网格项

Extract grid item in a React component

javascript

reactjs

datagrid

react-grid-layout