Question

我想在一个React组件中要求一个DOM节点为prop，该组件正在进行一些文档偏移绝对定位。

propTypes: {
    alignmentTarget: mountable.isRequired,
},

问题在于我使用回调ref将DOM节点存储在状态中并且在启动时为null - 最终状态被设置并且引用被设置，因此它适用于用户，但道具验证不起作用。我已经读过，方法ref以后可能会弃用字符refs。这些曾经是字符串ref。

来自父组件的相关代码行使用<Popover>：

_containerRendered (element) {
    this.setState({container: element});
},

_buttonRendered (element) {
    this.setState({target: element});
},

render () {
    return (
        <div className="react-popover-example-wrap" ref={this._containerRendered}>
            <button id="popover-react-toggle" className="slds-button slds-button--neutral slds-button--x-small" ref={this._buttonRendered} onClick={this._handleClick}>Toggle</button>
            <Popover
                modal={this.props.modal}
                positionedTargetHorizontalAttachment="right"
                alignmentTarget={this.state.target}
                container={this.state.container}
                isOpen={this.state.isOpen}>
                <span>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.</span>
            </Popover>
        </div>
    );
},

如果它产生影响，则反应0.14。

Answer 1

如果需要PropType，那么它会向父母发出一个信号，可以说，直到该道具可用为止。一旦组件安装完毕，ref功能将运行，设置您的状态，然后render孩子可以PropType mountable.isRequired。< / p>

{ this.state.target && <Popover ... /> }

Answer 2

按照@azium的建议，这就是我最终做的事情：

_containerRendered (element) {
    this.setState({container: element});
},

_buttonRendered (element) {
    this.setState({target: element});
},

render () {
    let popover = null;
    if (this.state.target && this.state.container) {
        popover = (<Popover
                alignmentTarget={this.state.target}
                container={this.state.container}
                isOpen={this.state.isOpen}
                positionedTargetHorizontalAttachment="right">
                <span>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.</span>
            </Popover>);
    }
    return (
        <div className="react-popover-example-wrap" ref={this._containerRendered}>
            <button id="popover-react-toggle" className="slds-button slds-button--neutral slds-button--x-small" ref={this._buttonRendered} onClick={this._handleClick}>Toggle</button>
                {popover}
        </div>
    );
},

如何在React中通过引用要求可安装的prop set

2 个答案: