reactjs事件偵聽器window.resize

Question

我是新來reactjs，我試圖做一個表完全一樣使用反應這一個在小提琴： http://jsfiddle.net/hashem/crspu/555/

我創造了這個組件：

export default class Table extends Component { 

    render(){ 
     return <table className="scroll"> 
      <thead> 
       <tr> 
        <th>Head 1</th> 
        <th>Head 2</th> 
        <th>Head 3</th> 
        <th>Head 4</th> 
        <th>Head 5</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>Content 1</td> 
        <td>Content 2</td> 
        <td>Content 3</td> 
        <td>Content 4</td> 
        <td>Content 5</td> 
       </tr> 
       <tr> 
        <td>Content 1</td> 
        <td>Lorem ipsum dolor sit amet.</td> 
        <td>Content 3</td> 
        <td>Content 4</td> 
        <td>Content 5</td> 
       </tr> 
       <tr> 
        <td>Content 1</td> 
        <td>Content 2</td> 
        <td>Content 3</td> 
        <td>Content 4</td> 
        <td>Content 5</td> 
       </tr> 
       <tr> 
        <td>Content 1</td> 
        <td>Content 2</td> 
        <td>Content 3</td> 
        <td>Content 4</td> 
        <td>Content 5</td> 
       </tr> 
       <tr> 
        <td>Content 1</td> 
        <td>Content 2</td> 
        <td>Content 3</td> 
        <td>Content 4</td> 
        <td>Content 5</td> 
       </tr> 
       <tr> 
        <td>Content 1</td> 
        <td>Content 2</td> 
        <td>Content 3</td> 
        <td>Content 4</td> 
        <td>Content 5</td> 
       </tr> 
       <tr> 
        <td>Content 1</td> 
        <td>Content 2</td> 
        <td>Content 3</td> 
        <td>Content 4</td> 
        <td>Content 5</td> 
       </tr> 
      </tbody> 
     </table> 
    } 

} 

你能幫我在處理事件監聽器的調整大小，如從jquery例子中所示的反應方式？

Answer 1

只需在componentWillMount() {}中註冊純DOM事件，並記住將其解除綁定在componentWIllUnmount() {}。

Answer 2

這將讓你看調整大小事件：

componentDidMount() { 
     this.handleResize(); 
     window.addEventListener('resize', this.handleResize.bind(this)); 
} 


handleResize() { 
      console.log("I've been resized!"); 
}