Question

中的一段代码

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

在React组件中提取网格项

2 个答案: