React Material UI - Вкладки - Как отключить отложенную загрузку вкладок? - PullRequest
Новая
       12

React Material UI - Вкладки - Как отключить отложенную загрузку вкладок?

1 голос
/ 04 февраля 2020

Я создаю несколько реагирующих вкладок на основе примера, показанного здесь для пользовательского интерфейса материала: 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;

1 Ответ

0 голосов
/ 04 февраля 2020

Добавьте 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>
  );
}

Edit Material demo

...