Question

我正在构建一个Modal组件。该组件将模态内容视为子项，将按钮触发模态作为按钮道具。

此Modal组件应呈现按钮。单击时，它必须将固定元素准确定位在该按钮的顶部，然后设置为模式对话框。为此，Modal组件需要使用按钮DOM元素的ref来使用getBoundingClientRect来测量它的大小和位置。

我希望Modal组件能够通过按钮prop接收按钮DOM元素或呈现按钮的自定义React元素。

组件的api看起来像这样

const ModalUser = () => (
  <div>
    <Modal button={<button>Button</button>}/>
    <Modal button={<CustomButton>Button</CustomButton>}/>
  </div>
)

Modal的渲染方法如下所示

class Modal extends React.PureComponent {
  render() {
    return (
      <div>
        {React.cloneElement(this.props.button, {
         ref: (el) => { this.button = el && el.button ? el.button : el },
         onClick: this.onClick,
        })}
        <span>top: {this.state.top}</span>
        <span>left: {this.state.left}</span>
      </div>
    );
  }
}

因此需要任何CustomElement按钮来公开this.button作为其包含按钮的参考。

class CustomButton extends React.PureComponent {
  render() {
    return (
      <button
        ref={(el) => { this.button = el }}
        onClick={this.props.onClick}
      >
        <span>Custom</span>
        <span>{this.props.children}</span>
      </button>
    )
  }
}

对我而言，这感觉不是最佳，但它有效。我觉得应该有一个更优雅的解决方案。有没有人建议如何更好地做到这一点。

这是一个有效的演示 Codepen

如何访问自定义反应组件中的元素的引用

0 个答案: