ボタンをクリックするとネストされたReactコンポーネントにスクロールします

いくつかのネストされたコンポーネントを持つReactコンポーネントがあります。ページのナビゲーションには、上部にいくつかのボタンがあります。問題は、特定のボタンをクリックしたときにネストされた反応コンポーネントにページをスクロールする方法です.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