Question

我是反应犹太人的新手，我正在尝试使用反应来做一个与小提琴完全相同的表格： 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!");
}

reactjs事件监听器window.resize

2 个答案: