在 ReactJS 中隐藏条件文本

Question

我在 NEXT.JS 的 reactjs 中使用 polished.js 中的样式组件和省略号实现了 show more/show less。好东西，无论屏幕尺寸如何，它都已经调整为 3 行。我的问题是，如果描述很少。如何隐藏“显示更多”？

Codesandbox 在这里SEE THIS

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

Answer 1

您可以使用条件渲染来渲染<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

Answer 2

我认为解决方案完全符合您的要求。如果 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;

在 ReactJS 中隐藏条件文本

Hide Condition Text in ReactJS

javascript

reactjs

styled-components

react-hooks