Question

我知道findDOMNode是一个禁忌，我有一种感觉，我可以摆脱它。

我最近重构了我的组件，使用Button组件而不是button标签。它现在看起来像这样：

<Button
   ref={(input) => this.toggleZipLink = input}>
   Add New Zip
</Button>

我的组件中有一个函数可以通过prop从另一个组件调用：

shouldClickOutside(e) {
    if (findDOMNode(this.toggleZipLink).contains(e.target)) {
        return false;
    }
    return true;
}

我必须使用findDOMNode，因为this.toggleZipLink是一个组件。如果Button是button，我就不需要它。

我有什么方法可以将内部button标记暴露给它的父母？我注意到this.toggleZipLink有一个refs对象，但它似乎是空的。作为参考，Button是不无状态功能组件，所以它应该支持ref。

解决方案编辑：

在Button内，我添加了引用ref={(button) => this.button = button}。然后在父div中我可以通过this.toggleZipLink.button访问它。

Answer 1

您可以在Button（名称为buttonRef）上公开其他一些非参考道具，以通过您的参考回调。 Button的呈现然后将this.props.buttonRef作为ref传递给基础button。

class Button extends Component {
  render() {
    const { buttonRef, ...passThroughProps } = this.props;
    return <button {...passThroughProps} ref={buttonRef} />
  }
}

此外，您可以将参考转到Button，然后通过toggleZipLink.whateverYouNamedYourRef访问它。

通过refs很难，需要一些样板。

如何重构findDOMNode

1 个答案: