在 React JS 的新闻文章布局中处理左右逻辑的最佳方法是什么？

Question

所以我有一些繁琐的代码来处理 React JS 中的一堆条件。

主要是测试是否有Hero layout vs List Layout，然后是图片放在右边还是左边。

不允许我将它们分成更小或单独的组件，所以我想知道你们是否有更好的方法来处理这个逻辑而不是所有这些三元组？正如您将看到的，我还使用 React Bootstrap 作为 Col 功能。有没有更好的方法来处理这些类型的情况？我只是放置了我认为相关的代码，希望它足够好。谢谢！

   <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

您有很多重复代码。如果你能把它分成组件就好了，但既然你不能，你可以在 return.

之前把它们作为一个对象放在你的 render 方法中

例如这段代码重复三次：

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

在你的渲染函数中，你可以这样做（编辑：需要添加括号和分号）：

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

至于三元条件的使用，您也可以在 return 调用之外处理。

在 React JS 的新闻文章布局中处理左右逻辑的最佳方法是什么？

What's the best way to handle Right Left Logic in a news article layout in React JS?

reactjs

react-bootstrap