我正在写一本书，在文本内容中包含一堆小型交互式小部件。所以我的数据库中有这样的文本:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore.</p>
<div class="interactive-graph" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore.</p>
这些小部件需要 JS 才能运行。其中一些在本书的其他章节中重复使用，但大多数都是一次性的。
我知道 React 需要一个单一的根组件，我以前用 React 制作过网络应用程序。但我不明白如何将这些小部件编写为 React 组件，并在页面上呈现动态文本时自动挂载它们。
React 不适合这个吗？您能想出任何示例来说明如何执行此操作吗？
最佳答案
你的情况非常适合 React。
适合您的最简单示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
<div id="interactive-graph" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>, document.getElementById('interactive-graph') );
</script>
</body>
</html>示例取自 React Getting started guide .但通常，您希望引入构建系统，通过使用 browserify 或 wabpack 将您的 JSX 文件转换为 JS 包，并以这种方式将其包含到您的主要 HTML 中。这需要一些初步的学习曲线。提到的链接是最好的起点。
关于javascript - 在文本中 react 小部件(静态 HTML)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35090578/