1

これは、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要素は存在しますが、クラス名の変換は行われません。

何か不足していますか？

4

2 に答える 2

2

問題は、カスタム コンポーネントで 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 を実行して、可能かどうかを尋ねる必要があるかもしれません。

于 2015-02-10T19:32:19.493 に答える