reactjs - 如何在 React 中将高度设置为动态自动？

Question

我面临着将我的列表高度从 300 动态更改为自动的问题。我希望实现的就像一个帖子，你可以点击阅读更多阅读更多，否则每个帖子的高度都是固定的。就像一个展开和折叠没有折叠。下面的代码是我尝试过的。希望有人可以帮助我谢谢。

const IndexPage: React.FC<IndexPageProps> = ({}) => {
  const classes = useStyles();
  const [{ data, fetching }] = useGetGroupsQuery();

  const [expandedArray, setExpandedArray] = useState([]);

  const handleExpandClick = (id: number) => {
    const tempArray = expandedArray;
    tempArray.push(id);
    setExpandedArray(tempArray);
    console.log(expandedArray);
  };

  const getHeight = (id: number) => {
    console.log("id", id);
    if (expandedArray.indexOf(id) === -1) {
      return { height: 300 };
    } else {
      return { height: "auto" };
    }
  };

  return (
    <Layout variant="regular">
      {!fetching && data ? (
        <Grid container direction="column" spacing={2}>
          {data.groups.map((group) => {
            return (
              <Grid xs={12} item key={group.id}>
                <Paper>
                  <Box className={classes.paddedBox}>
                    <Box overflow="hidden" style={getHeight(group.id)}>
                      <NextLink
                        href="/class/cliques/[group.slug]"
                        as={`/class/cliques/${group.slug}`}
                      >
                        <Typography variant="h4" className={classes.groupName}>
                          <Link color="inherit">{group.name}</Link>
                        </Typography>
                      </NextLink>
                      <Typography variant="h5">Description</Typography>
                      <Typography className={classes.preline}>
                        {group.description}
                      </Typography>
                      <Typography variant="h5">Requirements</Typography>
                      <Typography className={classes.preline}>
                        {group.requirements}
                      </Typography>
                      <Box
                        className={classes.expandMoreBlock}
                        onClick={() => handleExpandClick(group.id)}
                      >
                        <IconButton className={classes.expandMore}>
                          <ExpandMoreRounded />
                        </IconButton>
                      </Box>
                    </Box>
                  </Box>
                </Paper>
              </Grid>
            );
          })}
        </Grid>
      ) : null}
    </Layout>
  );
};

标签： reactjstypescriptmaterial-ui

Answer 1

makeStyles您可以根据您的道具传递一个函数以更改 css。这里是文档的链接

您的组件可能如下所示：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import { Box } from "@material-ui/core";

const useStyles = makeStyles({
  dynamicHeight: {
    height: ({ height }: { height: boolean }) => (height ? 300 : 50)
  }
});
const DynamicHeight: React.FC<{ text: string }> = ({ text }) => {
  const [height, setHeight] = React.useState(false);
  const classes = useStyles({ height: height });
  return (
    <Box
      overflow="hidden"
      className={classes.dynamicHeight}
      onClick={() => setHeight(true)}
    >
      {text}
    </Box>
  );
};
export default DynamicHeight;

然后你会在你的数据映射中调用这个组件：

import "./styles.css";
import React from "react";
import { Grid, Paper } from "@material-ui/core";
import DynamicHeight from "./DynamicHeight";

interface Data {
  id: number;
  text: string;
}

const data: Data[] = [
  {
    id: 1,
    text: "Lorem ipsum dolor sit amet."
  },
  {
    id: 2,
    text: "Lorem ipsum dolor sit amet."
  }
];

const App = () => {
  return (
    <Grid container direction="column" spacing={2}>
      <Grid xs={12}>
        <Paper>
          {data.map((item) => (
            <DynamicHeight key={item.id} text={item.text} />
          ))}
        </Paper>
      </Grid>
    </Grid>
  );
};

export default App;

这是一个简化的示例，但我希望您能掌握要点并将其应用到您的组件中。

活生生的例子