javascript - 在 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元素存在但没有发生类名转换。

我错过了什么吗？

Answer 1

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

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