Question

我正在写一本书，其中包含一些文本内容中的小型交互式小部件。所以我的数据库中有这样的文字：

<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来创建Web应用程序。但我不明白我如何将这些小部件编写为React组件并自动挂载它们，因为动态文本在页面上呈现。

React是不是很适合这个？你能想到任何证明如何做到这一点的例子吗？

Answer 1

您的情况非常适合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中。这需要一些初步的学习曲线。提到链接是最好的起点。

在文本中反应小部件（静态HTML）

1 个答案: