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}添加到Typography中的TabPanel并删除value === index &&中的Typography条件，以便所有选项卡面板的子代立即呈现但被隐藏。

示例：

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>
  );
}