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;

覆盖容器组件从父组件获取其道具，该组件监视活动叠加定义的全局存储，其具有triggerNode prop。

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元素。

为什么React呈现的DOM节点不被React.PropTypes.node验证视为节点？

1 个答案: