Question

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

主要测试是否存在Hero布局与列表布局，然后是否将图像放在右侧或左侧。

我不被允许将它们分成更小或单独的组件，所以我想知道你们是否有更好的方法来处理这种逻辑而不是所有这些三元组？我也会使用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

你有很多重复的代码。如果你可以把它分成组件就好了，但是因为你不能，你可以在返回之前把它们作为渲染方法中的一个对象。

例如，此代码重复三次：

    <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的新闻文章布局中处理Right Left Logic的最佳方法是什么？

1 个答案: