reactjs - react-animations 与 material-ui 中的网格系统有冲突
问题描述
在这段代码中,我使用了两个库。Material-Ui 和 Rect-Animation。我使用处理程序来改变状态,当状态改变时,我想显示不同的东西。我认为 AnimateOnChange 将其子项的显示更改为类似 flex 的内容,我不知道。有人能帮我吗?
import MenuItem from '@material-ui/core/MenuItem';
import React, { useEffect, useState, useRef } from 'react';
import Grid from '@material-ui/core/Grid';
import { Box } from '@material-ui/core';
import Typography from '@material-ui/core/Typography';
import { AnimateOnChange } from 'react-animation'
export default function AddCompany() {
const [flag, setFlag] = useState(true)
return (
<>
<Grid container spacing={3}>
<Grid item xs={2}></Grid>
<Grid item xs={8}>
<Grid item xs={12}>
<button onClick={()=>setFlag((pre)=>!pre)}>change page</button>
</Grid>
<AnimateOnChange>
{flag == "1" ? (
<Grid container spacing={1}>
<Grid item xs={12} md={5}></Grid>
<Grid item xs={12} md={4}>
<Typography variant="h5" gutterBottom>
page 1
</Typography>
</Grid>
</Grid>
) : (
<Grid container spacing={1}>
<Grid item xs={12} md={5}></Grid>
<Grid item xs={12} md={4}>
<Typography variant="h5" gutterBottom>
page 2
</Typography>
</Grid>
</Grid>
)}
</AnimateOnChange>
</Grid>
</Grid>
</>
);
}
解决方案
推荐阅读
- python - Pip install 在子包中构建轮子失败?
- c# - ListBoxes 不会显示来自 StreamReader 文本文件的数据
- protocol-buffers - 超时时从服务器输出哪个 gRPC 状态
- json - Yii2 RESTful API 可以返回驼峰格式的 JSON 数据吗?
- mysql - 计算分类列值mysql
- asp.net - 身份验证令牌如何在服务器中进行身份验证?
- java - 使用 NimbusLookAndFeel 将 JDialog 背景设置为透明
- python - 为相同或不同集群中的数据点创建矩阵
- php - Doctrine\DBAL\DBALException:平台 mssql 不支持限制查询中的偏移值
- c# - 首次渲染时 Blazor 组件引用为空