javascript - ReactJs同位素

Question

尝试开发一个reactjs同位素组件。我已经创建了核心组件并一直在关注砖石链接 http://developers.redhat.com/blog/2016/01/07/react-js-with-isotope-and-flux/

我收到错误“未知 DOM 属性类。您是指 className 吗？”

//最新jsfiddle https://jsfiddle.net/7xzd92s5/54/

var Grid = React.createClass({
  getInitialState: function(){

  var $container = $('#Isotope2'),
      $checkboxes = $('#filters input');

  $container.isotope({
    itemSelector: '.item'
  });
  // get Isotope instance
  var isotope = $container.data('isotope');
  // add even classes to every other visible item, in current order
  function addEvenClasses() {
    isotope.$filteredAtoms.each( function( i, elem ) {
      $(elem)[ ( i % 2 ? 'addClass' : 'removeClass' ) ]('even')
    });
  }

  $checkboxes.change(function(){
    var filters = [];
    // get checked checkboxes values
    $checkboxes.filter(':checked').each(function(){
      filters.push( this.value );
    });
    // ['.red', '.blue'] -> '.red, .blue'
    filters = filters.join(', ');
    $container.isotope({ filter: filters });
    addEvenClasses();
  });

  $('#shuffle').click(function(){
    $container.isotope('shuffle');
    addEvenClasses();
  });

  return null;

  },
  render: function() {
    return ( < div className = "grid" >
  <div class="item red"></div>
  <div class="item blue"></div>
  <div class="item green"></div>
  <div class="item yellow"></div>
  <div class="item red"></div>
  <div class="item blue"></div>
  <div class="item green"></div>
  <div class="item yellow"></div>
  <div class="item red"></div>
  <div class="item blue"></div>
  <div class="item green"></div>
  <div class="item yellow"></div>
  <div class="item red"></div>
  <div class="item blue"></div>
  <div class="item green"></div>
  <div class="item yellow"></div>
  <div class="item red"></div>
  <div class="item blue"></div>
  <div class="item green"></div>
  <div class="item yellow"></div>
      < /div>
    );
  }

});

ReactDOM.render( < Grid name = "Isotope2" / > , document.getElementById('Isotope2'));

Answer 1

JSX 与 HTML 不完全相同。有一些key differences .

在这种情况下，错误消息会告诉您出了什么问题。您需要将 JS 保留关键字 class 替换为 className:

render: function() {
  return ( 
    <div className="grid">
      <div className="item red"></div>
      <div className="item blue"></div>
      ...etc
    </div>
  );
}