Question

我想减少代码重复。我有一个div元素，其中显示的内容可以是标题和详细信息，也可以是标题或仅详细信息。因此，如果有内容，我需要在内容旁边有一个关闭图标。

下面是代码。

let content;
const close_button = <SvgClose onClick={this.props.close} width="28" />;
const title_with_close_button = <Fragment><div className="content"> 
{title}{close_button}</div></Fragment>;
const detail_with_close_button = <Fragment><div className="content"> 
{title}{close_button}</div></Fragment>;

if (title && detail) {
    content = <Fragment><div className="content"> {title}
        {close_button}
    </div>
    <div className="small">
        {detail}
    </div></Fragment>;
} else if (title || detail) {
    content = {title_with_close_button} || {detail_with_close_button};
}
if (content) {
    return (
        <div className="message">
            <div>
                <div>{content}</div>
            </div>
        </div>);
}

从上面的代码中可以看到，如果我们有标题和详细信息，那么我使用关闭按钮的方式就好像我有标题或详细信息一样。这似乎是代码重复。如何保持代码整洁？

谢谢。

Answer 1

我会将代码重构为如下形式：

const close_button = <SvgClose />

    let content = <Fragment>
        <div className="content"> {title && isTitlePresent?close_button:null} </div>
        <div className="small"> {detail && isTitlePresent?null:close_button} </div>
    </Fragment>

if (content) {
    return (
        <div className="message">
            <div>
                <div>{content}</div>
            </div>
        </div>)
}

Answer 2

我认为您可以将其重构为如下形式：

const close_button = <SvgClose onClick={this.props.close}
  width="28" />;
  return (
    <div className="message">
      <div>
        <div>
          {title
            && <div className="content">
              {title}{close_button}</div>
          }
          {detail
           && <div className={title ? "small" : "content"}>
              {detail}{!title && close_button}</div>
          }
        </div>
      </div>
    </div>
);

此代码：

如果没有标题和详细信息，则不会显示内容。
如果存在适当的类别，则仅显示标题或详细信息。
如果同时存在两个类别，则会同时显示两个类别，例如，标题为class="content"，细节为class="small"

虽然可能还有其他方法可以重构它，但这是我更喜欢的-保持最小变量。

如何使用React减少代码重复？

2 个答案: