不斷導入反應組件

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}
      />
      .
      .
      .
    </>)
  }
}

2. 在主要組件中，我將 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 (
  .
  .
  .
  )
}

}

3. 但是，如您所見，在這個常量中，我調用了主要組件（頁面）的方法和狀態

這還不錯，因為一切都很好，但我不喜歡視覺上的代碼。 我想分離 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 ，因為它們最終會以某種方式加入渲染，但它們還不知道。 您可以使它們成為組件。 這是解決這個問題的反應方式:)