react里的refs遇到一個(gè)問(wèn)題

代碼如下：
實(shí)現(xiàn)效果是一個(gè)錨點(diǎn)導(dǎo)航：
通過(guò)點(diǎn)擊獲取當(dāng)前點(diǎn)擊對(duì)象的data-id屬性的值，再同個(gè)這個(gè)值獲取另外一個(gè)節(jié)點(diǎn)的offsetTop屬性值。

但是現(xiàn)在refs.xx這里的沒(méi)法寫變量，有沒(méi)有辦法能夠這樣動(dòng)態(tài)的獲取到offset值？

static defaultProps = {
     list: [
            {
                id: '#one'
               
            },
            {
                id: '#two'
               
            },
            {
                id: '#three'
            },
            {
                id: '#four'
            },
            {
                id: '#five'
            },
            {
                id: '#six'
            }
        ]
}

clickHandler(e){
      const id = e.target.getAttribute('data-id').split('#')[1];
      const target = this.refs.id.offsetTop;
      
      //后面的處理是頁(yè)面滾動(dòng)到目標(biāo)id的位置
}


render(){
    return (
            <div className="">
                <div className="wrap clearfix">
                    {
                        this.props.list.map((item, index) => {
                            return (
                                <a key={index} className="tab" data-id={item.id} target="_blank" onClick={this.clickHandler.bind(this)}></a>
                            )
                        })
                    }
                </div>
                <div style={{height:'500px'}}  id = "one">one</div>
                <div style={{height:'500px'}} id = "two">two</div>
                <div style={{height:'500px'}} id="three">three</div>
                <div style={{height:'500px'}} id="four">four</div>
            </div>
        );
}

回答

編輯回答

青黛色

再次強(qiáng)調(diào)，既然是react，就不要操作Dom.
你的這個(gè)問(wèn)題如下解決：

<div ref={r => this.test = r} onClick={() => {
    const offset = this.test.offsetTop;
    console.log(offset);
    }></div>

2017年10月14日 14:37

編輯回答

九年囚

另外一種方式可以不用ref，

onClick={this.clickHandler.bind(this,item.id)}

clickHandler(e,id) {
      const target = this[id];
      const dom = findDOMNode(target);
      console.log(dom);
}

2018年9月4日 21:37

編輯回答

久愛(ài)她

比如吧，有 A、B、C 三個(gè)組件，

<A data-id="b" onClick={this.clickHandler.bind(this)} />

<B ref={r => this.b = r />
<C ref={r => this.c = r />

A 組件被點(diǎn)擊，要拿到 B 組件的 offsetTop值，

clickHandler() {
      const id = e.target.getAttribute('data-id').split('#')[1];
      const target = this[id];
      const dom = findDOMNode(target);
      console.log(dom);
}

主要就是findDOMNode這個(gè)方法，獲取真實(shí)DOM，但是不建議使用了，所以還是盡量想辦法用state實(shí)現(xiàn)吧。由于不知道你的具體業(yè)務(wù)需求，所以無(wú)法給出建議。

補(bǔ)充部分，這個(gè)需求的確只能操作真實(shí)DOM實(shí)現(xiàn)。

完整代碼：

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  handleClick = (id) => {
    const dom = ReactDOM.findDOMNode(this[id]);
    alert(dom.offsetTop);
  }
  render() {
    return (
    <div style={{ margin: 24 }}>
      <a onClick={this.handleClick.bind(this, 'thire')}>thire</a>
        <h2 ref={r => this.one = r}>One</h2>
        <p>
          這里是一大段正文
          這里是一大段正文
          這里是一大段正文
          這里是一大段正文
          這里是一大段正文
          這里是一大段正文
          這里是一大段正文
          這里是一大段正文
          這里是一大段正文
          這里是一大段正文
        </p>
        <h2 ref={r => this.two = r}>Two</h2>
        <p>
          這里是一大段正文
          這里是一大段正文
          這里是一大段正文
          這里是一大段正文
          這里是一大段正文
          這里是一大段正文
          這里是一大段正文
          這里是一大段正文
          這里是一大段正文
          這里是一大段正文
        </p>
        <h2 style={{ marginTop: 800 }} ref={r => this.thire = r}>Thire</h2>
        <p>
          這里是一大段正文
          這里是一大段正文
          這里是一大段正文
          這里是一大段正文
          這里是一大段正文
          這里是一大段正文
          這里是一大段正文
          這里是一大段正文
          這里是一大段正文
          這里是一大段正文
        </p>
    </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

點(diǎn)擊 a 標(biāo)簽會(huì)彈出你需要的值，然后將頁(yè)面滾動(dòng)到這個(gè)位置應(yīng)該就可以吧。

實(shí)際上這種常見(jiàn)的需求別人已經(jīng)寫好了，比如 https://www.npmjs.com/package...

2018年6月27日 15:56