React 警告：未知 Prop“扩展”触发 DOM 错误 – Vite 中的样式组件实现，具有阅读更多功能

Question

背景： 我正在使用 React 和 styled-components 来使用 React-slick 库实现轮播中描述的“阅读更多”功能。

目标： 目标是当单击“阅读更多”按钮时切换轮播中描述的可见性。该实现使用样式组件来处理描述的截断。

问题： 我遇到与样式组件相关的警告，表明未知的 prop“expanded”正在发送到 DOM。此外，还有一个错误，指出正在接收非布尔属性

false

的

expanded

。

代码：

import { useState } from 'react';
import Slider from 'react-slick';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

function ReviewSlider({ list }) {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: false,
  };

  ReviewSlider.propTypes = {
    list: PropTypes.arrayOf(
      PropTypes.shape({
        description: PropTypes.string.isRequired,
      })
    ).isRequired,
  };


 return (
    <Carousel {...settings}>
      {list.map((item, index) => (

            <Description expanded={index === expandedIndex}>
              {item.description}
            </Description>
            
            {item.description.length > 200 && (
              <ReadMoreButton onClick={() => handleToggleExpand(index)}>
                {expandedIndex === index ? 'Read Less' : 'Read More'}
              </ReadMoreButton>
            )}

      ))}
    </Carousel>
  );
}

这是我的

Description

和

ReadMoreButton

的样式组件：

const Description = styled.p`
  margin: 8px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: ${({ expanded }) => (expanded ? 'unset' : '5')};
  -webkit-box-orient: vertical;
  transition: -webkit-line-clamp 0.5s ease-in-out;
`;

const ReadMoreButton = styled.button`
  background: none;
  border: none;
  color: #525252;
  cursor: pointer;
  font-weight: bold;
  margin: 8px 0;
  padding: 0;
  outline: none;
  font-size: 16px;
`;

这是控制台：

警告：

styled-components：看起来像是一个未知的 prop“expanded”正在被 发送到 DOM，这可能会触发 React 控制台 错误。如果您想自动过滤未知道具，您可以 通过

<StyleSheetManager shouldForwardProp={...}>

选择该行为（连接一个 API，例如

@emotion/is-prop-valid

）或考虑使用瞬态道具（

$

自动过滤的前缀。）

错误：

警告：收到非布尔属性

false

expanded

。

如果你想将其写入 DOM，请传递一个字符串： Expanded="false" 或 Expanded={value.toString()}.

如果您曾经使用 Expanded={condition && 有条件地省略它 值}，传递扩展={条件？值：未定义} 相反。

我尝试了各种解决方案，包括调整扩展属性在样式化组件中的使用方式以及修改handleToggleExpand函数。

环境：

• 反应版本：18.2.0
• 样式组件版本：6.1.8
• 浏览器：谷歌浏览器
• IDE：Visual Studio 代码

Answer 1

确保您在组件中使用正确的道具名称和类型。例如，如果您要将扩展的 prop 传递给组件，请确保已在 PropTypes 或 TypeScript 类型中定义它。

// PropTypes example
YourComponent.propTypes = {
  expanded: PropTypes.bool.isRequired,
  // other prop types
};

====================================================== =======

// TypeScript example
interface YourComponentProps {
  expanded: boolean;
  // other prop types
}

const YourComponent: React.FC<YourComponentProps> = ({ expanded, /* other props */ }) => {
  // component logic
};

==========================================

// Correct
<YourComponent expanded={true} />

// Incorrect (typo)

<YourComponent exapnded={true} />