Question

我在我的应用程序中使用反应引导程序。我想知道创建网格的最佳做法是什么。 react-bootstrap文档要求

$(".social-msl-link-label").draggable({
  connectToSortable: ".social-msl-group-list",
  revert: "invalid",
  helper: "clone"
});

var orderMSLids = [];
var droppableOptions = {
  accept: ".social-msl-link-label",
  tolerance: 'pointer',
  greedy: true,
  hoverClass: 'highlight',
  drop: function(ev, ui) {
    orderMSLids = [];
    $(ui.draggable).clone(true).detach().css({
      position: 'relative',
      top: 'auto',
      left: 'auto'
    }).appendTo(this);

    orderMSLids.push($(this).find('.social-msl-link-label').attr('id'));

    $(this).siblings().filter(function() {
      return $(this).text().trim() === $(ui.draggable).text().trim();
    }).empty();

    str = [];
    $(".social-msl-links-order li").each(function(index) {
      var res = $(this).children().attr('id');
      if (res) {
        str.push(res);
      }
    });

    var string = str.join(",");
    $('#msl-order').val(string);


  }
};

$(".social-msl-links-order li.social-msl-drop").droppable(droppableOptions);

$('.social-msl-add').click(function() {
  var $droppable = $('<li class="social-msl-drop"></li>').droppable(droppableOptions);
  $droppable.insertBefore('.social-msl-add');
});

$('#msl-order').prop('value').split(',').forEach(function(id) {
  var $droppable = $('.social-msl-drop.ui-droppable:empty').first();
  if (id) {
    $('.draggable #' + id).clone(true).appendTo($droppable);
  }
});

但这意味着我需要在每个组件中导入Grid和Row。

我一直在写

<Col xs={12} md={8} />

这是错误的方法吗？

Answer 1

使用<div className ="col-md-12">违反封装，它将网格列的内部实现暴露给外部。它可能会导致维护问题。例如，如果在下一个Bootstrap版本网格中以某种方式更改，您应该找到所有<div className ="col-md-12">并手动替换它们，如果<Col xs={12} md={8} />，您应该做的就是更新库。

Answer 2

要在js文件中要求库，这里是示例getting started

例如，如果您使用commonjs：

var Col = require('react-bootstrap').Col;

React Bootstrap最佳实践

2 个答案: