web-dev-qa-db-ja.com

BootstrapクラスはReactJSコンポーネントでは機能しません

ReactJSを使用してビューをレンダリングする方法を学び始めたばかりですが、bootstrap属性をReactJSコンポーネントに直接挿入すると、CSSクラスが期待どおりに機能しません。たとえば、次のようになります。コード、私はクラスでパネルを生成したいと思います：panel-defaultとpanel-heading;しかし、生成されたビューにはbootstrapスタイルがありません。なぜ、どのように修正するのか疑問に思いました可能であれば、ReactJSコードをコンパイルし、コンパイルしたJSをHTMLコードに含めたことに注意してください（下部を参照）。

var taxonGroups = {
  identifier: 'ABC-x981',
  sources: [
    {segmentName: 'segment1', length: 1090},
    {segmentName: 'segment2', length: 98},
    {segmentName: 'segment3', length: 2091},
    {segmentName: 'segment4', length: 1076},
  ],

  fields: ['Taxon Name', 'Taxon ID', 'Taxon source'],

  collectionDate: '2001-09-10'
};

var Taxon = React.createClass({
  render: function() {
    return (
      <div class="panel panel-default"> <div class="panel-heading"><p>{this.props.data.identifier}</p></div>
        <table class="table table-bordered table-striped table-hover">
              {
                this.props.data.sources.map(function(source) {
                  return <Segment name={source.segmentName} length={source.length}/>
                })
                }
          </table>

      </div>
    );
  }
});


var Segment = React.createClass({
  render: function() {
    return <tr><td>{this.props.name}</td><td>{this.props.length}</td></tr>
  }

  });

React.render(<Taxon data={taxonGroups} />, document.getElementById('container'));

HTMLコード：

<html>
<head lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
  <script src="bower_components/jquery/dist/jquery.min.js"></script>
  <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="bower_components/react/react.js"></script>
  <script src="bower_components/react/JSXTransformer.js"></script>
  <title>reactJS 3 - Rendering data with bootstrap styles</title>
</head>
<body>
<span>Is there anything?</span>

<div id="container">

</div>

<div class="panel panel-default">
  <div class="panel-heading">This is Panel Heading!</div>
  <div class="panel-body">
    This is panel body
  </div>
</div>


<script src="scripts/ReactJS/build/taxon.js"></script>
</body>
</html>
javascripttwitter-bootstrapreactjs
25
TonyGW

Reactでは、属性はclassNameではなくclassです。したがって、たとえば、

<div class="panel panel-default">

代わりに

<div className="panel panel-default">

classと設定すると、Reactはその属性を無視します。その結果、生成されたHTMLにはCSSが必要とするクラスが含まれません。

compiler を使用して期待されるHTMLを実行すると、実際にそれが得られます。enter image description here

67
FeifanZ

Reactチュートリアルに従うと、私は同様の問題を抱えていました、私は書いていました

<div classname="my bootstrap code here">

の代わりに

<div className="my bootstrap code here">

jsxの場合、classNameはキャメルケースにする必要があります。お役に立てれば ：）。

0
Bukunmi