在React中将VideoJs组件渲染为HTML

编程问答 2022-08-15

问题描述

我在React中创建了一个视频组件，该组件创建并渲染VideoJS。一些逻辑已添加到componentDidMount逻辑中。

在另一个组件中，我需要用视频组件替换特定的HTML String代码。 例如，我有：

<table>
  <td>
  column 1
  </td>
  <td>
  videoComesHere
  </td>
</table>
我想在安装视频并调用componentDidMount之后用video组件替换videoComesHere。

我尝试了renderToString，但是此方法在componentDidMount之前执行。 我需要一种解决方案，该解决方案需要呈现组件并在获取组件String之前调用componentDidMount方法。

解决方法

首先

    HTML和JSX之间的
  • 互操作性在React中不是理想的模式。
  • 在这种情况下，Vanilla JS在操作DOM元素时会很方便。

这是一种方法。

  • 捕获HTML标记中的可替换值：videoComesHere
  • 将它们替换为具有标识符/类的元素，例如<div>。
<td>videoComesHere</td> TO <td><div id="videoWrapper">videoComesHere</div></td>
  • 使用这些id /类作为占位符来呈现您的反应组件。
ReactDOM.render(<VideoComponent/>,document.getElementById("videoWrapper"));

小提琴： https://jsfiddle.net/kypt0o8w/

输出：

output

免责声明：此问题与dangerouslySetInnerHTML有关 （因此不建议使用该名称）。

reactjsreactjsreactjsreactjsvideo.js