단추를 중첩 된 React 구성 요소로 스크롤하십시오.

중첩 된 구성 요소가있는 React Component가 있습니다. 페이지 탐색을 위해 상단에 몇 개의 버튼이 있습니다. 질문 : 특정 버튼을 클릭 할 때 중첩 된 반응 구성 요소로 페이지를 스크롤하는 방법은 jquery 라이브러리를 사용하지 않고 페이지를 스크롤하는 방법입니까?단추를 중첩 된 React 구성 요소로 스크롤하십시오.

render() { 
    return (
     <div> 
     <button onClick={(e) => { console.log('Scrolling to Item 1');}}>Button0</button> 
     <button onClick={(e) => { console.log('Scrolling to Item 2');}}>Button1</button> 
      <Layout> 
      <Item> 
       <Content> 
      ... 
       </Content> 
      </Item> 

      <Item> 
       <Content> 
      ... 
       </Content> 
      </Item> 

      </Layout> 
     } 
     </div> 
    ); 
    }

출처

2017-01-17 Eugene

scrollIntoView을 사용하여 요소로 스크롤하고 React의 refs을 사용하여 구성 요소의 DOM을 가져옵니다.

Here은 원하는 것을 보여주는 작은 예입니다. 당신이 그것을 직접 구현해야하지 않는 한

var Hello = React.createClass({ 
    componentDidMount() { 
    alert("I will scroll now"); 

    this.refs.hello.scrollIntoView(); // scroll... 
    }, 

    render: function() { 
    return <div ref="hello">Hello {this.props.name}</div>; // reference your component 
    } 
}); 

ReactDOM.render(
    <Hello name="World" />, 
    document.getElementById('container') 
);

출처

2017-01-17 09:11:58 lustoykov