无法读取未定义的属性（读取“标题”）答案

【问题标题】：Cannot read properties of undefined (reading 'header')无法读取未定义的属性（读取“标题”）
【发布时间】：2021-10-28 09:44:47
【问题描述】：

所以我尝试使用来自这个stackoverflow post 的自定义折叠，当我包含它时无法读取未定义的属性（读取'标题'）问题发生了。我不知道发生了什么，它在Codepen 上运行良好。
这是代码：
基本上是一样的，我只是加了一些图标。

const CustomCollapse = ({props}) => {
  const [disabled, setDisabled] = useState(true);
  return (
    <StyledCollapse onChange={() => setDisabled(prev => !prev)}>
      <AntCollapse.Panel
        header={props.header}
        key="1"
        showArrow={false}
        bordered={false}
        extra={
          <span>
            <span style={{ color: "#0076de", float: "right" }}>
              {disabled ? <div id="themeBox"><p>+10</p></div> : <img src={arrowDownIcon} alt="" style={{objectFit:'contain'}} />}
            </span>
          </span>
        }
      >
        {props.children}
      </AntCollapse.Panel>
    </StyledCollapse>
  );
};

这里是我使用Collapse的地方：

<div className={styles.telegramLinks}>
     <AntCollapse header="test">
        <h1>test</h1>
     </AntCollapse>
</div>

【问题讨论】：

标签： reactjs antd

【解决方案1】：

在CustomCollapse的声明中：

const CustomCollapse = ({props}) => {
 // ...
};

应该是

const CustomCollapse = (props) => {
 // ...
 // use `props.header`
};

否则就好像在组件上寻找一个名为props的属性，即一个名为props的props。

您也可以声明：

const CustomCollapse = ({ header }) => {
 // ...
 // use `header` directly instead of `props.header` 
};

【讨论】：

成功了，谢谢！我写了({props})，因为我有一条红线写着Must use destructuring props assignment，所以我添加了花括号来删除错误，不知道这会使事情无法正常工作。

【解决方案2】：

我相信如果你想以这种方式获得道具，你需要使用：

const CustomCollapse = (props) => {

而不是

const CustomCollapse = ({props}) => {

【讨论】：