时间戳

首页 > 解决方案 > 在 React 无状态组件呈现的 DOM 元素上调用外部函数的最佳方法是什么？

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

问题描述

我对 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。我需要调用Carousel.init这个输出的 DOM 元素，并且我需要在声明组件的同一个文件中调用这个函数（当然，页面上包含组件的多个实例）。

我在寻求答案时发现的两个最大线索是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 and findDomNode的示例。有没有更合适的，甚至是推荐的方式来做到这一点？

标签： javascriptreactjsjsx

解决方案

您需要使用，ReactDOM.findDOMNode因为ref您附加的 是在 React 组件上，而不是在 React 组件内的 DOM 元素上。如果将 a refon 传递给 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>
   }
}

推荐阅读