React JSのニュース記事レイアウトでRight Left Logicを処理する最良の方法は何ですか？

Question

私はReact JSの条件の束を扱うためにいくつかの面倒なコードを持っています。

主に、ヒーローレイアウトとリストレイアウトがあるかどうかをテストし、イメージを左右どちらに配置するかをテストします。

これらをより小さいまたは別々のコンポーネントに分けることは許されませんでしたので、皆さんがこれらのすべての三項の代わりにこのロジックを処理するより良い方法があるのだろうかと思います。私はあなたが見るようにCol機能のためにReact Bootstrapも使用します。これらのタイプの状況に対処するためのより良い方法はありますか？私はちょうど私が適切なコードだと思ったものを置いた、うまくいけば十分です。ありがとう！

<div className={cellClassName}> 
     {layout === "hero" && thumbnailAlignment === "right" && showThumbnails && newsImage ? 
     <Col className="textContainer" md={6} sm={12}> 
     <ItemTextArea headline={headline} 
      previewText={previewText} 
      showDescription={showDescription} 
      showBylines={showBylines} 
     /> 
     </Col> : null} 
     {layout !== "hero" && thumbnailAlignment === "right" && showThumbnails && newsImage ? 
     <Col className="textContainer" md={10} sm={12}> 
     <ItemTextArea headline={headline} 
      previewText={previewText} 
      showDescription={showDescription} 
      showBylines={showBylines} 
     /> 
     </Col> : null} 
     {(thumbnailAlignment === "right" && !showThumbnails) || (thumbnailAlignment === "right" && !newsImage) ? 
     <Col className="textContainer" md={12} sm={12}> 
     <ItemTextArea headline={headline} 
      previewText={previewText} 
      showDescription={showDescription} 
      showBylines={showBylines} 
     /> 
    </Col> : null} 
     {layout !== "hero" && showThumbnails && newsImage ? <Col md={2} sm={12} className="Item-imageCell"> 
     <div className={imageContainerClassName} style={customBackgroundStyles}> 
      {newsImage ? <img className="img-responsive" src={newsImage} alt={headline}/> : null} 
     </div> 
     </Col> : null} 
     {layout === "hero" && showThumbnails && newsImage ? <Col md={6} sm={12} className="Item-imageCell"> 
     <div className={imageContainerClassName} style={customBackgroundStyles}> 
      {newsImage ? <img className="img-responsive" src={newsImage} alt={headline}/> : null} 
     </div> 
     </Col> : null} 
     {layout === "hero" && thumbnailAlignment === "left" && showThumbnails && newsImage ? 
     <Col className="textContainer" md={6} sm={12}> 
     <ItemTextArea headline={headline} 
      previewText={previewText} 
      showDescription={showDescription} 
      showBylines={showBylines} 
     /> 
     </Col> : null} 
     {layout !== "hero" && thumbnailAlignment === "left" && showThumbnails && newsImage ? 
     <Col className="textContainer" md={10} sm={12}> 
     <ItemTextArea headline={headline} 
      previewText={previewText} 
      showDescription={showDescription} 
      showBylines={showBylines} 
     /> 
     </Col> : null} 
     {(thumbnailAlignment === "left" && !showThumbnails) || (thumbnailAlignment === "left" && !newsImage) ? 
     <Col className="textContainer" md={12} sm={12}> 
     <ItemTextArea headline={headline} 
      previewText={previewText} 
      showDescription={showDescription} 
      showBylines={showBylines} 
     /> 
     </Col> : null} 
    </div> 

Answer 1

繰り返しコードがたくさんあります。コンポーネントに分けることができればいいですが、できないので、返す前にレンダリングメソッドにオブジェクトとして置くことができます。

たとえば、このコードは三回繰り返される：（：追加されるために必要な括弧とセミコロン編集）：については

render() { 
    const customTextArea = (<ItemTextArea headline={headline} 
          previewText={previewText} 
          showDescription={showDescription} 
          showBylines={showBylines} 
         />); 

    return (
    <div className={something}> 
    {someCondition && customTextArea} 
    </div> 
    <div className={something}> 
    {someCondition && customTextArea} 
    </div> 
    <div className={something}> 
    {someCondition && customTextArea} 
    </div> 
); 
} 

を

<ItemTextArea headline={headline} 
     previewText={previewText} 
     showDescription={showDescription} 
     showBylines={showBylines} 
    /> 

をあなたのレンダリング機能では、あなたが行うことができます三元条件を使用する場合は、returnコールの外でも処理できます。