我想要一些关于使用反应的最佳实践的建议。
我想要一些关于使用反应的最佳实践的建议。
提问于 2017-04-19 08:22:57
作为学习新框架的一种方式，我通常会重写一个小的web应用程序来处理我在网络收音机中使用的mp3s列表。现在轮到反应了！因此，基本上，我呈现了一个有字段的表，其中一个td有一个标签列表，因为我为此使用了引导，我有引导标签(在引导4上称为徽章)，所以下面是我可以拥有的代码的最小示例：
<td>
<span class="badge badge-success">tag1</span>
<span class="badge badge-success">tag2</span>
<span class="badge badge-success">tag3</span>
</td>因此，基本上，为了通过这个例子来教自己如何在组件中使用组件，我制作了一个组件来处理标记(显示它们，然后有一个弹出窗口来选择它们)，但是我必须呈现数据的方式是非常不优雅的，我想有一些方法可以使它更好。
以下是组件的呈现()：
render() {
return (
<span>
{ this.props.tags.map((tag) => {
return (
<span key={tag._id}>
<span className="badge badge-success">{tag.intitule}</span>
{' '}
</span>
);
})}
</span>
);
}我想我可以渲染整个td以避免一个跨度，但是这样它就不会像使用它那样可重用了。因此，我如何使这个更漂亮的阅读，并使用一个更优雅的呈现代码。
Stack Overflow用户
回答已采纳
发布于 2017-04-19 09:16:14
现在不可能在没有父标记的情况下呈现子组件，但是有一个开放的GitHub问题，希望能够让我们避免这种限制。
但是，如果要将代码转换为：
render(){
const { tags } = this.props;
return (
<div>
{ tags.map(tag => <span key={tag._id} className="badge badge-success">{tag.intitule}</span>) }
</div>
)
}更新#1
您还可以将“标记”分隔到无状态功能部件，如下所示：
const Tag = ({tag}) => (
<span className="badge badge-success">{tag.intitule}</span>
);然后，在其他更复杂的组件中，您可以这样做。
class ComplexComponent extends React.Component{
render(){
const { tags } = this.props;
return (
<div>
{ tags.map(tag => <Tag key={tag._id} tag={tag} />) }
</div>
)
}
}看看这个小提琴。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43490268
复制相关文章
相似问题
腾讯云开发者
