在 React 中将 VideoJs 组件渲染为 HTML答案

【问题标题】：Render VideoJs component as HTML in React在 React 中将 VideoJs 组件渲染为 HTML
【发布时间】：2020-08-23 07:00:06
【问题描述】：

我在 React 中创建了一个视频组件，用于创建和渲染 VideoJS。在 componentDidMount 逻辑中添加了一些逻辑。

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

<table>
  <td>
  column 1
  </td>
  <td>
  videoComesHere
  </td>
</table>

我想在挂载并调用 componentDidMount 后用视频组件替换 videoComesHere。

我试过renderToString，但是这个方法是在componentDidMount之前执行的。我需要一个解决方案，在获取组件 String 之前渲染组件并调用 componentDidMount 方法。

【问题讨论】：

【解决方案1】：

首先，

这是一种方法。

<td>videoComesHere</td> TO <td><div id="videoWrapper">videoComesHere</div></td>

ReactDOM.render(<VideoComponent/>, document.getElementById("videoWrapper"));

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

输出：

免责声明：此问题涉及dangerouslySetInnerHTML （不推荐因此得名）。

【讨论】：

我希望它在调用 renderToString 后调用 componentDidMount。所以换句话说，我有 renderToString(Video />) 这是渲染视频但不调用 componentDidMount 操作
嗯，我有一个字符串，我需要用视频组件替换一个特定的字符串。然后调用字符串的 dangerouslySetInnerHTML
知道了。因此，这处理设置为 HTML 而不是 JSX 的文本，并且组件需要适合 HTML 结构。这就是危险功能发挥作用的时候。