Ant-design: HOC와 함께 작동하지 않는`antd`의 구성 요소 목록

API의 일부로 key 를 사용하는 일부 구성 요소의 경우 모든 API 이름의 이름을 바꿀 때까지이 문제를 해결할 수 없습니다. 예

key => id
expandedKeys => expandedIds
selectedKeys => selectedIds
....

브레이킹 체인지이지만 이러한 종류의 브레이킹 체인지는 antd-codemod 로 해결할 수 있습니다.

그래서 그렇게 할 가치가 있다고 생각하십니까?

나는 이것이 좋은 생각이라고 생각하지 않습니다.

codemod 솔루션의 팬이 아닙니다.
내 관점에 불과하지만 슬프게도 대부분의 사람들에게 환영받는 것보다 더 반발 적이라고 생각합니다.

컴포넌트를 커스텀 컴포넌트에 임베드하는 것은 React의 일반적인 관행입니다.

그것을 고치고 의심의 여지없이 개미 디자인 채택이 빠르게 증가하는 것을보십시오.

Ant Design은 정말 매력적이며 react-bootstrap을 떠나고 싶은 첫 번째 라이브러리입니다.

뿡 빵뀨

API의 일부로 키를 사용하는 일부 구성 요소의 경우 모든 API 이름의 이름을 바꿀 때까지이 문제를 해결할 수 없습니다.

@ afc163 해당 API의 이름을 바꿀 수 없으면이 문제를 해결할 수 없습니다. 그러나 해결 방법을 제공 할 수 있습니다. https://github.com/react-component/collapse/issues/73#issuecomment -323626120

이것을 문서에 추가해야한다고 생각하십니까?

@benjycui 이해합니다.

어쨌든 그것은 결국 차단되지 않습니다.

시간을내어 답변 해 주셔서 감사합니다.

@benjycui 당신이 제안한 해결 방법을 조사하고 있었지만 적절한 해결책이 아니라고 생각합니다. 일반적으로 구성 요소를 래핑 할 때 내부 상태도 갖기를 원합니다. 제안 된 솔루션으로는 불가능합니다.
또한 이것은 작은 문제가 아니라고 생각합니다. 공통 구성 요소를 격리 할 수 ​​없다는 것은 응용 프로그램 내에서 동일한 코드가 여러 번 반복된다는 것을 의미합니다. 응용 프로그램이 크면 antd를 전혀 채택하지 않는 것이 좋습니다. 건설적인 비평가로 간주하십시오.
작업 해 주셔서 감사합니다!

이것은 작은 문제가 아니며 Ant Design 라이브러리를 사용하기 시작했을 때 예상하지 못한 문제라고 동의했습니다. 사용자 정의 구성 요소의 모범 사례는 React 프로젝트 전체에서 사용됩니다. 개인적으로 저는 Ant Design을 정말 좋아하지만 일부에게는 이것이 거래를 방해 할 수 있습니다. 다가오는 Ant Design v3에서이 기능이 개선되는 것을보고 싶습니다.

v3에서 이에 대한 해결책을 찾으십시오.

이 패키지가 출시 된 후 해결할 수 있습니다 (아마도).

https://github.com/ant-design/ant-design/issues/5540

메뉴를 사용하고 <Icon /> 메뉴에 React Router <Link /> 태그를 중첩하여 navbar를 생성하려고 시도했습니다 (잘못된 경우 죄송합니다).

더 선호하는 솔루션이 있습니까?

IMHO,이 스레드는 공식 문서에 있어야합니다.이 문제는 많은 사용자에게 거래를 방해 할 가능성이 있기 때문입니다.
문서는 상태가 필요하지 않은 경우 대안으로 https://github.com/react-component/collapse/issues/73#issuecomment -323626120을 언급해야합니다.

나는 문서에서 이것에 대한 언급을 확실히 감사했을 것입니다! 나는 이런 일을하려고했지만 작동하지 않기 때문에 많은 시간을 낭비했습니다.

<Collapse>
   <MyCollapseItem />
   <MyCollapseItem2 />
</Collapse>

MyCollapseItem & MyCollapseItem2 는 Collapse.Panel 렌더링합니다.

또한 react16을 사용하면 렌더에서 구성 요소 배열을 반환 할 수 있으므로이 작업을 수행하는 것이 특히 도움이 될 것입니다. 그렇지 않으면 중복 코드를 방지하는 것이 어렵습니다.

이것에 대한 업데이트가 있습니까?

이것은 실제로 우리에게 중요한 문제입니다. 내가 생각할 수있는 해결 방법이 없기 때문에 이름 변경 브레이킹 체인지에 투표하겠습니다.

여기도 동일합니다. Tabs.TabPane 및 Menu.MenuItem 합니다.

기본적으로 나머지 소품을 전달할 수있는 해결 방법을 찾았습니다. 래핑 된 구성 요소에서.

React.Children.map(children, (child, index) => { ... }) 와 함께 사용하면 해결 방법이 작동하지 않습니다. 결국 키 속성은 mykey/.0 와 같은 값을 얻습니다. 이것은 제가 작업 할 수있는 것이 아닙니다. 나는 또한 속성의 이름 변경에 투표 할 것입니다.

이 문제는 실제로 나를 antd에서 멀어지게 만들 수 있습니다. 재사용 가능한 구성 요소를 만드는 능력이 실제로 제한됩니다.

Menu 내에서 React Router를 사용하려는 모든 사람을 위해 @yunshuipiao 항목 은 # 6576에서 저에게 효과적인 솔루션을 제공했습니다.

또 다른 작은 문제 : Menu.Item을 래핑하면 하위 항목 중 하나가 적어도 세로 모드에서 선택 될 때 하위 메뉴가 선택된 것으로 표시되지 않습니다. 관련 라인 :

https://github.com/react-component/menu/blob/018d6f84d622ee140d9695ba57e7a773cf368efa/src/util.js#L40
https://github.com/react-component/menu/blob/018d6f84d622ee140d9695ba57e7a773cf368efa/src/SubMenu.jsx#L314

Collapse를 사용자 정의 구성 요소로 작업하려는 사람들을 위해 이것을 문서화하고 싶다고 생각

<Collapse>
  <Custom/>
  <Custom/>
</Collapse>


Custom.render() {
  return (
    <Panel {...this.props}>
      <div>My custom stuff here</div>
    </Panel>
  )
}

@ncknuna와 같은 문제입니다.

Menu.Item은 래핑 할 때 선택되지 않습니다. 해결 방법이 있습니까?

@Nomeyho 저는 관련 메서드를 복사 / 붙여 넣기하고 원래 검사를 주석 처리하여 ant-menu-submenu-selected 클래스가 추가되는지 여부를 결정하는 논리를 재구성 한 다음 클래스를 내 래퍼에 className 로 전달했습니다.

function loopMenuItemRecusively (children: Array<any>, keys: Array<string>, ret: { find: boolean }) {
  if (!children || ret.find) {
    return
  }
  React.Children.forEach(children, (c: any) => {
    if (ret.find) {
      return
    }
    if (c) {
      const construt = c.type
      // Original check that caused problems. I'm not concerned about omitting it
      // because I don't plan on putting a bunch of weird, large stuff in my menus...
      // if (!construt || !(construt.isSubMenu || construt.isMenuItem || construt.isMenuItemGroup)) {
      //   return;
      // }
      if (keys.indexOf(c.key) !== -1) {
        ret.find = true
      } else if (c.props && c.props.children) {
        loopMenuItemRecusively(c.props.children, keys, ret)
      }
    }
  })
}

function isChildrenSelected (children: Array<any>, selectedKeys: Array<string>) {
  const ret = { find: false }
  loopMenuItemRecusively(children, selectedKeys, ret)
  return ret.find
}

// Omitting other custom code below...
export const SubMenu = ({ children, className, selectedKeys, title, ...rest }: any) => {
  const isSelected = isChildrenSelected(children, selectedKeys)
  className = [
    className,
    isSelected ? 'ant-menu-submenu-selected' : ''
  ].filter(className => classname).join(' ')
  return (
    <SubMenu title={title} className={className} selectedKeys={selectedKeys} {...rest}>
      {children}
    </SubMenu>
  )
}

이것에 대한 수정 사항이 있습니까?

@ChuckJonas에 동의합니다.

이 문제는 실제로 나를 antd에서 멀어지게 만들 수 있습니다. 재사용 가능한 구성 요소를 만드는 능력이 실제로 제한됩니다.

다음과 같이 Menu SubMenu 및 Menu.items를 사용해야합니다.
왜? 다른 페이지에서 "CustomSubMenu"요소를 사용할 수 있기 때문에 ... 이것은 "재사용 가능한"구성 요소의 중요한 부분입니다.

_MainFile.js_

Import CustomSubMenu from './OtherFile.js';

<Menu>
    <CustomSubMenu />
    <CustomSubMenu2 />
    <CustomSubMenu3 />
</Menu>

및 OtherFile.js는 다음과 같습니다.

render(){
 return(
     <SubMenu>
           <SubMenu.item />
           <SubMenu.item2 />
            etc...etc...
     </SubMenu>
 );
}

하위 메뉴에 대한 임시 해결 방법 (간단하게 편집 됨) :

const SubMenuArray = ({ ...props }) =>
  [1, 2].map(i => (
    <Menu.SubMenu {...props} eventKey={`item_${i}`} subMenuKey={`${i}-menu-`} />
  ));

배열을 다룰 때 :

• 소품을 전달하다
• 고유해야하는 eventKey 및 subMenuKey

더 나은 접근 방식은 다음과 같습니다.

const SubMenuWrapper = ({ children, ...props }) =>
  React.Children.map(children, (child, i) =>
    React.cloneElement(child, {
      ...props,
      eventKey: `item_${i}`,
      subMenuKey: `${i}-menu-`
    })
  );

용법:

      <Menu>
        <SubMenuWrapper>
          <CustomSubMenu title={"one"}/>
          <CustomSubMenu title={"two"}/>
        </SubMenuWrapper>
      </Menu>

다시 말하지만, 배열에서 인덱스를 사용하고 싶지 않을 것이므로 프로덕션에서 사용하지 마십시오. 그러나 아이디어는 확실합니다.

• 1은 antd 구성 요소를 사용자 지정 구성 요소에 포함하는 기능입니다. 이것은 우리를위한 성공 또는 중단입니다

키의 종속성을 제거 할 수있는 방법이 있다고 생각합니다. 메뉴를 예로 들어 itemKey 소품을 도입 한 다음 context 를 사용하여 메뉴를 구현할 수 있습니다. 호환성을 유지하기 위해 메뉴는 여전히 자식을 탐색하고 key 를 itemKey 변경합니다. 동시에 selectedKeys 와 같은 props의 의미를 유지할 수도 있습니다.

@yesmeck 솔직히 말해서 ant design 사용하지 않기 때문에 시간이 걸립니다 ( 하지만 이번 주에 중요한 응용 프로그램에 사용할 계획입니다 ).

내가 이해하는 한, 해결 방법으로 새로운 context API 반응을 활용할 수 있습니까?

좋은 소식입니다

예, 문제를 해결하려면 cloneElement 대신 context 가 필요합니다.

해결책은 "React.Children.forEach"및 "React.cloneElement"를 사용하여 소품을 전달하고 새 소품을 설정하는 것이 아니라, 예를 들어 사용자 지정 기능을 사용하는 것입니다.

<Select>
  {({ onSelect }) => (
    <div>
      <Option onClick={onSelect} key="0">option1</Option>
      <Option onClick={onSelect} key="1">option2</Option>
    </div>
  )
</Select>

그리고 antd 선택 소스는 "React.Children.forEach"및 "React.cloneElement"대신 함수 자식 소품을 사용합니다.

이것이 어리석은 질문이라면 실례합니다.하지만 저는 여전히 React와 Ant Design에 익숙하지 않습니다.
이것은 실질적으로 react-redux 연결 SPA 내에서 Ant 디자인 메뉴를 사용할 수 없다는 것을 의미합니까?
그렇다면 Ant Design으로 비교적 복잡한 SPA를 어떻게 작성할 수 있습니까? 해결 방법이 있습니까?

이것에 대한 업데이트가 있습니까?

이 문제에 대한 업데이트가 있습니까? 메뉴 항목이 HOC에서 이상하게 작동합니다.

안녕하세요 ! 여기에서도 마찬가지입니다. 저는 이러한 종류의 구성 요소를 사용자 정의 할 수있는 데 정말 관심이 있습니다.
사용자 지정 Select.Option 실제로 문제가 있습니다.

이 스레드에서 제안 된 해결 방법이 작동하는 데 도움이되지 않았습니다. 빈 옵션이있는 작업 선택이 있습니다 ....

import React from 'react';
import PropTypes from 'prop-types';
import { Select } from 'antd';

const { Option } = Select;

const PictureOption = ({ label, value, pictureId, ...props }) => (
    <Option label={label} value={value} className="select-item" {...props}>
        <div className="select-item__thumbnail">
            <img src={pictureId} alt="item-img" />
        </div>
        <div className="select-item__name">{label}</div>
    </Option>
);

PictureOption.propTypes = {
    label: PropTypes.string.isRequired,
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
    pictureId: PropTypes.string.isRequired,
};

export default PictureOption;

사용자 권한에 따라 UI 요소를 렌더링하기 위해 CASL 을 사용하기 시작했습니다. 그러나 소품이 자식 요소에 올바르게 전파되지 않아 isRootMenu 함수에 대한 호출이 실패하기 때문에 SubMenu가 렌더링되지 않는다는 문제가 발생했습니다.

해결 방법으로 하위 메뉴를 상수로 정의하고 '손으로'소품에 전달했습니다.
````
render () {

// ### Administration Menu ###
const AdminMenu = ({ ...props }) => {
  return (
    <Can I="access" on="admin-content">
      <Menu.Divider {...props} />
      <Menu.SubMenu
        {...props}
        title={
          // FIXME: Icon is not rendered... :-/
          <span>
            <Icon type="tools" />
            <span>Administration</span>
          </span>
        }
        // title={<span>Administration</span>}
        key="admin">
        <Menu.Item key="users" tabIndex={0}>
          <Icon type="android" />
          <span>User Administration</span>
        </Menu.Item>
        <Menu.Item key="permissions" tabIndex={0}>
          <Icon type="lock" />
          <span>Permissions</span>
        </Menu.Item>
      </Menu.SubMenu>
    </Can>
  );
};

return (
  <Layout id="menu-component-layout">
    <Layout.Sider width="300px" collapsible="false" trigger={null}>
      <Menu theme="dark" mode="inline" defaultSelectedKeys={['user']} defaultOpenKeys={['user', 'config', 'admin']}>
        <AdminMenu />
      </Menu>
    </Layout.Sider>
    <Layout.Content id="menu-component-content">
      <h3>Page containing a side menu</h3>
    </Layout.Content>
  </Layout>
);

}
````

이 솔루션은 그다지 편리하지는 않지만 지금은 작동합니다. 그러나 여전히 아이콘이 포함 된 하위 메뉴의 제목이 올바르게 렌더링되지 않는 문제가 있습니다. 아이콘이 없습니다.

누구든지 그것을 고치는 방법을 알고 있습니까?

여기에 쇼케이스를 만들었습니다 : https://github.com/gibelium/meteor-react-antd-casl

GitHub

지벨 륨 / 유성 반응 -antd-casl

ant-design UI 라이브러리를 사용하는 meteor / react 환경에서 CASL 인증 라이브러리 사용 쇼케이스-gibelium / meteor-react-antd-casl

@gibelium 아이콘 렌더링은 실제로 자체 문제가 될 가치가 있다고 생각합니다. 리포지토리를 복제하고 아이콘을 고스트 버튼으로 바꾸려고 시도했는데 버튼 윤곽선이 표시되지만 아이콘도 버튼에서 렌더링되지 않습니다.

@gotjoshua 그 전용 문제를 만들 것입니까?

기본 확장 메뉴 항목 설정도 작동하지 않습니다. 내 해결 방법 구현은 Menu의 defaultOpenKeys 속성을 무시합니다.

그것을 해결하는 방법에 대한 아이디어가 있습니까?

이 문제는 문서에서 실제로 언급되어야합니다.이 라이브러리를 사용할 수 없다는 것을 이해하기 위해이 버그를 조사하는 데 하루 종일 낭비했습니다. 다른 개발자가 당신이 안티 패턴을 사용하고 React 키를 중계하는 것을 알아내는 데 너무 많은 시간을 낭비 할 필요가 없도록 경고를 해주세요. 그리고 이제 당신은 커뮤니티에서 사용할 수있는 많은 HOC 또는 데코레이터에 매우 취약합니다.
이것은 정말 부끄러운 일입니다. 다음 메이저 버전에서 수정하시기 바랍니다.

이 문제에 대한 업데이트가 있습니까? 메뉴 defaultOpenKeys 설정이 작동하지 않음

정말 빠르면 우선 순위가 높은 것입니다. 🔥

나는 (아마도) 구현할 수없는 유사한 사용 사례가 있습니다.
redux 저장소의 데이터를 기반으로하는 옵션으로 Select 를 렌더링하는 redux 연결 구성 요소를 만들고 싶습니다. 모든 곳에서 동일한 코드를 "복사-붙여 넣기"하고 싶지 않기 때문에 Form.getFieldDecorator 내부에서이 유형의 구성 요소를 사용하고 싶지만 connect HOC 사용으로 인해 할 수 없습니다. 그것.

편집 : 내 사용 사례에 대한 해결책을 찾았습니다. 다음과 같이 forwardRef 옵션을 사용하여 위에서 설명한 구성 요소를 만들 수있었습니다.
connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(Component);
이 솔루션은 connect HOC에만 해당되지만 React.forwardRef 를 사용하여 유사한 솔루션을 만들 수 있어야합니다.

이전 의견에 덧붙여-예, 이것이 우선 순위로 간주 될 수 있다고 생각합니다. 위에서 설명한대로 문제 중 하나를 성공적으로 해결 한 후 이제 사용자 지정 구성 요소로 래핑 된 Tabs.TabPane 구성 요소를 만들어야합니다. 매우 일반적인 사용 사례-> 래핑 구성 요소를 사용하여 권한을 확인하므로 조건이 충족되면 하위 구성 요소가 렌더링되고 그렇지 않으면 그렇지 않습니다.

이것에 대한 간단하고 작동하는 해결 방법이 있습니까?

이것에 대한 업데이트가 있습니까?

기본적으로 나머지 소품을 전달할 수있는 해결 방법을 찾았습니다. 래핑 된 구성 요소에서.

콘솔 경고가 표시됩니다. 해결 방법이 있습니까?
index.js:1437 Warning: React does not recognize the staticContext prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase staticcontext`. 실수로 상위 구성 요소에서 전달한 경우 DOM 요소에서 제거합니다.

index.js : 1437 경고 : 속성 dispatch 값이 잘못되었습니다.

같은 문제 ... Menu.Item을 래핑하기 위해 HOC로 권한 구성 요소를 만들고 싶지만 antd는 이것을 허용하지 않습니다.

나는 그 문제에 시간을 보냈다 ...

그리고 할 수 있습니다 🎉, 나머지 소품을 ie에게 전달하면됩니다. Collapse.Panel (rc-panel의 소스 코드를 확인하여 이해)

export const CustomPanel: React.FC = ({ header, children, ...props }) => {
  // do whatever you like

  return <Collapse.Panel header={header} {...props}>
    {children}
  </Collapse.Panel>
};

다음과 같이 사용하십시오.

<Collapse>
    <CustomPanel key="first" header="Header 1">Body</CustomPanel>
    <CustomPanel key="second" header="Header 2">Body</CustomPanel>
</Collapse>

4.0 릴리스에서이 솔루션을 보는 것이 멋질 것입니다!

이것은 절대적으로 최우선 순위입니다.
문자 그대로 특별한 동작이 필요할 때 (때로는 권한 부여와 같은 간단한 동작) 이러한 구성 요소를 사용할 수 없게 만듭니다.
예를 들어 동적으로로드되는 메뉴를 만들려고하므로 데이터가 도착할 때까지 이름으로 스피너가있는 비활성화 된 Menu.Item 를 문자 그대로 표시합니다.
그것은 최적이 아닙니다.

나는 그 문제에 시간을 보냈다 ...

그리고 할 수 있습니다 🎉, 나머지 소품을 ie에게 전달하면됩니다. Collapse.Panel (rc-panel의 소스 코드를 확인하여 이해)

훌륭한 솔루션이지만 (정말로 내 프로젝트에서 사용하고 있습니다) 일부 기능을 잃게됩니다.
즉, <SubMenu> 이 <Menu> 의 직계 자식이 아닌 경우 defaultOpenKeys 는 작동하지 않습니다. 😞

방금이 문제가 발생했습니다.

문서에서 확인이 필요합니다. 내 프로젝트에서 AntDesign을 사용하는 것을 진지하게 재고하게 만드는이 문제 (다른 몇 가지 사소한 문제 중에서)를 접하게되어 매우 실망 스럽습니다.

나는 그것에 대한 해결책이 아직 없다는 것을 믿을 수 없습니다.

이것은 정말 고쳐야합니다. 대부분의 개발자는 즉시 구성 요소를 사용하지 않습니다. 즉, 제공된 api로 추가 할 수없는 더 많은 기능을 통합하고 싶을 수 있습니다. 나는 HOC를 일반적이지 않거나 우선 순위가 낮은 사용 사례라고 부르지 않을 것입니다. React의 구성 적 특성의 기본입니다.

이 문제를 수정하고 수정되는 동안 사람들이 여기에서 찾은 해결 방법뿐만 아니라 정보를 공식 문서에 추가하십시오.

이 문제를 수정하고 수정되는 동안 사람들이 여기에서 찾은 해결 방법뿐만 아니라 정보를 공식 문서에 추가하십시오.

유지 관리자는 PR에 개방되어 있으며 원하는 경우 문서 업데이트에 대한 PR을 보낼 수 있으며 시간이 있습니다.

뿡뿡

나는 그 문제에 시간을 보냈다 ...

그리고 그것은 할 수 있습니다, 당신은 ie에 나머지 소품을 전달하기 만하면됩니다. Collapse.Panel (rc-panel의 소스 코드를 확인하여 이해)

export const CustomPanel: React.FC = ({ header, children, ...props }) => {
  // do whatever you like

  return <Collapse.Panel header={header} {...props}>
    {children}
  </Collapse.Panel>
};

다음과 같이 사용하십시오.

<Collapse>
    <CustomPanel key="first" header="Header 1">Body</CustomPanel>
    <CustomPanel key="second" header="Header 2">Body</CustomPanel>
</Collapse>

누군가 아래에서 무슨 일이 일어나고 있는지 설명해 주시겠습니까? 또한 구성 요소 내에서 Panel 래핑을 시도합니다.

이 코드를 사용하는 경우 : :

 <PersonalInfoPanel
                header="header"
                key={"personalInfo" + i}
                extra={genExtra()}
            />

PersonalInfoPanel 내부 :

function PersonalInfoPanel(props, ref) {
    return (
        <Panel header={props.header} key={props.key} extra={props.extra}>
...

작동하지 않습니다.

그러나 이것을 대신 사용하자마자 :

function PersonalInfoPanel(props, ref) {
    return (
        <Panel {...props}>
...

작동하기 시작합니다.
누군가 이유를 설명 할 수 있습니까?

 <Panel {...props}>
...

작동하기 시작합니다.

누군가 이유를 설명 할 수 있습니까?

내가 이해했듯이 부모 Collapse는 헤더, 키 및 추가 (작동하지 않는 예에서) 이외의 소품을 설정해야합니다. 부모 Collapse의 이러한 소품은 사용자 정의 구성 요소 내의 패널 구성 요소에 명시 적으로 배치해야합니다.

React Inspector를 사용하여 변경하고 하나씩 전달할 가능한 모든 소품을 배울 수 있지만 ... props 구문은 부모가 자식 패널에 추가하려는 모든 것이 첨부되도록합니다 ( 명시 적으로 설정해야하는 항목을 포함하되 이에 국한되지 않음)

이 문제를 해결해야합니다.
많은 (또는 거의) 개발자가 라이브러리를 사용자 정의 구성 요소에 사용하기를 원합니다.

예)
이 코드는 작동하지 않습니다. 메뉴와 메뉴 항목에는 불투명 한 소품이 필요하기 때문입니다.

      <Menu>
        { menus.map((item) => {
          if (item.to) {
            return <Menu.Item title={item.title} />;
          }
          // some codes...
          return null;
        })}
      </Menu>

트윗 담아 가기
스레드를 읽었습니까?
작동하게하려면 나머지 소품을 내부 antd 구성 요소에 전달해야합니다.

antd Menu 내부에서 antd react-router NavLinks 대한 사용자 지정 구성 요소 + 조건부 렌더링을 얻는 데 도움이 된 것은 다음과 같습니다 react-router 실제로 이것은 수정이 필요합니다. 이 스레드를 찾기까지 많은 시간이 걸립니다.

_edit- 신경 쓰지 마세요, selectedKeys가 제대로 작동하지 않습니다 _

const Nav = withRouter(() => {
  const auth = store.isAuthenticated;

  return (
    <Menu selectedKeys={[history.location.pathname]} mode="horizontal">
      <NavItem id="/">Home</NavItem>
      {auth && <NavItem id="/create">Create Post</NavItem>}
      {!auth && <NavItem id="/sign-in">Sign In</NavItem>}
      {!auth && <NavItem id="/register">Register</NavItem>}
    </Menu>
  );
});

const NavItem = ({ ...props }) => (
  <Menu.Item {...props} key={props.id}>
    <NavLink exact to={props.id}>
      {props.children}
    </NavLink>
  </Menu.Item>
);

트윗 담아 가기
스레드를 읽었습니까?
작동하게하려면 나머지 소품을 내부 antd 구성 요소에 전달해야합니다.

위의 예를 살펴볼 수 있습니까? 이 스레드에서 모든 작업을 적용했다고 생각했지만 여전히 제대로 작동하지 않습니다. props를 아래로 전달하고 Menu.Item 에 펼칩니다.하지만 활성화되면 여전히 강조 표시되지 않으며 구성 요소 트리는 다음과 같습니다.

나는 그 문제에 시간을 보냈다 ...

그리고 그것은 할 수 있습니다, 당신은 ie에 나머지 소품을 전달하기 만하면됩니다. Collapse.Panel (rc-panel의 소스 코드를 확인하여 이해)

제 경우에는 "{... props}"뒤에 "header = {calculated_header}"를 넣어야합니다. 이렇게하지 않으면 패널의 헤더가 표시되지 않습니다. 시퀀스 뒷부분에 나오는 "{... props}"가 "헤더"정보를 덮어 쓰는 것 같습니다. 처음에 "{... props}"를 넣으면 작동합니다. 이 경우 나중에 나타나는 "헤더"가 소품의 "헤더"정보를 덮어 쓰는 것 같습니다.

@ marcin-piela 응답에 대한 나의 적응은 다음과 같습니다.

export const CustomPanel: React.FC = ({ headerinfo, children, ...props }) => { // do whatever you like const calculated_header = {() => headerinfo.someinformation } return <Collapse.Panel {...props} header={calculated_header} > {children} </Collapse.Panel> };