Why isn't a DOM node rendered by React considered a node by React.PropTypes.node validation?

Question

Let's say I have two components:

An overlay trigger:

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;

And the overlay container component which gets its props from a parent component that watches a global store for the active overlay definition, which has a triggerNode prop.

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

OverlayContainer.propTypes = {
    triggerNode: PropTypes.node
}

export default OverlayContainer;

The result here is that triggerNode as passed to OverlayContainer is a valid DOM node, but fails the validation by ReactPropTypes' isNode validator. Why? And how can this be resolved?

Answer 1

Use

triggerNode: React.PropTypes.instanceOf(Element)

to verify DOM elements.