反応の底にコンポーネントをスクロールする方法

Question

簡単な問題を解決しようとしています。コンポーネントが読み込まれたら、下にスクロールする必要があります。しかし、私はそれを解決しようと何時間も無駄にしてきました。私はさまざまな方法（scrollIntoView、scrollTop、scrollByなど）を試しましたが、どれもそれを行うことはできません。下のURLはシンプルなコンポーネントがあり、メッセージが表示される必要があるフィドルへのリンクです。問題は、自分で約10ピクセルスクロールする必要があることです。この問題を解決するために私を助けていただければ幸いです。

class Hello extends React.Component { 
    componentDidMount() { 
    const elem = ReactDOM.findDOMNode(this.refs.test); 

    if (elem) { 
     elem.scrollIntoView(false); 
    } 
    } 

    render() { 
    return (
     <div> 
     <div className="test" 
      ref="test"> 
      Hello {this.props.name} 
     </div> 
     <div>Message</div> 
     </div> 
    ) 
    } 
} 

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

JSFiddle

Answer 1

あなたは間違った場所にref属性を置きます。

「メッセージ」テキストを含め、コンポーネント全体をキャッチするには、1レベル上に移動します。だから、基本的に

：

class Hello extends React.Component { 
    // ... 

    render() { 
    return (
     <div ref="test"> 
     <div className="test"> 
      Hello {this.props.name} 
     </div> 
     <div>Message</div> 
     </div> 
    ) 
    } 
} 

はここであなたからフォーク、working jsfiddle demoです。

Answer 2

コンポーネントがすべての小道具で満たされたDOMに読み込まれるときにのみスクロールしてください。質問で提示主な問題に対処しない

export default class Hello extends React.Component { 
    constructor(props,context){ 
    super(props,context); 
    this.isAlreadyLoaded = false; 
    } 

componentWillReceiveProps(nextProps) { 
    let scrollToElement = document.getElementById("scroll-element"); 
    if (scrollToElement && !isAlreadyLoaded){ 
     this.isAlreadyLoaded = true; 
     scrollToElement.scrollIntoView(true); 
    } 
    } 

    render(){ 
     return {....} 
    } 
} 

Answer 3

class Hello extends React.Component { 
    // ... 

    componentDidUpdate() { 
    this.scrollDiv.scrollIntoView(false); 
    } 

    render() { 
    return (
     <div 
     ref={(el) => {this.scrollDiv = el}} 
     > 
     <div className="test"> 
      Hello {this.props.name} 
     </div> 
     <div>Message</div> 
     </div> 
    ) 
    } 
}