Question

我正在使用React-Router v4在React上构建应用程序，这是一个仪表板，可帮助用户查看和可视化其财务交易。在我的应用程序中，我有一个3选项切换开关组件，每个选项都导致一条不同的路线（/dashboard/visualization，/dashboard/manage，/dashboard/history）。与props一样，它需要一个selectedOption值，该值控制用户看到的所选切换选项。它需要预先设置默认值。

当用户单击3个选项之一时，我希望将路线更改为该选项。为此，我目前将切换开关组件包装在withRouter()高阶组件中，以为其提供history对象，并在this.props.history.push()回调中使用onSelectOption ，这是此React-Router文章中提到的最佳实践，很多人都引用了https://tylermcginnis.com/react-router-programmatically-navigate/。

我的问题：我的切换开关需要一个默认的选定选项，这导致我的状态和URL /路由被分离。我将单击一个选项，它将把我发送到正确的路线，但是无论我单击哪个选项，路线更改都会重新安装我的切换组件，该组件会将state重置为默认"manage" 。因此，如果我在/dashboard/manage上，请使用state { value: "manage"}。我单击历史记录，this.props.history.push确实将我发送到/dashboard/history，但是由于我的切换开关组件在新路径上重新渲染，因此切换停留在默认的"manage"设置上。仅当我第二次单击“历史记录”时，切换开关才真正移动并动画化为“历史记录”，因为已经设置了路径，因此<MultiToggle />不会重新渲染。 当路线切换时，如何解决切换组件自动还原为默认渲染的问题？

我在下面的代码中尝试了一种破解方法，其中我使用componentDidMount根据当前路线人为设置状态-哪种方法有效，但是我没有从切换选择中获取动画，这使得该应用程序真的很静态。

我的组件

import React from 'react';
import MultiToggle from 'react-multi-toggle';
import { Link, Redirect, withRouter } from 'react-router-dom';


const groupOptions = [
  {
    displayName: 'Visualization',
    value: "visualization"
  },
  {
    displayName: 'Manage',
    value: "manage"
  },
  {
    displayName: 'History',
    value: "history"
  },
];

class MultiToggle extends React.Component {
  state = {
    value: "history"
  }

  onSelect = (value) => {
    this.props.history.push(`/dashboard/${value}`);
    this.setState({ 
        value: value 
    }); 
  }

  componentDidMount() {
    //MY HACK
    let currentRoute = this.props.history.location.pathname.substring(11);

    this.setState({ 
      value: currentRoute 
    });

  }

  render() {
    return (
      <MultiToggle
        options={groupOptions}
        selectedOption={this.state.value}
        onSelectOption={this.onSelect}
      />
    );
  }

}

export default withRouter(DashboardMultiToggleSwitch);

React-Router默认切换开关状态从/ Route

0 个答案: