reactjs事件監聽器window.resize

Question

我是reactjs的新手，我正在嘗試使用react在小提琴中制作一張完全像這樣的表： 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示例中所示的resize事件偵聽器的反應方式嗎？

Answer 1

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

Answer 2

這將允許您監視調整大小事件：

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


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