Reactjs 如何在React中使用现有的HTML元素？

是否可以在React中引用现有的HTML元素？
我有一个页面，其中React仅用于一小部分组件，并且在React加载之前页面上存在“video”元素。然后我有一个react组件，它有两个应该会影响视频元素的道具

实现这一目标的最佳/正确方法是什么？
目前，在组件的呈现方法中，我使用

document.getElementById（'video-'+this.props.videoId）

然后对其进行操作。我想我可以用“refs”来表示重用现有的HTML元素，但不确定如何重用，也没有找到有用的信息

---

谢谢

据我所知，您有一个应用程序，可能内置在其他堆栈中，您正试图在该应用程序中使用React。页面在之前加载，然后React组件呈现。正如Icepickel所指出的，

refs

用于您在React应用程序中创建的组件。所以，你不能在这里使用它

通常，不鼓励直接访问DOM中的元素。但是，因为你是在它的一部分使用它，所以它是完全好的。但是在

render（）

方法中执行此操作不是正确的选择

相反，您可以做的是，利用React生命周期方法以更好的方式控制视频播放器。通常在DOM上安装组件时。按以下顺序调用以下生命周期方法：

constructor

组件将安装

渲染

componentDidMount

因此，我建议在

构造函数中使用
document.getElementById（'video-'+this.props.videoId）
设置状态。[我假设页面在react组件之前laods]

let el=document.getElementById（'video-'+this.props.videoId）；
此.state={
视频播放器：el；
}

然后在以后安装组件时。在
组件didmount
中，更改视频播放器中需要更改的内容

我还创建了一个小文档来详细介绍生命周期方法。这样，您将能够编写更清晰的代码，并轻松管理视频播放器的状态。
您可以查找不属于React的HTML元素并对其进行修改。就这一次而言，首选的方法是更新组件的道具/状态，而不是使用
refs
。我想您应该看看ReactDOM.render，如果您想从react渲染这些东西，但要操作它，我不认为我会从组件渲染方法（您不知道这可能会被调用多久）
refs
在这里对您没有帮助，因为它们更像是对您在组件中自己创建的元素的引用。您可以使用JavaScript而不使用React来操作React之外的HTML元素。你在这里使用React的原因是什么？