Question

我有一组具有几乎相同的JSX结构的组件。这些组件包括Panel，SidePanel，Card和Modal。

唯一的区别是className，因为我正在使用CSS类名的BEM命名约定，以及事件处理函数以及事件处理函数的触发位置和方式。

我应该如何重构这些组件以防止在所有地方使用重复的JSX？

以下是我的Panel和SidePanel组件JSX的两个例子，

  <div>
    <article
      className={classes}
      id={this.props.id}
      style={this.props.style}
    >
      {title && (
        <div className="panel__title">
          <h3>{title}</h3>
        </div>
      )}
      <div className="panel__content">{this.props.children}</div>
      {toolbarButtons && (
        <footer className="panel__footer">{toolbarButtons}</footer>
      )}
    </article>
  </div>

侧面板，

  <div>
    <article className={classes} id={id} style={style}>
      {title && (
        <div className="side-panel__title">
          <h3>{title}</h3>
        </div>
      )}
      <div className="side-panel__content">{children}</div>
      {toolbarButtons && (
        <footer className="side-panel__footer">{toolbarButtons}</footer>
      )}
    </article>
  </div>

您已经可以看到这两个组件之间的相似性。

Answer 1

您需要做的就是将css前缀作为道具传递。

您可以使用以下basePanel：

  const basePanel = (props) => (<div>
    <article className={props.classes} id={props.id} style={props.style}>
      {title && (
        <div className={`${props.cssPrefix}__title`}>
          <h3>{props.title}</h3>
        </div>
      )}
      <div className={`${props.cssPrefix}__content`}>{props.children}</div>
      {toolbarButtons && (
        <footer className={`${props.cssPrefix}__footer`}>{props.toolbarButtons}</footer>
      )}
    </article>
  </div>);

然后使用它：

您的小组成为：

const Panel = (props) => <BasePanel {...props} cssPrefix="panel" />;

你的小组成为：

const SidePanel = (props) => <BasePanel {...props} cssPrefix="side-panel" />;

如何使用几乎相同的JSX结构重构组件

1 个答案: