Question

我有一个显示标题和一些文本的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新手，如果我从完全错误的角度接近问题，请道歉！

Answer 1

您无法在jsx中使用if语句，但您可以使用ternary expressions。在您的情况下，您可以使用：

<h2 className="feed-item__title">
  { item.path ? <a href={item.path}>{item.title}</a> : {item.title} }
</h2>

官方文档中说明了这一点：React docs

React - 可选择将项目包装在链接

1 个答案: