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

我对反应还是比较新的，我并没有真正以一种典型的方式使用它

我正在开发一个功能组件库（UI组件），我没有状态、存储或任何东西

我有一个外部函数，它接受HTMLElement（DOM元素）作为唯一的参数。为了便于讨论，假设此函数将传递的DOM元素初始化为旋转木马（假设该函数在

Carousel.init（）

下引用）

我还有一个功能组件，

Carousel

，用于呈现我的Carousel元素：

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

---

对我来说，这似乎非常令人讨厌，我不认为我遇到过任何同时使用

refs

和

findDomNode

的例子。是否有更合适的方法，甚至是推荐的方法？

您需要使用

ReactDOM.findDOMNode

，因为您附加的

ref

位于React组件上，而不是React组件内的DOM元素。如果将

ref

传递给模块内的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>
);

const Carousel=（{slides，…props}）=>(
Carousel.init（节点）}{…props}>
{slides.map（（幻灯片，索引）=>(
{幻灯片}
))}
);

和在模块中

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

类模块扩展React.Component{
render（）{
{/*其他相关代码*/}
}
}

太好了，谢谢，这很有帮助。在家里做实验，如果一切都好，就接受你的答案。

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