不断导入反应组件

Question

我正在使用 React 库创建一个应用程序，但我的问题更多与 JavaScript ES6 本身有关。

1. 我有一个组件（页面），我在其中使用了我自己设计的 FAB（浮动操作按钮）：

class Page extends Component {
.
.
.
  render() {

    return (<>
      .
      .
      .
      <FloatingActionButton
        mainActionContent={<Icon.Plus size="48" />}
        onClick={() => {
          this.setState({
          examinationData: null,
          modalExamination: true,
          });
        }}
        dropdown={myFAB}
      />
      .
      .
      .
    </>)
  }
}

1. 在主组件中，我将 FAB 配置存储在一个常量中

class Page extends Component {
.
.
.
doRefreshList() {...}
doDeleteSelected() {...}
.
.
.
render() {

  const myFAB = {
    trigger: {
      className: "m-0 rounded-circle noCaret badge-overlay",
      style: { paddingLeft: "5em", paddingRight: ".5em", zIndex: 0 },
      content: (
        <React.Fragment>
          <Icon.ThreeDotsVertical size="24" />
          {this.state.selected.length > 0 && (
            <Badge pill variant="danger">
              {this.state.selected.length}
            </Badge>
          )}
        </React.Fragment>
      ),
    },
    header: "Akcje",
    items: [
      {
        text: "Odśwież widok",
        icon: <Icon.ArrowRepeat size="16" />,
        onClick: () => {
          this.doRefreshList();
        },
      },
      {},
      {
        text: "Zaznacz wszystkie",
        icon: <Icon.SquareFill size="16" />,
        onClick: null,  // <-- is `null` because it is not implemented yet
      },
      {
        text: "Odznacz wszystkie",
        icon: <Icon.Square size="16" />,
        onClick: null,  
      },
      {
        text: "Odwróć zaznaczenie",
        icon: <Icon.SquareHalf size="16" />,
        onClick: null,
      },
      {},
      {
        className: "d-flex flex-row justify-content-between align-items-center",
        disabled: this.state.selected.length === 0,
        text: (
          <React.Fragment>
            <span>
              <Icon.Trash size="16" /> Usuń zaznaczone
            </span>
            {this.state.selected.length > 0 && (
              <Badge pill variant="danger">
                {this.state.selected.length}
              </Badge>
            )}
          </React.Fragment>
        ),
        onClick: this.doDeleteSelected,
      },
      {},
      {
        text: "Ustawienia widoku...",
        icon: <Icon.Sliders size="16" />,
        onClick: () => {
          this.setState({ modalViewOption: true });
        },
      },
    ],
  };

  return (
  .
  .
  .
  )
}

}

1. 但是，如你所见，在这个常量中，我调用了主组件（页面）的方法和状态

这还不错，因为它运行良好，但我不喜欢代码的视觉效果。我想分离 FAB 配置 - 将其放在不同的文件中 - 并将其导入页面组件。 我就是不能这样：

import FABConfig from 'path/to/file';

class Page extends Component {
.
.
.
  render() {
    .
    .
    .
    return (
      .
      .
      .
      <FloatingActionButton
        mainActionContent={<Icon.Plus size="48" />}
        onClick={() => {
          this.setState({
          examinationData: null,
          modalExamination: true,
          });
        }}
        dropdown={FABConfig}
      />
    )
  }
}

当然，它会导入，但会崩溃 - 不知道 this 是什么。

我怎样才能对组件配置进行这样的“导入”，而不会在代码中造成太多混乱：D？

Answer 1

我需要承认，你在这个问题上的方向很好:)

首先，最好不要在渲染中初始化一个巨大的对象。因为在每次重新渲染时，您的配置对象都会从头开始创建。其实，它并不是你想的那么静态的对象。

其次，您的配置对象包含许多动态内容，例如 this.state、一些回调等。如果我是您，我更愿意将此配置对象拆分为一些小组件，例如：

const Trigger = ({length, className, style}) => {
  return (
    <React.Fragment>
      <Icon.ThreeDotsVertical size="24" />
      {length > 0 && (
        <Badge pill variant="danger">
          {length}
        </Badge>
      )}
    </React.Fragment>
  )
}

在主要组件中

<Trigger 
  length={this.state.selected.length}
  className="m-0 rounded-circle noCaret badge-overlay"
  style={{ paddingLeft: "5em", paddingRight: ".5em", zIndex: 0 }}
/>
// item usage with the same thinking,
<Item
  text="Odśwież widok"
  icon={<Icon.ArrowRepeat size="16" />}
  onClick={() => {
    this.doRefreshList();
  }}
/>

这样，react 就可以计算出何时重新渲染这个 Trigger 组件。使用您的解决方案，不会有任何渲染优化。

总之，我更愿意创建一个大的 FAB 组件。在这个大组件中，我也可以拆分trigger、header 和item，因为它们最终会以某种方式加入渲染，但他们还不知道。您可以将它们制作成组件。这是解决这个问题的反应方式:)