reactjs - ReactJs：如何不使用路由返回上一页？

Question

我有一个包含 3 个选项的菜单：

每个按钮都由不同的 React 组件表示，因此我在AdminHomeView中有 3 个 React 组件：

export default class AdminHomeView extends Component {
  constructor(props) {
    super(props);
    this.handlePartnerAreaClick = this.handlePartnerAreaClick.bind(this);
    this.handleCampaignAreaClick = this.handleCampaignAreaClick.bind(this);
    this.handleImportAreaClick = this.handleImportAreaClick.bind(this);
    this.state = {
      partnerAreaVisible: false,
      campaignAreaVisible: false,
      importAreaVisible: false,
    };
  }

  handlePartnerAreaClick() {
    this.setState({
      partnerAreaVisible: true,
      campaignAreaVisible: false,
      importAreaVisible: false,
    });
  }

  handleCampaignAreaClick() {
    this.setState({
      partnerAreaVisible: false,
      campaignAreaVisible: true,
      importAreaVisible: false,
    });
  }

  handleImportAreaClick() {
    this.setState({
      partnerAreaVisible: false,
      campaignAreaVisible: false,
      importAreaVisible: true,
    });
  }

  render() {
    return (
      <div>
        <OptionsMenu
          showPartnerArea={this.handlePartnerAreaClick}
          showCampaignArea={this.handleCampaignAreaClick}
          showImportArea={this.handleImportAreaClick}
        />
        {this.state.partnerAreaVisible ? <PartnersView /> : null}
        {this.state.campaignAreaVisible ? <CampaignsView /> : null}
        {this.state.importAreaVisible ? <ImportView /> : null}
      </div>
    );
  }
}

当我点击“Partners”按钮时，React 会渲染PartnersView组件，这就是页面的样子：（有一个所有先前创建的合作伙伴的列表，由ListPartners组件表示，还有一个按钮，显示注册新合作伙伴的表格）。

这是PartnersView组件的代码：

export default class PartnersView extends Component {
  constructor(props) {
    super(props);

    this.handleCreatePartnerClick = this.handleCreatePartnerClick.bind(this);

    this.state = {
      listPartnersVisible: true,
      formPartnerVisible: false,
      partners: [],
    };
  }

  componentDidMount() { ... }

  handleCreatePartnerClick() {
    this.setState({
      listPartnersVisible: false,
      formPartnerVisible: true,
    });
  }

  render() {
    return (
      {this.state.listPartnersVisible ? (
        <div id="list-container">
          <ListPartners partners={this.state.partners} />

          <div className="button-wrapper">
            <button onClick={this.handleCreatePartnerClick} >
              Register new partner
            </button>
          </div>
       </div>
      ) : null}

      {this.state.formPartnerVisible ? (
        <FormPartner />
      ) : null}
    );
  }
}

最后，当我单击“注册新合作伙伴”按钮时，页面如下所示：

但是，当我再次单击 TOP 菜​​单上的“合作伙伴”按钮时，我需要返回合作伙伴列表，但是现在，当我单击此按钮时，什么也没有发生（因为 React 知道用户无论如何都在 PartnerArea （第一个代码）。

有谁知道我怎样才能回到合作伙伴列表？

提前致谢。

标签： reactjs

Answer 1

我建议使用带有键模式的完全不受控制的组件。

为了在移动到不同的项目时重置值......，我们可以使用名为的特殊 React 属性key。当 akey发生变化时，React 将创建一个新的组件实例，而不是更新当前的。

您可以使用PartnersView组件上的反应键AdminHomeView来重置组件。

由于您只想简单地重置视图，因此密钥不需要有什么特别的，我怀疑将其设为随机数就足够了（它只需要与最后一个密钥不同）

<PartnersView key={Math.random()} />

但如果这是一个问题，您总是可以使用uuid之类的东西来生成真正唯一的密钥。

import { v4 as uuidv4 } from 'uuid';

...

<PartnersView key={uuidv4()} />

在代码中

render() {
  return (
    <div>
      <OptionsMenu
        showPartnerArea={this.handlePartnerAreaClick}
        showCampaignArea={this.handleCampaignAreaClick}
        showImportArea={this.handleImportAreaClick}
      />
      {this.state.partnerAreaVisible && <PartnersView key={Math.random()} />}
      {this.state.campaignAreaVisible && <CampaignsView />}
      {this.state.importAreaVisible && <ImportView />}
    </div>
  );
}