Question

我创建了一个TabHeader，它创建了一个Tab菜单。我想显示基于月份的表内容，并且创建了一个循环，该循环贯穿当前月份并回到一月份。它可以正确呈现，但是内容会根据当前URL由API动态更改。因此，当我更改链接/内容时，将加载正确的内容，但是当前标记的Tab仍是第一个链接。我正在使用Material UI，并且想使用Tab组件随附的指示器。我也在Typescript中编码。

我试图进行一些Google搜索，但似乎找不到与我有些相同的问题。

这是TabHeader：

function TabHeader(props) {
  const [value, setValue] = React.useState(0);
  const { children, header, classes } = props;

  function handleChange(event: React.ChangeEvent<{}>, newValue: number) {
    setValue(newValue);
  }

  return (
    // Removed for simplicity
      <Tabs
        value={value}
        onChange={handleChange}
        indicatorColor="primary"
        variant="scrollable"
        scrollButtons="auto"
      >  
        {children}
      </Tabs>
    // Removed for simplicity
  );
}
export default withStyles(styles)(TabHeader);

这是内容页面。在这里，我有Months类，它是Tab的呈现对象：

class Months extends React.Component {
  render() {
    const { data } = this.props;
    const months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
    return (
      <Tab
        value={data+1}
        label={months[new Date(0, 0).getMonth()+data]}
        component={Link}
        to={`/monthlyTable/${data+1}`}
      />
    );
  }
}

然后这是页面上呈现的主要内容：

class MonthlyTable extends React.Component {
  state = {
    monthlyTable: [],
    isLoading: false,
  }

  componentDidMount() {
    // Fetch content from API
  }

  componentDidUpdate(prevProps) {
    if (prevProps.match.params.monthId != this.props.match.params.monthId && this.state.isLoading != true) {
      // Re-fetch content from API
    }
  }

  render() {
    const month = new Date().getMonth();      
    const rows = [];
    for (var i = month; i >= 0; i--) {
      rows.push(<Months key={i} data={i} />);
    }
    return (
      // Removed for simplicity
      <TabHeader header={this.state.monthlyTable.Title}>
        {rows}
      </TabHeader>
      {this.state.isLoading ? '' : this.state.monthlyTable.Id && this.state.monthlyTable.Id.length > 0 && <ListTable data={this.state.monthlyTable.Id} />}
      {this.state.isLoading ? '' : this.state.monthlyTable.Dates && this.state.monthlyTable.Dates.length > 0 && <ListTable data={this.state.monthlyTable.Dates} />}
      // Removed for simplicity
    );
  }
}

最好将当前选项卡标记为用户体验，以使您知道要显示的内容。

Answer 1

在window.location上放置条件

if（window.location.pathname ===“”），然后将style或className设置为您想要设置的值。

对于导航栏示例：

<ul class="navbar-nav">
  <li class={window.location.pathname === "Home" : "nav-item active" ? "nav-item">
    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  </li>
</ul>

如何使当前选项卡突出显示？

1 个答案: