reactjs事件侦听器窗口。调整大小

reactjs事件侦听器窗口。调整大小,reactjs,react-jsx,Reactjs,React Jsx,我是reactjs新手,我正在尝试使用react制作一张与小提琴中的这张完全相同的桌子: 我创建了这个组件: export default class Table extends Component { render(){ return <table className="scroll"> <thead> <tr> <th>H

我是reactjs新手,我正在尝试使用react制作一张与小提琴中的这张完全相同的桌子:

我创建了这个组件:

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>
    }

}
导出默认类表扩展组件{
render(){
返回
总目1
总目2
总目3
总目4
总目5
内容1
内容2
内容3
内容4
内容5
内容1
Lorem ipsum dolor sit amet。
内容3
内容4
内容5
内容1
内容2
内容3
内容4
内容5
内容1
内容2
内容3
内容4
内容5
内容1
内容2
内容3
内容4
内容5
内容1
内容2
内容3
内容4
内容5
内容1
内容2
内容3
内容4
内容5
}
}

请您帮助我处理resize的事件侦听器,如jquery中的示例所示,以反应方式进行调整好吗?

只需在
componentWillMount(){}
中注册普通DOM事件,并记住在
componentWIllUnmount(){}

中解除绑定这将允许您监视调整大小事件:

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


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

这与反应无关。只需使用普通javascript或jquery来处理窗口大小调整事件。您可以从提供的示例中复制代码。这就是普通的javascript事件。