在 React 中将 VideoJs 组件渲染为 HTML
Render VideoJs component as HTML in React
我在 React 中创建了一个视频组件，用于创建和呈现 VideoJS。一些逻辑添加到 componentDidMount 逻辑。
在另一个组件中，我需要用视频组件替换特定的 HTML 字符串代码。
例如我有：
<table>
<td>
column 1
</td>
<td>
videoComesHere
</td>
</table>
我想在挂载并调用 componentDidMount 后用视频组件替换 videoComesHere。
我试过renderToString，但是这个方法是在componentDidMount之前执行的。
我需要一个在获取组件字符串之前呈现组件并调用 componentDidMount 方法的解决方案。
首先，
- HTML 和 JSX 之间的互操作性 在 React 中不是理想的模式。
- 在这种情况下，Vanilla JS 在操作 DOM 元素时会很方便。
这是一个方法。
- 捕获 HTML 标记中的可替换值：
videoComesHere
- 将它们替换为具有 identifiers/classes 的元素，例如
<div>。
<td>videoComesHere</td> TO <td><div id="videoWrapper">videoComesHere</div></td>
- 使用这些 ids/classes 作为占位符来呈现您的 React 组件.
ReactDOM.render(<VideoComponent/>, document.getElementById("videoWrapper"));
Fiddle: https://jsfiddle.net/kypt0o8w/
输出：
免责声明：此问题涉及dangerouslySetInnerHTML
（不推荐因此得名）。
我在 React 中创建了一个视频组件，用于创建和呈现 VideoJS。一些逻辑添加到 componentDidMount 逻辑。
在另一个组件中，我需要用视频组件替换特定的 HTML 字符串代码。 例如我有：
<table>
<td>
column 1
</td>
<td>
videoComesHere
</td>
</table>
我试过renderToString，但是这个方法是在componentDidMount之前执行的。 我需要一个在获取组件字符串之前呈现组件并调用 componentDidMount 方法的解决方案。
首先，
- HTML 和 JSX 之间的互操作性 在 React 中不是理想的模式。
- 在这种情况下，Vanilla JS 在操作 DOM 元素时会很方便。
这是一个方法。
- 捕获 HTML 标记中的可替换值：
videoComesHere - 将它们替换为具有 identifiers/classes 的元素，例如
<div>。
<td>videoComesHere</td> TO <td><div id="videoWrapper">videoComesHere</div></td>
- 使用这些 ids/classes 作为占位符来呈现您的 React 组件.
ReactDOM.render(<VideoComponent/>, document.getElementById("videoWrapper"));
Fiddle: https://jsfiddle.net/kypt0o8w/
输出：
免责声明：此问题涉及dangerouslySetInnerHTML （不推荐因此得名）。