變化scrollTop的在reactjs

Question

我剛學反應，並希望實現的功能： 兩個A，B是組件，如果滾動，則B滾動

以下是我的代碼

<A onScroll="handleScroll"></A>

//what i write now 
handleScroll: function(event){ 
    var target = event.nativeEvent.target; 

    //do something to change scrollTop value 
    target.scrollTop += 1; 

    // it looks the same as not use react 
    document.getElementById(B).scrollTop = target.scrollTop; 
} 

但實際上我想我這樣的代碼

//what i want 
<A scrollTop={this.props.scrollSeed}></A> 
<B scrollTop={this.props.scrollSeed}></B> 

//... 
handleScroll(){ 
    this.setState({scrollSeed: ++this.state.scrollSeed}) 
} 

它類似於input

<input value="this.props.value"/> 
<input value="this.props.value"/> 
<input ref='c' onChange={handleChange}> 

//... 
handleChange: function() { 
    // enter some code in c and then render in a and b automatically 
} 

換句話說，我想要一些屬性，像scrollTop（不同 形式<input value={}>，因爲<A scrollTop={}>不工作），與一些國家的綁定，讓我可以只需使用setState，他們會自行更新。

我以前使用Google搜索，但無法找到答案。我希望我可憐的英語不會讓你感到困惑。

Answer 1

有許多模式可以實現這一點。這個sample就是我想出來的，以幫助你進步。

首先創建一個具有滾動效果的超大元素的組件類。拖動滾動條時，此組件調用其handleScroll React屬性通知其父組件，值爲scrollTop。

var Elem = React.createClass({ 
    render() { 
     return (
      <div ref="elem" 
       onScroll={ this.onScroll } 
       style={{ width: "100px", height: "100px", overflow: "scroll" }}> 
       <div style={{ width: "100%", height: "200%" }}>Hello!</div> 
      </div> 
     ); 
    }, 
    componentDidUpdate() { 
     this.refs.elem.scrollTop = this.props.scrollTop; 
    }, 
    onScroll() { 
     this.props.handleScroll(this.refs.elem.scrollTop); 
    } 
}); 

父組件，aka包裝，保持滾動的最高值在其狀態。它的handleScroll作爲回調傳遞給子組件。子元素上的任何滾動觸發回調，設置狀態，導致重繪，並更新子組件。

var Wrapper = React.createClass({ 
    getInitialState() { 
     return { 
      scrollTop: 0 
     } 
    }, 
    render() { 
     return (
      <div> 
       <Elem scrollTop={ this.state.scrollTop } handleScroll={ this.handleScroll } /> 
       <Elem scrollTop={ this.state.scrollTop } handleScroll={ this.handleScroll } /> 
      </div> 
     ); 
    }, 
    handleScroll(scrollTop) { 
     this.setState({ scrollTop }); 
    } 
}); 

和渲染包裝，假設現有<div id="container"></div>。

ReactDOM.render(
    <Wrapper />, 
    document.getElementById('container') 
);