Question

我已经构建了一个具有良好视差功能的单页应用，并希望为页面内的滚动设置动画，以便通过页内链接进行移动。我已经做出了反应工作，但无法使jQuery的.attr（）工作，或者以其他方式区分链接。我也试图弄清楚如何使用React将页面滚动到特定点。任何指针都将非常感激。

    var Header = React.createClass({
       onClick: function(e){
        e.preventDefault();
         console.log('Location' + e.target.value);
           $div = $(this.getDOMNode());
          console.log($div);
          var value = $(this).attr('ref');
          console.log(value);
       },
      render: function() {
        return(
          <div className="header nav-header">
            <nav className="navbar navbar-inverse navbar-fixed-top">
              <div className="container-fluid">
                <div className="navbar-header">
                  <button type="button" className="navbar-toggle collapsed" data-    toggle="collapse"  aria-expanded="false" href='#links'>
                     <span className="sr-only">Toggle navigation</span>   
                     <span className="icon-bar"></span>
                     <span className="icon-bar"></span>
                     <span className="icon-bar"></span>
                  </button>
                  <a className="navbar-brand" href="#contents">
                  <img alt="TH" src='img/headshot.jpg' className='headshot img-circle' />
                </a>
                </div>
                <div className="collapse navbar-collapse" id="links">
                  <ul className="nav navbar-nav">
                     <li><a href="#" data-url='hello' onClick={this.onClick}     value='hello' ref='target'>About</a></li>
                    <li><a href="#"  onClick={this.onClick} >Projects</a></li>
                 </ul>
               <ul className="nav navbar-nav navbar-right">
                <li><a href="mailto:#?Subject=from    ">Email Me</a></li>
                <li><a target='_blank' href="#">GitHub</a></li>
                <li><a target='_blank' href="https://www.linkedin.com/in/#">LinkedIn</a></li>
              </ul>
            </div>
          </div>
        </nav>
      </div>
    );
  }
});

Answer 1

ref是非DOM属性，如on*和大多数用户定义的属性。它没有呈现为HTML，因此不能被像jQuery这样的DOM库访问（您可以尝试在DevTools中检查DOM以查看它不存在）。

您可以执行所需操作的一种方法是将更多参数绑定到事件处理程序，例如：

var Header = React.createClass({
  onClick: function(target, e){
    console.log(target, e);
  },
  render: function() {
    return(
      <li><a href="#" data-url='hello' onClick={this.onClick.bind(null, 'target')} value='hello'>About</a></li>
    )
  }
});

无法使用jQuery .attr（）来使用ReactJS

1 个答案: