如何解决在React中将VideoJs组件渲染为HTML
我在React中创建了一个视频组件,该组件创建并渲染VideoJS。一些逻辑已添加到componentDidMount逻辑中。
在另一个组件中,我需要用视频组件替换特定的HTML String代码。 例如,我有:
<table>
<td>
column 1
</td>
<td>
videoComesHere
</td>
</table>
我尝试了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/
输出:
免责声明:此问题与dangerouslySetInnerHTML有关 (因此不建议使用该名称)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。