Question

我不知道我是否对此过于迟钝，或者我是否错过了一个关键概念，但即使我认为我＆＃34;得到＆＃34; 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语法添加like按钮或类似于你在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元素。

在标准HTML旁边使用react.js

1 个答案: