无法读取未定义的属性（读取 'header'）

Question

所以我尝试使用此中的自定义折叠，当我包含它时 无法读取未定义的属性（读取 'header'）问题发生了。我不知道发生了什么，它在 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>

Answer 1

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

const CustomCollapse = (props) => {

而不是

const CustomCollapse = ({props}) => {

Answer 2

在 CustomCollapse 的声明中：

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

应该是

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

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

的道具

或者您可以声明：

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

无法读取未定义的属性（读取 'header'）

Cannot read properties of undefined (reading 'header')

reactjs

antd