Ant-design: قائمة بمكونات "antd" التي لا يمكنها العمل مع HOC

من الصعب ، بالنسبة لبعض المكونات التي تستخدم key كجزء من واجهة برمجة التطبيقات ، لا يمكننا إصلاح ذلك حتى نعيد تسمية جميع أسماء API. على سبيل المثال

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

سيكون تغييرًا جذريًا ، ولكن يمكن حل هذا النوع من التغيير الفاصل عن طريق

إذن ، هل تعتقد أن الأمر يستحق القيام بذلك؟

لا أعتقد أن هذه فكرة جيدة.

لست من محبي حل codemod.
مجرد وجهة نظري ، لكني أعتقد أنه للأسف بالنسبة لمعظم الناس ، فإن الأمر مثير للاشمئزاز أكثر من الترحيب.

يعد تضمين المكونات في مكونات مخصصة ممارسة شائعة في React.

يرجى إصلاح ذلك والاطلاع على زيادة اعتماد تصميم النمل بسرعة دون أدنى شك.

تعتبر Ant Design جذابة حقًا وهي أول مكتبة تجعلني أرغب في ترك رد فعل التمهيد.

تضمين التغريدة

من الصعب ، بالنسبة لبعض المكونات التي تستخدم المفتاح كجزء من API ، لا يمكننا إصلاح ذلك حتى نعيد تسمية جميع أسماء API.

@ afc163 إذا لم نتمكن من إعادة تسمية واجهات برمجة التطبيقات هذه ، فلا يمكننا حل هذه المشكلة. ولكن يمكننا توفير حل بديل ، راجع: https://github.com/react-component/collapse/issues/73#issuecomment -323626120

هل تعتقد أنه يجب علينا إضافة هذا إلى الوثائق؟

benjycui أفهم.

على أي حال ، فإنه لا يمنع بعد كل شيء.

شكرا لأخذ الوقت في الرد.

benjycui كنت أقوم بالتحقيق في الحل الذي اقترحته ولكني أعتقد أنه ليس حلاً مناسبًا. عادة عندما تقوم بلف أحد المكونات ، فإنك تريد أيضًا أن يكون لديك حالة داخلية. مع الحل المقترح هذا غير ممكن.
كما أعتقد أن هذه ليست مشكلة صغيرة. عدم القدرة على عزل المكونات المشتركة يعني تكرار نفس الشفرة مرات عديدة داخل التطبيق. إذا كان التطبيق كبيرًا ، فسأفكر في عدم اعتماده على الإطلاق. من فضلك اعتبر هذا ناقد بناء
شكرا لعملكم!

تمت الموافقة على أن هذه ليست مشكلة صغيرة وهي شيء لم أكن أتوقعه عندما بدأت استخدام مكتبة Ant Design ، يتم استخدام الممارسة الجيدة للمكونات المخصصة في جميع مشاريع React. أنا شخصياً أحب Ant Design ، لكن بالنسبة للبعض ، يمكن أن يكون هذا بمثابة صفقة. أود حقًا رؤية هذا يتحسن في إصدار Ant Design v3 القادم.

يرجى إيجاد حل لهذا في الإصدار 3.

يمكن حلها بعد إصدار هذه الحزمة (ربما).

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

واجهت هذه المحاولة (آسف إذا كان هذا خاطئًا) لإنشاء شريط التنقل باستخدام القائمة وتداخل علامات React Router <Link /> في القائمة مع <Icon /> .

هل هناك حل أفضل؟

IMHO ، يجب أن يكون هذا الموضوع في المستندات الرسمية ، لأن هذه المشكلة من المحتمل أن تكون بمثابة صفقة لكثير من المستخدمين.
يجب أن تذكر المستندات أيضًا https://github.com/react-component/collapse/issues/73#issuecomment -323626120 كبديل عندما لا تكون هناك حاجة إلى حالة.

كنت سأقدر بالتأكيد ذكر هذا في الوثائق! كنت أحاول أن أفعل شيئًا كهذا وأهدرت الكثير من الوقت لأنه لا يعمل.

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

حيث يعرض MyCollapseItem & MyCollapseItem2 Collapse.Panel .

أيضًا ، يتيح لك رد فعل 16 الآن إرجاع مصفوفات المكونات من التصيير ، وستكون القدرة على القيام بذلك مفيدة بشكل خاص. خلاف ذلك ، منع تكرار التعليمات البرمجية يمثل تحديا.

أي تحديثات على هذا؟

هذه في الواقع قضية رئيسية بالنسبة لنا. سأصوت لصالح تغيير إعادة التسمية ، حيث لا يوجد حل بديل يمكنني التفكير فيه.

نفس الشيء هنا - أحتاج ذلك مقابل Tabs.TabPane و Menu.MenuItem .

لقد وجدت حلاً بشكل أساسي يمكنك تمرير بقية الدعائم به من المكون المغلف.

إذا كنت تستخدم مع React.Children.map(children, (child, index) => { ... }) فإن الحل لا يعمل ، على الأقل بالنسبة لي. في النهاية ، تحصل خاصية المفتاح على قيمة مثل mykey/.0 وهو ليس ما يمكنني عمله. سأصوت أيضًا لتغيير الاسم على العقارات.

هذه المشكلة قد تدفعني في الواقع بعيدًا عن antd ... أو على الأقل تجعلني أجد بديلاً لهذه المكونات. إنه يحد حقًا من قدرتك على إنشاء مكونات قابلة لإعادة الاستخدام.

لأي شخص يحاول استخدام React Router داخل قائمة ، فقد كان لدى

مشكلة صغيرة أخرى: التفاف القائمة. يمنع العنصر أيضًا القائمة الفرعية من الظهور المحددة عند تحديد أحد العناصر الفرعية ، على الأقل في الوضع الرأسي. الخطوط ذات الصلة:

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 يعمل مع مكون مخصص: على غرار ما ذكرته jfreixa ، فقط قم بتمرير جميع

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


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

نفس المشكلة منncknuna.

Menu. لم يتم تحديد العنصر عند لفه. ايوجد اي عمل في هذه المنطقه؟

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 .

yesmeck لأكون صادقًا ، ant design ( لكنني أخطط لاستخدامه لتطبيق مهم خلال هذا الأسبوع ).

بقدر ما أفهم ، هل يمكنك الاستفادة من رد الفعل الجديد context API كحل بديل؟

هذا خبر عظيم

نعم ، نحتاج إلى context بدلاً من cloneElement لحل المشكلة.

أعتقد أن الحل هو عدم استخدام "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 select source يستخدمان أيضًا دعامات الأطفال بدلاً من "React.Children.forEach" و "React.cloneElement"

معذرةً إذا كان هذا سؤالاً غبيًا ، لكنني ما زلت جديدًا إلى حد ما على React و Ant Design.
هل هذا يعني أنه من الناحية العملية لا يمكننا استخدام قوائم تصميم Ant داخل منتجع صحي متصل بالتفاعل وإعادة الإرسال؟
إذا كان الأمر كذلك ، كيف يمكنك كتابة SPA معقدة نسبيًا باستخدام Ant Design؟ ايوجد اي عمل في هذه المنطقه؟

أي تحديث على هذا؟

هل يوجد أي تحديث لهذه القضية؟ عنصر القائمة يتصرف بشكل غريب مع المراجع الأعلى.

مرحبا ! نفس الشيء هنا ، أنا مهتم حقًا بأن أكون قادرًا على تخصيص هذا النوع من المكونات.
في الواقع وجود مشكلة مع مخصص 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;

بدأت في استخدام CASL لعرض عناصر واجهة المستخدم بناءً على إذن المستخدم. ومع ذلك ، واجهت مشكلة عدم عرض القوائم الفرعية بسبب فشل استدعاء وظيفة isRootMenu نظرًا لعدم نشر الدعائم بشكل صحيح في العناصر الفرعية.

كحل بديل ، قمت بتعريف القوائم الفرعية على أنها ثوابت وتمريرها في الدعائم "يدويًا":
""
يجعل() {

// ### 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>
);

}
""

هذا الحل ليس مفيدًا جدًا ولكنه يعمل في الوقت الحالي. ومع ذلك ، ما زلت أواجه مشكلة أن عنوان SubMenu الذي يتضمن رمزًا لم يتم تقديمه بشكل صحيح. الرمز مفقود.

هل لدى أي شخص فكرة عن كيفية إصلاح ذلك؟

لقد أنشأت عرضًا هنا: https://github.com/gibelium/meteor-react-antd-casl

جيثب

جبليوم / نيزك-تفاعل-أنتد-كاسل

عرض لاستخدام مكتبة ترخيص CASL في بيئة نيزك / تفاعل باستخدام مكتبة واجهة مستخدم ant-design - gibelium / meteor-reaction-antd-casl

gibelium أعتقد أن عرض الرمز يستحق

gotjoshua هل ستنشئ هذه المشكلة المخصصة؟

لا يعمل أيضًا تعيين عناصر القائمة الموسعة الافتراضية. يتجاهل تطبيق الحل الخاص بي الخاصية defaultOpenKeys القائمة.

أي أفكار كيف تحل ذلك؟

يجب ذكر هذه المشكلة حقًا في المستندات ، لقد أهدرت يوم عمل كاملًا في البحث عن هذا الخطأ فقط لفهم أن هذه المكتبة غير قابلة للاستخدام بالنسبة لي. برجاء رجاءً رجاءً ضع تحذيرًا حتى لا يضطر المطورون الآخرون إلى إضاعة الكثير من الوقت في اكتشاف أنك استخدمت نمطًا مضادًا للترحيل على مفاتيح React ، والآن أنت ضعيف جدًا للعديد من HOC أو مصممي الديكور المتاحين للمجتمع.
هذا حقا مخزي. آمل أن تصلحه في نسختك الرئيسية التالية.

هل يوجد أي تحديث لهذه القضية؟ تعيين القائمة الافتراضية OpenKeys لا تعمل

تمامًا شيء يجب اعتباره سريعًا حقًا أولوية عالية. 🔥

لدي حالة استخدام مماثلة والتي (ربما) لست قادرًا على تنفيذها.
أرغب في إنشاء مكون متصل بإرجاع والذي يعرض 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 تحذير: قيمة غير صالحة لـ prop dispatch on

نفس المشكلة ... أريد إنشاء مكون إذن مثل HOC للالتفاف Menu.Item لكن antd لا يسمح بهذا ... حزين

قضيت بعض الوقت في هذه القضية ...

وهو قابل للتنفيذ 🎉 ، ما عليك سوى تمرير دعامات الراحة إلى ie. Collapse.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 (تحقق من كود المصدر الخاص بلوحة التحكم عن بعد لفهمها)

في حين أنه حل رائع (حقًا! أستخدمه في مشاريعي) ، فإنك تفقد بعض الوظائف.
أي إذا لم يكن <SubMenu> تابعًا مباشرًا لـ <Menu> ، فلن يعمل defaultOpenKeys . 😞

واجهت للتو هذه المشكلة لمعلوماتك.

بالتأكيد يحتاج إلى الإقرار في الوثائق. من المحبط للغاية مواجهة هذه المشكلة (من بين عدد قليل جدًا من المشكلات الثانوية الأخرى) التي تجعلني أعيد النظر بجدية في استخدام AntDesign في مشاريعي.

لا أصدق أنه لا يوجد حتى الآن حل لذلك.

هذا حقا يحتاج التصليح. معظم المطورين لا يستخدمون فقط المكونات مباشرة. هذا يعني أننا قد نرغب في دمج المزيد من الوظائف التي لا يمكن إضافتها بطريقة أخرى على الرغم من توفير واجهة برمجة التطبيقات. لن أسمي حالة HOC حالة استخدام غير شائعة أو ذات أولوية منخفضة. إنه أساسي للطبيعة التركيبية لـ React.

من فضلك ، أصلح هذا ، وأثناء إصلاحه ، أضف المعلومات ، بالإضافة إلى الحلول التي وجدها الأشخاص هنا في مستنداتك الرسمية.

من فضلك ، أصلح هذا ، وأثناء إصلاحه ، أضف المعلومات ، بالإضافة إلى الحلول التي وجدها الأشخاص هنا في مستنداتك الرسمية.

المشرفون على الصيانة مفتوحون للعلاقات العامة ، ويمكنك أيضًا إرسال PR لتحديث المستندات إذا كنت تريد ولديك الوقت للقيام بذلك.

@ afc163

قضيت بعض الوقت في هذه القضية ...

وهو قابل للتنفيذ ، ما عليك سوى تمرير دعامات الراحة إلى ie. Collapse.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 الداخلي لجعله يعمل.

هذا ما نجح في الحصول على مكونات مخصصة + عرض مشروط لـ react-router NavLinks داخل antd Menu ، على الرغم من أن هذا يحتاج إلى إصلاح - لقد أهدرت ذلك الكثير من الوقت قبل العثور على هذا الموضوع.

_ تحرير- لا تهتم ، المفاتيح المحددة لا تعمل بشكل صحيح

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 الداخلي لجعله يعمل.

هل يمكنك إلقاء نظرة على المثال أعلاه؟ اعتقدت أنني قمت بتطبيق كل عمل موجود في هذا الموضوع لكنه لا يزال لا يعمل بشكل صحيح. أقوم بتمرير الدعائم لأسفل ونشرها على Menu.Item لكنها لا تزال غير بارزة عندما تكون نشطة ، وتبدو شجرة المكونات هكذا

قضيت بعض الوقت في هذه القضية ...

وهو قابل للتنفيذ ، ما عليك سوى تمرير دعامات الراحة إلى ie. Collapse.Panel (تحقق من كود المصدر الخاص بلوحة التحكم عن بعد لفهمها)

في حالتي ، يجب أن أضع "header = {المحسوب}" خلف "{... props}". إذا لم أفعل هذا ، فلن يظهر عنوان اللوحة. أعتقد أن "{... props}" الذي يظهر لاحقًا في التسلسل يحل محل معلومات "header". عندما أضع "{... الدعائم}" في البداية ، فإنها تعمل. في هذه الحالة ، أعتقد أن "الرأس" الذي يظهر لاحقًا يحل محل معلومات "الرأس" في الدعائم.

تأكيبي مع استجابة @ 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> };