Question

我希望在React组件(see Codepen)中重新创建此弹性导航。现在它是用jQuery编写的-我在React中获取 position 和 width 时遇到了麻烦。使用React refs是访问该信息的好方法吗？

任何想法或见识都将得到高度赞赏。我一直在尝试找出如何整周重新创建。

在React中，点击处理程序非常简单。我刚刚创建了一个函数，然后使用了onClick。并且设置活动类也不是太难。我最终使用了道具。

但是代码的这两部分是我遇到的问题，并且不确定如何在React中重新创建：

var activeItem = tabs.find('.active');
var activeWidth = activeItem.innerWidth();
$(".selector").css({
  "left": activeItem.position.left + "px", 
  "width": activeWidth + "px"
});

var activeWidth = $(this).innerWidth();
var itemPos = $(this).position();
$(".selector").css({
  "left":itemPos.left + "px", 
  "width": activeWidth + "px"
});

这是完整的JavaScript / jQuery：

var tabs = $('.tabs');
var selector = $('.tabs').find('a').length;
var activeItem = tabs.find('.active');
var activeWidth = activeItem.innerWidth();
$(".selector").css({
  "left": activeItem.position.left + "px", 
  "width": activeWidth + "px"
});

$(".tabs").on("click","a",function(e){
  e.preventDefault();
  $('.tabs a').removeClass("active");
  $(this).addClass('active');
  var activeWidth = $(this).innerWidth();
  var itemPos = $(this).position();
  $(".selector").css({
    "left":itemPos.left + "px", 
    "width": activeWidth + "px"
  });
});

这是完整的HTML：

<div class="wrapper">
  <nav class="tabs">
    <div class="selector"></div>
    <a href="#" class="active"></i>Popular</a>
    <a href="#">Upcoming</a>
    <a href="#"></i>My Movies</a>
    <a href="#"></i>Search</a>
  </nav>
</div>

这是the link to the project与CSS（如果您想在实际中看到它的话）。

如果可能的话，我希望将其分隔为一个组件。但是，如果它需要一些子组件，也可以。

谢谢！

Answer 1

您绝对可以做出反应，并且您处于正确的轨道。

您可以使用以下语法在React中创建对元素的引用：

<input ref={input => this.myInput = input} />

绑定到您的tab链接的处理程序可以访问哪个。例如：

handleTabClick = (e, index) => {
    e.preventDefault()

    position = {left: this.myInput.offsetLeft, top: this.myInput.offsetTop}  // Make sure this is the correct JS!
    width = this.myInput.offsetWidth  // Make sure this is the correct JS!
}

render () {
    return (
        ...
        <a href="#" class="tab" onClick={e => handleClick(e, 1)}>Tab 1</a>
        ...
    )
}

我不确定100％的元素属性是否正确（宽度，位置），但是您可以对Google Stackoverflow进行快速的Google /搜索，以找到在JS而不是jQuery中正确的方法。您还可以将该网站用于本机JS方法，这些方法与jQuery的功能相同：http://youmightnotneedjquery.com/

这是使用React引用的好时机吗？

1 个答案: