Question

我是ReactJS的新手，我正忙着用它来响应一个项目。

我必须将Isotope用于图片库，但是显然，React不允许其他库与DOM交互。

所以我一直在寻找如何将同位素与React集成在一起，但是在互联网上找不到任何东西。

这是我的实际代码

var $isotope = $('.gallery').isotope({});
$('.controls').on('click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $isotope.isotope({
    filter: filterValue
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">
  <div class="row">
    <div class="col">
      <div class="controls text-center">
        <button type="button" class="btn btn-success control btn-sm" data-filter=".a">A</button>
        <button type="button" class="btn btn-primary control btn-sm" data-filter=".b">B</button>
        <button type="button" class="btn btn-warning control btn-sm" data-filter=".c">C</button>
        <button type="button" class="btn btn-danger control btn-sm" data-filter="*">All</button>
      </div>
    </div>
    <hr>
  </div>
  <div class="gallery row">
    <div class=" mix a" style="background-color: green; height:20px; width: 70px"></div>
    <div class=" mix c" style="background-color: orange; height:20px; width: 70px"></div>
    <div class=" mix a" style="background-color: green; height:20px; width: 70px"></div>
    <div class=" mix c" style="background-color: orange; height:20px; width: 70px"></div>
    <div class=" mix b" style="background-color: skyblue; height:20px; width: 70px"></div>
  </div>
</div>

有人可以提供此代码的ReactJS版本吗？

将同位素JS与React JS结合使用

0 个答案: