javascript - 如何将所有内容自动适合组件安装页面？

Question

编辑

我暂时保留这个问题，但这是我解决这个问题的方法。

您可以更改 的值numberOfBoxes以查看更改。

import * as React from "react";
import styled from "@emotion/styled";

const numberOfBoxes = 20;
const totalMarginPerBox = 2;
const containerHeight = window.innerHeight - 100;

const Component = React.memo(() => {
  const boxHeight = (containerHeight - 2 * numberOfBoxes) / numberOfBoxes;

  return (
    <Container>
      {boxHeight}px
      {Array.from({ length: numberOfBoxes }, (_, index) => (
        <Box height={boxHeight}>box {index + 1}</Box>
      ))}
    </Container>
  );
});

export default Component;

const Container = styled.div`
  width: 100%;
  height: ${containerHeight}px;

  display: flex;
  flex-direction: column;
  align-items: center;
`;

const Box = styled.div<{ height: number }>`
  ${({ height }) => `
    width: 10rem;
    height: ${height}px;
    border: 1px solid black;
    margin: ${
      totalMarginPerBox /
      // top margin = 1px ; bottom margin = 1px
      2
    }px 0;
    max-height: ${height}px;
    overflow: hidden;

    &:first-child {
      background-color: lightgreen;
    }

    &:last-child {
      background-color: tomato;
    }
  `}
`;

我正在使用react-xarrows绘制图表并使用react-zoom-pan-pinch具有能够放大和缩小图表的附加功能。

我遇到的问题是，如果图表上有很多内容，那么它会溢出页面并且用户被迫滚动才能看到它。

该Diagram组件如下所示：

import React from "react";
import Xarrow, { Xwrapper } from "react-xarrows";
import styled from "@emotion/styled";

const BOX_WIDTH = 362;

const QuestionAndOptionContainer = styled.div`
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 10000;
`;

const Node = styled.div`
  &&& {
    background: "#e3e";
    border: 1px solid #dcdcdc;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 20px 24px;
    width: ${BOX_WIDTH}px;
    display: flex;
    margin: 1rem;
  }
`;

const diagram = {
  nodes: [
    {
      id: "1",
      questionNumber: "1",
      title: "This is node number 1",
      connectionsConfig: [
        {
          id: "2"
        }
      ]
    },
    {
      id: "2",
      questionNumber: "2",
      title: "This is node number 2",
      connectionsConfig: [
        {
          id: "3"
        }
      ]
    },
    {
      id: "3",
      questionNumber: "3",
      title: "This is node number 3",
      connectionsConfig: [
        {
          id: "4"
        }
      ]
    },
    {
      id: "4",
      questionNumber: "4",
      title: "This is node number 4",
      connectionsConfig: [
        {
          id: "5"
        }
      ]
    },
    {
      id: "5",
      questionNumber: "5",
      title: "This is node number 5"
    }
  ]
};

const Diagram = React.memo(() => {
  const handleRenderQuestionsTree = React.useCallback(
    ({ id, title, connectionsConfig }) => {
      return (
        <QuestionAndOptionContainer>
          <Node id={id}>
            <div>{title}</div>
          </Node>
          {!!connectionsConfig?.length && (
            <>
              {connectionsConfig.map(({ id: nextNodeId }) => (
                <Xarrow
                  color={"#000000"}
                  headSize={7}
                  tailSize={2}
                  strokeWidth={1}
                  lineColor={"#000000"}
                  start={id}
                  end={nextNodeId}
                />
              ))}
            </>
          )}
        </QuestionAndOptionContainer>
      );
    },
    []
  );

  return <Xwrapper>{diagram.nodes.map(handleRenderQuestionsTree)}</Xwrapper>;
});

export default Diagram;

现在想象一下，这diagram.nodes要大得多：

const diagram = {
  nodes: [
    {
      id: "1",
      questionNumber: "1",
      title: "This is node number 1",
      connectionsConfig: [
        {
          id: "2"
        }
      ]
    },
    {
      id: "2",
      questionNumber: "2",
      title: "This is node number 2",
      connectionsConfig: [
        {
          id: "3"
        }
      ]
    },
    {
      id: "3",
      questionNumber: "3",
      title: "This is node number 3",
      connectionsConfig: [
        {
          id: "4"
        }
      ]
    },
    {
      id: "4",
      questionNumber: "4",
      title: "This is node number 4",
      connectionsConfig: [
        {
          id: "5"
        }
      ]
    },
    {
      id: "5",
      questionNumber: "5",
      title: "This is node number 5",
      connectionsConfig: [
        {
          id: "6"
        }
      ]
    },
    {
      id: "6",
      questionNumber: "6",
      title: "This is node number 6",
      connectionsConfig: [
        {
          id: "7"
        }
      ]
    },
    {
      id: "7",
      questionNumber: "7",
      title: "This is node number 7",
      connectionsConfig: [
        {
          id: "8"
        }
      ]
    },
    {
      id: "8",
      questionNumber: "8",
      title: "This is node number 8",
      connectionsConfig: [
        {
          id: "9"
        }
      ]
    },
    {
      id: "9",
      questionNumber: "9",
      title: "This is node number 9",
      connectionsConfig: [
        {
          id: "10"
        }
      ]
    },
    {
      id: "10",
      questionNumber: "10",
      title: "This is node number 10",
      connectionsConfig: [
        {
          id: "11"
        }
      ]
    },
    {
      id: "11",
      questionNumber: "11",
      title: "This is node number 11"
    }
  ]
};

内容溢出页面，我无法全部看到。

我正在寻找一种动态方式来确保内容适合页面，并且，如果用户想要，他们可以放大他们想要的所有内容。

唯一想到的是计算BOX_WIDTHa 中所有元素的（和高度）useEffect，这将计算可用节点的数量并将其与窗口大小进行比较，例如height: window.innerHeight / diagram.nodes.length}px;，但效果不太好。

我可以在这里做什么？

标签： javascriptreactjs