javascript - 为什么 React 渲染的 DOM 节点不被 React.PropTypes.node 验证视为节点？

Question

假设我有两个组件:

叠加触发器:

import {openOverlay} from './overlay-actions'

class OverlayTrigger extends Component {
    handleMouseOver(event) {
        // updates global store
        openOverlay({
            triggerNode: this.refs.container
        })
    }

    render() {
        return <div ref="container" onMouseOver={this.handleMouseOver.bind(this)}></div>;
    }
}

// ...map actions to dispatch here

export default OverlayTrigger;

覆盖层容器组件从父组件获取其属性，该父组件监视事件覆盖层定义的全局存储，该定义具有触发器节点属性。

class OverlayContainer extends Component {
    render() {
        return <div></div>;
    }
}

OverlayContainer.propTypes = {
    triggerNode: PropTypes.node
}

export default OverlayContainer;

这里的结果是传递给 OverlayContainer 的 triggerNode 是一个有效的 DOM 节点，但未能通过 ReactPropTypes 的 isNode 验证器进行验证。为什么？如何解决这个问题？

Answer 1

使用

triggerNode: React.PropTypes.instanceOf(Element)

验证 DOM 元素。