在 ReactJS 中隐藏条件文本答案

【问题标题】：Hide Condition Text in ReactJS在 ReactJS 中隐藏条件文本
【发布时间】：2021-10-07 14:03:02
【问题描述】：

我已经在 NEXT.JS 中使用 styled-components 和来自 Polish.js 的省略号在 reactjs 中实现了显示更多/显示更少。好东西，不管屏幕大小，它已经调整到 3 行。我的问题是，如果描述很少。如何隐藏“显示更多”？

代码沙盒在这里SEE THIS

const DescriptionText = styled.div`
  font-size: 14px;
  margin-top: 20px;
  margin-bottom: 20px;
  ${({ showMore }) => showMore && ellipsis(undefined, 3)}
`;

【问题讨论】：

使用this method计算行数，然后简单地进行条件渲染。

标签： javascript reactjs react-hooks styled-components

【解决方案1】：

我认为正是您所要求的解决方案。如果 3 行可见或更少，则隐藏按钮。如果是小屏幕，它是自适应的。 woking example

Wrapped.js

const Description = () => {
  const [isShowMore, setIsShowMore] = useState(true);
  const [hasMore, setHasMore] = useState(false);
  const [bodyWidth, setBodyWidth] = useState(0);
  const ref = useRef(null);

  const toggleReadMore = () => setIsShowMore(show => !show);

  useEffect(() => {
    const resize = () => {
      const getWidth = document.body.clientWidth;
      setBodyWidth(getWidth);
    };
    window.addEventListener('resize', resize);

    const text = ref.current;
    const hiddenText = text.scrollHeight;

    const visibleText = +getComputedStyle(text)
      .getPropertyValue('height')
      .replace('px', '');

    if (visibleText < hiddenText) {
      setHasMore(true);
    } else {
      setHasMore(false);
    }

    return () => {
      window.removeEventListener('resize', resize);
    };
  }, [bodyWidth]);

  useEffect(() => {
    const getWidth = document.body.clientWidth;
    setBodyWidth(getWidth);
  }, []);

  return (
    <MainContainer>
      <TitleText>Description</TitleText>
      <DescriptionText showMore={isShowMore} ref={ref}>
        {text}
      </DescriptionText>
      {hasMore ? (
        <ShowMoreText onClick={toggleReadMore}>
          {isShowMore ? 'Show more...' : 'Show less'}
        </ShowMoreText>
      ) : null}
    </MainContainer>
  );
};

export default Description;

【讨论】：

我猜，next.js 是基于 react.js

【解决方案2】：

您可以使用条件渲染来渲染<ShowMoreText>。您可以通过将元素的offsetHeight 除以其lineHeight 来获得行数。

const Description = () => {
  const [isShowMore, setIsShowMore] = useState(true);
  const [lineCount, setLineCount] = useState(0);
  const ref = useRef(null);
  const toggleReadMore = () => setIsShowMore((show) => !show);

  useEffect(() => {
    let descp = ref.current;
    let lc =
      descp.offsetHeight /
      parseInt(getComputedStyle(descp).getPropertyValue("line-height"), 10);
    console.log(lc);
    setLineCount(lc);
  }, []);

  return (
    <MainContainer>
      <TitleText>Description</TitleText>
      <DescriptionText ref={ref} showMore={isShowMore}>
        {text}
      </DescriptionText>
      {lineCount >= 3 ? (
        <ShowMoreText onClick={toggleReadMore}>
          {isShowMore ? "Show more..." : "Show less"}
        </ShowMoreText>
      ) : null}
    </MainContainer>
  );
};

代码沙盒 - https://codesandbox.io/s/show-more-based-on-height-in-react-forked-8wqob?file=/Wrapper.js

注意：您可能需要为<DescriptionText> 明确指定line-height。

【讨论】：

我不认为它在所有情况下都是 271，因为在小屏幕上它会有所不同