1

我正在使用一个名为 terriajs 的第三方库，它使我可以访问工作区中的顶级组件和父组件。但是，内部组件位于 node_modules 文件夹中。

例如，我可以访问作为主要反应组件的 StandardUserInterface 组件。它从 node_modules 文件夹中导入某些组件，例如 SidePanel 组件。SidePanel 组件在内部导入一个 SearchBox 组件。我需要更改此 SearchBox 组件的实现。该库没有为我提供足够的属性来更改此功能。

因此，似乎我最好的选择是分叉库并添加我的自定义更改。我不想这样做，因为我会丢失他们未来的所有更新。有没有其他方法可以在不分叉和覆盖它们在 React 中的实现的情况下实现我的要求？

下面是简化版的 SidePanel 供参考：

const SidePanel = createReactClass({
    displayName: "SidePanel",
    mixins: [ObserveModelMixin],

    propTypes: {
      terria: PropTypes.object.isRequired,
      viewState: PropTypes.object.isRequired
    },

    changeSearchText(newText) {
      this.props.viewState.searchState.locationSearchText = newText;

      if (newText.length === 0) {
        removeMarker(this.props.terria);
      }
    },

    search() {
      this.props.viewState.searchState.searchLocations();
    },

    startLocationSearch() {
      this.props.viewState.searchState.showLocationSearchResults = true;
    },

    render() {
      const searchState = this.props.viewState.searchState;
      const emptyWorkbenchValue = this.props.terria.language[
        "EmptyWorkbenchMessage"
      ];
      const emptyWorkbench = getReactElementFromContents(emptyWorkbenchValue);

      return (
          <div className={Styles.header}>

            <SearchBox
              onSearchTextChanged={this.changeSearchText}
              onDoSearch={this.search}
              onFocus={this.startLocationSearch}
              searchText={searchState.locationSearchText}
              placeholder="Search for locations"
            />
        </div>
      );
    }
4

1 回答 1

1

您应该将原始组件代码复制到一个新组件中，添加您需要的更改，然后将其导入您的应用程序。

于 2020-02-26T11:58:02.113 回答