[TIL] 2022-10-18

Ant Design Collapse 만지다가 이런 오류를 만났다.

• 'eslint-disable-next-line react/no-unstable-nested-components'

• Disallow creating unstable components inside components (react/no-unstable-nested-components)

리액트의 nested pattern에 관한 건데,
견고한 코드를 짜기 위한 규칙이라고 한다.
회사에서 쓰는 esLint 규칙을 빡빡하게 해놔서 걸리는 거라고.

nested 규칙에 대한 건 찾아봤는데 제일 잘 설명해 놓은 것은 아래의 블로그.
[ESLint] react/no-unstable-nested-components

에러를 해결하는 또 다른 방법으로는 esLint의 옵션을 바꾸는 방법이 있다.
(물론 회사에선 안 됨...)

• Rule Options

"react/no-unstable-nested-components": [
  "off" | "warn" | "error",
  { "allowAsProps": true | false }
]

신입아기는 결국 그냥 물어봐서 해결햇서요...^^

expandIcon 부분에 직접 넣으면 안 된다는 거라서 Caret을 따로 선언해서 할당하고 이것을 넣어주었더니 잘 돌아갔다...^^

const Caret = ({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />;

const CalculateInfoPage: React.FC = () => {
  return (
    <Collapse accordion expandIconPosition="end" expandIcon={Caret}>
      <Panel header="This is panel header 1" key="1">
        <p>{text}</p>
      </Panel>
      <Panel header="This is panel header 2" key="2">
        <p>{text}</p>
      </Panel>
      <Panel header="This is panel header 3" key="3">
        <p>{text}</p>
      </Panel>
    </Collapse>
  );
};

export default CalculateInfoPage;