React -可选地在链接中包装一个项

React - Optionally wrap an item in a link

本文关键字：一个 包装 链接 React      更新时间：2023-09-26

我有一个React组件，它显示标题和一些文本。我想在一个链接中选择性地包装标题(同一个组件在多个地方使用)，并希望有最好的方法指导。我的组件看起来像这样:

var FeedItem = React.createClass({
  renderRawMarkup: function(text) { ... },
  render: function() {
    var item = this.props.item,
      rawBody = this.renderRawMarkup(item.body);

  return (
    <article className="feed-item">
      <h2 className="feed-item__title">{item.title{</h2>
      <div className="feed-item__body" dangerouslySetInnerHTML={rawBody} >
      </div>
    </article>
  );
});

我是否最好为标题创建一个新组件?或者我可以在返回中使用if，例如:

<h2 className="feed-item__title">
  {if (item.path) { <a href={item.path}> }}
    {item.title}
  {if (item.path) { </a> }}
</h2>

我是一个React新手，所以如果我从完全错误的角度来处理这个问题，我道歉!

在jsx中不能使用if语句，但是可以使用ternary expressions。在您的情况下，您可以使用:

<h2 className="feed-item__title">
  { item.path ? <a href={item.path}>{item.title}</a> : {item.title} }
</h2>
这在官方文档中有说明:React docs
相关文章：