Question

我一直在为一些React组件做一些（据说）轻微的重构工作。由于某种原因，一个人已按预期停止工作 - 网上提出的其他问题相似但不足以解决我的情况。

我有这个组件，有条件地从父级渲染：

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';

class ArrowButton extends React.Component {

    handleMove() {
        let $arrow = $(ReactDOM.findDOMNode(this));
        let $banner = $arrow.parents('.hero-banner');
        let bannerBottom = $banner.offset().top + $banner.outerHeight();

        $('html, body').animate({
            scrollTop: bannerBottom
        });
    }

    render() {
        return (
            <div className="arrow-button" onClick={this.handleMove.bind(this)}>
                <div className="arrow-button__arrow"></div>
            </div>
        );
    }
}

export default ArrowButton;

它的父母将它放在自己内部：

displayArrowButton() {
    if (this.props.showArrow) {
        return <ArrowButton />;
    }
}
...
{this.displayArrowButton()}

问题：单击带有绑定事件处理程序的按钮（在其他地方工作）会导致一个奇怪的错误，我不禁想到这是一个红色的鲱鱼：

Warning: React can't find the root component node for data-reactid value `.0.2.0.0.1`. If you're seeing this message, it probably means that you've loaded two copies of React on the page. At this time, only a single copy of React can be loaded at a time.
Uncaught TypeError: Cannot read property 'firstChild' of undefined

如果我删除.bind，我根本没有这个范围。我认为这可能是错误的（如窗口或其他东西），但似乎未定义。

Uncaught TypeError: Cannot read property 'top' of undefined

我找不到任何包含React两次的奇怪参考。我应该仔细查看（联合国）常见问题吗？除了处理程序主体之外，为什么其他组件具有相同的设置？

Answer 1

我们通过简单地引用事件对象和目标来解决这个问题。它实现了相同的结果（进入DOM节点并用jQuery包装它），但感觉不是'React方式'。也就是说，animate（）方法既没有进一步复杂化，也没有真正的理由而不是符合性。

handleMove(e) {
    let $arrow = $(ReactDOM.findDOMNode(e.target));

React组件事件处理程序找不到此

1 个答案: