React Material UI - 标签 - 如何禁用标签的延迟加载？

Question

我正在根据此处显示的 Material UI 示例创建一些反应选项卡：https://material-ui.com/components/tabs/。

我遇到的问题是我的选项卡延迟加载线图组件，而不是在初始页面加载时执行所有查询。有没有人对我可以在哪里进行优化以使每个选项卡在页面加载时立即加载有一些建议？

function TabPanel(props) {
  const { children, value, index} = props;
  return (
    <Typography>
      {value === index && <Box p={3}>{children}</Box>}
    </Typography>
  );
}

class SimpleTabs extends Component {
    constructor(props) {
        super(props)
        console.log(props.color)
        this.state = {
            value: 0
          };
    }

    handleChange = (event, newValue) => {
        this.setState({value: newValue});
    };

    render() {
    return (
    <div>
        <AppBar position="static">
            <Tabs value={this.state.value} onChange={this.handleChange}>
                <Tab label="Item One"/>
                <Tab label="Item Two"/>
                <Tab label="Item Three"/>
            </Tabs>
        </AppBar>
        <TabPanel value={this.state.value} index={0}>
            <LineGraph className={styles.graphBox} name={"Guest Count"} url={'http://127.0.0.1:5000/***/***'} initialFilterData={this.props.initialFilterData} filterData={this.props.filterData}/>
        </TabPanel>
        <TabPanel value={this.state.value} index={1}>
            <LineGraph className={styles.graphBox} name={"Total Sales"} url={'http://127.0.0.1:5000/***/***'} initialFilterData={this.props.initialFilterData} filterData={this.props.filterData}/>
        </TabPanel>
        <TabPanel value={this.state.value} index={2}>
            <LineGraph className={styles.graphBox} name={"Avg Check Size"} url={'http://127.0.0.1:5000/***/***'} initialFilterData={this.props.initialFilterData} filterData={this.props.filterData}/>
        </TabPanel>
    </div>
    )}
}
export default SimpleTabs;

Answer 1

将hidden={value !== index} 添加到TabPanel 中的Typography 并移除Typography 中的value === index && 条件，以便所有选项卡面板的子项立即呈现但隐藏（当前选择的除外） .

例子：

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <Typography
      component="div"
      role="tabpanel"
      hidden={value !== index}
      {...other}
    >
      <Box p={3}>{children}</Box>
    </Typography>
  );
}