0

假设我有两个组件：

叠加触发器：

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 属性。

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

OverlayContainer.propTypes = {
    triggerNode: PropTypes.node
}

export default OverlayContainer;

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

4

1 回答 1

3

利用

triggerNode: React.PropTypes.instanceOf(Element)

验证 DOM 元素。

于 2016-12-19T00:20:22.017 回答