React - オプションでリンク内のアイテムをラップする

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> 
); 
}); 

が、私は最高のちょうどタイトルのために新しいコンポーネントを作成するのですか？それとも私はリターンの内側、例えば場合を使用することができます。：

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

私は完全に間違って角度から問題にアプローチしていた場合、私は謝罪のでリアクト初心者のビットんですよ！

Answer 1

ifステートメントをjsx内で使用することはできませんが、ternary expressionsを使用できます。あなたのケースでは、あなたが使用することができます。

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

これは、公式ドキュメントに記載されていますReact docs