将 react.js 与标准 HTML 一起使用

Question

我不知道我是否对此过于迟钝，或者我是否遗漏了一个关键概念，但即使我认为我将 react.js 作为一个框架“得到”，但在涉及到渲染。

我见过的每个例子都是这样的：

var myComponent = React.createClass({
    // ...
});

React.render(<myComponent/>, 'containerID');

渲染组件的调用与示例组件本身捆绑在一起。好的，对于演示目的来说足够简单，但是如果我有一个使用其他技术来呈现项目列表的网站，并且我想合并 React.js 来为每个项目呈现一些按钮，该怎么办。我的 HTML 可能如下所示：

<ul>
    <li><span>Item Name</span><img src="itemImage.jpg"/></li>
    <li><span>Item Name</span><img src="itemImage.jpg"/></li>
    <li><span>Item Name</span><img src="itemImage.jpg"/></li>
    <li><span>Item Name</span><img src="itemImage.jpg"/></li>
</ul>

假设我在一个单独的 .jsx 文件中制作了一个 react 组件，我已经在我的 app.js 文件中的某个地方转译/包含了该文件：

var LikeButton = React.createClass({ /* ... */ });

从呈现列表项的代码中，如何为每个<li> 添加 LikeButton 组件？我可以在这里插入什么代码：

<li>
    <span>Item Name</span>
    <img src="itemImage.jpg"/>
    <whatgoeshere???>
</li>

Answer 1

嗯，React.js 在单页应用程序上运行良好。也就是说，您的项目列表(<ul>...</ul>) 应该是另一个 React 组件，我们称之为 ItemList，因此您可以将 Like 组件设置为 Mixin，然后将 mixin 包含在您想要的任何其他组件 (ItemList) 中。那么您只需要将 ItemList 组件附加到 HTML 中即可。

如果项目列表已经是一个 React 组件，你需要做的就是在每个项目中使用 jsx 符号，如下所示：

<li>
  <span>Item Name</span>
  <img src="itemImage.jpg"/>
  <LikeButton/>
</li>

编辑

基于 OP 评论：

所以，如果<ul> 是纯 HTML，那么您绝对不能使用 JSX 语法来添加点赞按钮或任何类似于您在 Angular 中所做的事情。 我仍然认为最好的方法是将项目列表提取到另一个组件中，但如果你想坚持它，我能想象的唯一、丑陋的方法是在每个 div 内有另一个 html 标签，比如说一个 div 和然后在加载 DOM 时注入 React 组件，类似于

<li>
  <span>Item Name</span>
  <img src="itemImage.jpg"/>
  <div class="likeAnchor"></div>
</li>

<script type="text/babel">
  ReactDOM.render(<LikeButton/>, document.getElementByClass('likeAnchor'));
</script>

可能会遍历所有 .likeAnchor 元素。