在无状态React组件渲染的DOM元素上调用外部函数的最佳方法是什么？

Question

我对React还是比较陌生，我并不是真的以典型的方式使用它。

我正在使用功能组件（UI组件）库，并且没有状态或存储或任何内容。

我有一个外部函数，该函数接受HTMLElement（DOM元素）作为唯一参数。 为了便于讨论，我们假设此函数将传递的DOM元素初始化为Carousel（并且该函数在Carousel.init()下引用）。

我还有一个功能组件Carousel ，用于渲染我的轮播元素：

const Carousel = ({ slides, ...props }) => (
    <Module {...props}>
        {slides.map((slide, index) => (
            <Component name='slide' key={index}>{ slide }</Component>
        ))}
    </Module>
);

实际上，这只是输出静态HTML。 我需要在输出的DOM元素上调用Carousel.init ，并且需要在声明该组件的同一文件中调用此函数（自然，该页面上会包含该组件的多个实例）。

我在寻求答案时发现的两个最大线索是React ref和ReactDOM的findDomNode方法 。 这些线索使我进入了讨论： https : //github.com/facebook/react/issues/4936

在此讨论的底部，您可以看到我本人的评论，解释了我的问题，并显示了我当前拥有的解决方案（顺便说一句可行）：

const Carousel = ({ slides, ...props }) => (
    <Module ref={node => Carousel.init(ReactDOM.findDOMNode(node))} {...props}>
        {slides.map((slide, index) => (
            <Component name='slide' key={index}>{ slide }</Component>
        ))}
    </Module>
);

在我看来，这似乎超级 hacky，我认为我没有遇到使用refs 和 findDomNode任何示例。 有没有更合适甚至建议的方法？

Answer 1

您需要使用ReactDOM.findDOMNode因为您附加的ref位于React组件上，而不是在React组件内的DOM元素上。 如果将ref传递给Module内的DOM节点，则可以避免使用ReactDOM.findDOMNode

const Carousel = ({ slides, ...props }) => (
    <Module innerRef={node => Carousel.init(node)} {...props}>
        {slides.map((slide, index) => (
            <Component name='slide' key={index}>{ slide }</Component>
        ))}
    </Module>
);

并在模块中

class Module extends React.Component {
   render() {
      <div ref={this.props.innerRef}>
           {/* other relevant code */}
      </div>
   }
}