CSS 过渡不适用于反应和样式化的组件

Question

我的 css 转换有问题，我使用样式化组件，元素根据 onClick 来回触发的 react useState 的变化添加其 className，

这是代码中没有按预期工作的部分：

export const SearchProduct = ({ product }) => {
  const [descStatus, setdescStatus] = useState(false);

  const handleDesc = () => {
    setdescStatus(!descStatus);
  };

  return (
    <li>
      <Item>
        <Photo>
          <img src={`${product.productImg}`} alt={product.productTitle}></img>
        </Photo>
        <Information>
          <h3> {product.productTitle} </h3>
          <Desclook>
            <div className={descStatus ? 'active' : null} onClick={handleDesc}>
              {descStatus ? 'Close' : 'See Desc ...'}
            </div>
          </Desclook>
          {descStatus && (
            <Description --> this is part that dont work 
              className={descStatus ? 'showContent content' : 'content'}
            >
              {product.productDesc}
            </Description>
          )}

这是样式化组件部分：

const Description = styled.p`
  margin: 10px;
  padding: 0;
  transition: all 0.3s ease-in-out;

  &.content {
    height: 0;
    overflow: hidden;
  }

  &.showContent {
    height: 70px;
    overflow-y: scroll;
  }
`;

有没有人知道我的代码在这里发生了什么，因为我对反应和样式组件有点陌生

Answer 1

删除对descStatus 的检查并始终呈现<Description>。 所以不要这样：

{descStatus && (
  <Description
    className={descStatus ? 'showContent content' : 'content'}
  >
    {product.productDesc}
  </Description>
)}

这样做：

<Description
  className={descStatus ? 'showContent content' : 'content'}
>
  {product.productDesc}
</Description>

这背后的原因是 CSS 过渡需要从与当前值不同的值过渡。在您的代码中，当您在渲染前检查descStatus 是否为true 时，您的Description 组件将永远不会有className="content"，并且最初总是以70px 的高度渲染，因此不会发生过渡。

Answer 2

嘿，如果您将状态作为道具发送而不是设置 className，您可以轻松解决它 而且您应该根据先前的状态更新状态，并且由于 useState 设置器异步设置状态，您可能需要 setState 的异步版本，这与此问题无关，但在某些情况下可能会导致问题

const handleDesc = () => {
    setdescStatus(p => !p);
  };

对于样式化的组件部分

<Description --> this is part that dont work 
  show={descStatus}
  >
  {product.productDesc}
</Description>

在样式化组件中，您可以像处理它一样

import styled,{css} from 'styled-components';

const Description = styled.p`
  margin: 10px;
  padding: 0;
  transition: all 0.3s ease-in-out;

  //content class styles applied by default
  height: 0;
  overflow: hidden;

  //these styles will be applied only if show is true (css you can import from 
  //styled component as a named import)

  ${({show}) => show && css`
   height: 70px;
   overflow-y: scroll;
  `}
`;