Ant-design: `Antd` के घटकों की सूची जो HOC के साथ काम नहीं कर सकती है

यह मुश्किल है, कुछ घटकों के लिए एपीआई के हिस्से के रूप में key का उपयोग होता है, हम इसे तब तक ठीक नहीं कर सकते जब तक हम सभी एपीआई के नामों का नाम नहीं लेते। जैसे

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

यह एक ब्रेकिंग चेंज होगा, लेकिन इस तरह के ब्रेकिंग चेंज को atd-codemod द्वारा हल किया जा सकता है।

तो, क्या आपको लगता है कि यह ऐसा करने के योग्य है?

मुझे नहीं लगता कि यह एक अच्छा विचार है।

कोडमॉड समाधान का प्रशंसक नहीं।
बस मेरी बात, लेकिन, मेरा मानना ​​है कि ज्यादातर लोगों के लिए दुख की बात है कि यह स्वागत से अधिक प्रतिकारक है।

कस्टम घटकों में एंबेडिंग घटक रिएक्ट में एक आम बात है।

कृपया इसे ठीक करें और बिना किसी संदेह के एंट-डिज़ाइन को तेजी से बढ़ाएं।

चींटी डिजाइन वास्तव में आकर्षक है और यह पहली लाइब्रेरी है जो मुझे प्रतिक्रिया-बूटस्ट्रैप छोड़ने की अनुमति देती है।

@MacKentoch

यह मुश्किल है, कुछ घटकों के लिए एपीआई के हिस्से के रूप में कुंजी का उपयोग करें, हम इसे तब तक ठीक नहीं कर सकते जब तक हम एपीआई के सभी नामों का नाम नहीं लेते।

@ afc163 अगर हम उन एपीआई का नाम नहीं बदल सकते हैं, तो हम इस समस्या को हल नहीं कर सकते। लेकिन हम चारों ओर एक काम प्रदान कर सकते हैं, देखें: https://github.com/react-component/collapse/issues/73#issuecomment -323626120

क्या आपको लगता है कि हमें इसे प्रलेखन में जोड़ना चाहिए?

@benjycui मैं समझता हूं।

वैसे भी, यह सब के बाद अवरुद्ध नहीं है।

जवाब देने के लिए समय देने के लिए धन्यवाद।

@benjycui मैं आपके द्वारा प्रस्तावित समाधान की जांच कर रहा था, लेकिन मुझे लगता है कि यह एक उचित समाधान नहीं है। आमतौर पर जब आप एक घटक लपेटते हैं तो आप कुछ आंतरिक स्थिति भी चाहते हैं। प्रस्तावित समाधान के साथ यह संभव नहीं है।
इसके अलावा मुझे लगता है कि यह कोई छोटी समस्या नहीं है। आम घटकों को अलग करने में सक्षम नहीं होने का मतलब है कि एक ही कोड को एक आवेदन के अंदर बहुत बार दोहराया जाना। यदि आवेदन बड़ा है, तो मैं इस बात पर विचार नहीं करूंगा कि मैं atd को बिल्कुल न अपनाऊं कृपया इसे रचनात्मक आलोचक मानें।
आपके काम के लिए धन्यवाद!

यह कहने के लिए सहमत होना कोई छोटी समस्या नहीं है और यह ऐसी चीज है जिसकी मैंने उम्मीद नहीं की थी जब मैंने चींटी डिजाइन लाइब्रेरी का उपयोग करना शुरू किया था, कस्टम घटकों के अच्छे अभ्यास का उपयोग रिएक्ट परियोजनाओं में किया जाता है। व्यक्तिगत रूप से, मुझे वास्तव में चींटी डिज़ाइन पसंद है, लेकिन कुछ के लिए, यह एक डीलब्रेकर हो सकता है। वास्तव में यह देखना पसंद करेंगे कि आने वाले चींटी डिजाइन v3 में सुधार हो जाता है।

कृपया इसके लिए v3 में एक समाधान खोजें।

जारी किए गए इस पैकेज के बाद हल किया जा सकता है (शायद)।

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

इस कोशिश कर में सिर्फ भाग गया (खेद है कि अगर यह गलत है) मेनू नहीं मिल पाता का उपयोग कर प्रतिक्रिया रूटर एक नेविगेशन बार बनाने के लिए <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 जैसा मूल्य मिलता है जो कि मैं काम नहीं कर सकता। मैं भी गुणों पर एक नाम परिवर्तन के लिए मतदान करूंगा।

यह समस्या वास्तव में मुझे atd से दूर कर सकती है ... या कम से कम मुझे इन घटकों का प्रतिस्थापन खोजने के लिए प्रेरित कर सकती है। यह वास्तव में पुन: प्रयोज्य घटकों को बनाने की आपकी क्षमता को सीमित करता है।

किसी के लिए एक मेनू के भीतर प्रतिक्रिया रूटर का उपयोग करने की कोशिश कर रहा है। Item @yunshuipiao ने एक सफल समाधान किया जो मेरे लिए #

एक और छोटा मुद्दा: मेन्यू को लपेटना। यह सबमेनू को तब प्रदर्शित होने से रोकता है जब उसके किसी एक बच्चे के आइटम का चयन किया जाता है, कम से कम ऊर्ध्वाधर मोड में। प्रासंगिक रेखाएँ:

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

थॉट आईल्ड डॉक्यूमेंट यह उन लोगों के लिए है जो एक कस्टम कंपोनेंट के साथ संक्षिप्त कार्य करने की कोशिश कर रहे हैं: इसी तरह @jfreixa ने जो उल्लेख किया है, बस कस्टम कंपोनेंट को दिए गए सभी प्रॉप्स को पैनल, जैसे

<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 से सहमत

यह समस्या वास्तव में मुझे atd से दूर कर सकती है ... या कम से कम मुझे इन घटकों का प्रतिस्थापन खोजने के लिए प्रेरित कर सकती है। यह वास्तव में पुन: प्रयोज्य घटकों को बनाने की आपकी क्षमता को सीमित करता है।

मुझे मेनू 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>

फिर, आप संभवतः सरणी में अनुक्रमणिका का उपयोग नहीं करना चाहते हैं, इसलिए उत्पादन में इसका उपयोग न करें, लेकिन विचार ठोस है।

• कस्टम घटकों में antd घटकों को एम्बेड करने की क्षमता के लिए 1। यह हमारे लिए बना या टूट रहा है

मुझे लगता है कि हमारे पास कुंजी की निर्भरता को दूर करने का एक तरीका है। मेनू को एक उदाहरण के रूप में लें, हम 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>

और atd चुनिंदा स्रोत भी "React.Children.forEach" और "React.cloneElement" के बजाय फ़ंक्शन बच्चों के प्रॉप्स का उपयोग करते हैं।

माफ करना अगर यह एक बेवकूफ सवाल है, लेकिन मैं अभी भी रिएक्ट और चींटी डिजाइन के लिए काफी नया हूं।
क्या इसका मतलब यह है कि व्यावहारिक रूप से हम किसी अभिक्रिया-रिड्यूक एसपीए से जुड़े एंट डिज़ाइन मेनू का उपयोग नहीं कर सकते हैं?
यदि हां, तो आप चींटी डिजाइन के साथ अपेक्षाकृत जटिल एसपीए कैसे लिख सकते हैं? क्या आसपास कोई काम है?

इस पर किसी भी अद्यतन?

क्या इस मुद्दे के बारे में कोई अपडेट है? मेनू आइटम 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 फ़ंक्शन को कॉल इस तथ्य के कारण विफल हो जाता है कि प्रॉप्स बाल तत्वों के लिए सही ढंग से प्रचारित नहीं हैं।

वर्कअराउंड के रूप में मैंने सबमेनस को स्थिरांक के रूप में परिभाषित किया और 'हाथ से सहारा' में पारित किया।
`` ``
प्रस्तुत करना() {

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

gibelium / उल्का प्रतिक्रिया-antd-casl

एक उल्का / प्रतिक्रिया वातावरण में CASL प्राधिकार पुस्तकालय के उपयोग के लिए प्रदर्शन

@ Gibelium मुझे लगता है कि आइकन रेंडरिंग वास्तव में अपने स्वयं के मुद्दे के हकदार हैं। मैंने आपके रेपो पर क्लोन किया और आइकन को भूत बटन से बदलने का प्रयास किया और बटन की रूपरेखा दिखाई दे रही है, लेकिन आइकन बटन में / पर रेंडर नहीं करता है ...

@gotjoshua क्या आप उस समर्पित मुद्दे को बनाएंगे?

डिफ़ॉल्ट विस्तारित मेनू आइटम सेट करना भी काम नहीं करता है। मेरा वर्कअराउंड कार्यान्वयन मेनू के defaultOpenKeys संपत्ति को अनदेखा करता है।

किसी भी विचार कैसे हल करने के लिए?

यह समस्या वास्तव में डॉक्स में उल्लिखित होनी चाहिए, मैंने इस बग पर शोध करने के लिए एक पूर्ण कार्यदिवस को बर्बाद कर दिया, यह समझने के लिए कि यह पुस्तकालय मेरे लिए अनुपयोगी है। कृपया कृपया एक चेतावनी दें, ताकि अन्य डेवलपर्स को इतना समय बर्बाद न करना पड़े कि आप एक एंटी-पैटर्न का इस्तेमाल कर सकें, रिएक्ट कीज़ पर रिलेयिंग कर सकें, और अब आप समुदाय के लिए उपलब्ध कई एचओसी या डेकोरेटर के लिए बहुत नाजुक हैं।
यह वाकई शर्म की बात है। मुझे आशा है कि आप इसे अपने अगले प्रमुख संस्करण में ठीक कर लेंगे।

क्या इस मुद्दे के बारे में कोई अपडेट है? सेट मेनू डिफ़ॉल्ट काम नहीं कर रहा है

पूरी तरह से कुछ है कि वास्तव में तेजी से उच्च प्राथमिकता के रूप में माना जाना चाहिए। 🔥

मेरे पास समान उपयोग-मामला है जो मैं (शायद) लागू करने में सक्षम नहीं हूं।
मैं Redux कनेक्टेड घटक बनाना चाहूंगा जो Redux स्टोर में डेटा पर आधारित विकल्पों के साथ Select प्रदान करता है। जैसा कि मैं हर जगह एक ही कोड "कॉपी-पेस्ट" नहीं करना चाहता, मैं Form.getFieldDecorator अंदर इस प्रकार के घटक का उपयोग करना चाहता हूं, लेकिन connect HOC का उपयोग करने के कारण मैं ऐसा करने में सक्षम नहीं हूं। यह।

संपादित करें: मैंने अपने उपयोग-मामले के लिए समाधान पाया। मैं इस तरह के एक घटक बनाने में सक्षम था जैसा कि ऊपर forwardRef विकल्प के साथ वर्णित है:
connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(Component);
यह समाधान connect HOC के लिए विशिष्ट है, लेकिन आपको React.foradref का उपयोग करके समान समाधान बनाने में सक्षम होना चाहिए।

पिछली टिप्पणियों के अलावा - हाँ मुझे भी लगता है कि इसे उच्च प्राथमिकता माना जा सकता है। जब मैंने अपने एक मुद्दे को सफलतापूर्वक हल कर लिया (जैसा कि मैंने ऊपर वर्णित किया है), अब मुझे अपने कस्टम घटक के साथ लिपटे 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 के रूप में एक अनुमति घटक बनाना चाहता हूं, लेकिन atd यह अनुमति नहीं देता ... दुखद

मैंने उस मुद्दे पर कुछ समय बिताया ...

और यह करने योग्य है, आपको बस बाकी प्रॉप्स को पास करना होगा। पतन। पैनल (इसे समझने के लिए आरसी-पैनल का स्रोत कोड जांचें)

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 यदि आपका <SubMenu> <Menu> का प्रत्यक्ष बच्चा नहीं है, तो defaultOpenKeys काम नहीं करेगा। 😞

बस इस मुद्दे का सामना करना पड़ा FYI करें।

निश्चित रूप से प्रलेखन में पावती की आवश्यकता है। गंभीर रूप से इस मुद्दे पर आने के लिए (कुछ अन्य मामूली लोगों के बीच) निराशा होती है जो मुझे मेरी परियोजनाओं में एंटीडिजाइन का उपयोग करके गंभीरता से पुनर्विचार कर रहे हैं।

मुझे विश्वास नहीं हो रहा है कि इसके लिए अभी भी कोई तय नहीं है।

इसे वास्तव में ठीक करने की आवश्यकता है। अधिकांश डेवलपर्स न केवल बॉक्स से सीधे घटकों का उपयोग करते हैं। इसका मतलब है कि हम अधिक कार्यक्षमता को एकीकृत करना चाहते हैं जो अन्यथा उपलब्ध कराए गए एपीआई को जोड़ नहीं सकते हैं। मैं एचओसी के गैर-सामान्य या कम प्राथमिकता वाले उपयोग के मामले को नहीं कहूंगा। यह प्रतिक्रिया की संरचनात्मक प्रकृति के लिए मौलिक है।

कृपया, इसे ठीक करें, और इसके ठीक होने की जानकारी को जोड़ने के साथ-साथ लोगों को आपके आधिकारिक डॉक्स में काम करने के तरीके भी मिलेंगे।

कृपया, इसे ठीक करें, और इसके ठीक होने की जानकारी को जोड़ने के साथ-साथ लोगों को आपके आधिकारिक डॉक्स में काम करने के तरीके भी मिलेंगे।

रखरखाव पीआर के लिए खुले हैं, आप डॉक्स अपडेट के लिए एक पीआर भी भेज सकते हैं यदि आप चाहते हैं और इसे करने का समय है।

@ afc163

मैंने उस मुद्दे पर कुछ समय बिताया ...

और यह उल्लेखनीय है, आपको बस आराम करने की जरूरत है यानी को सहारा। पतन। पैनल (इसे समझने के लिए आरसी-पैनल का स्रोत कोड जांचें)

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}>
...

यह काम करना शुरू कर देता है।

कोई समझा सकता है क्यों?

जैसा कि मैं इसे समझता हूं, माता-पिता के पतन को हेडर, कुंजी और अतिरिक्त (आपके गैर-काम करने के उदाहरण से) के अलावा प्रॉपर सेट करने की आवश्यकता होगी। माता-पिता के पतन के इन प्रॉप्स को स्पष्ट रूप से अपने कस्टम घटक के भीतर पैनल घटक पर रखने की आवश्यकता है।

मुझे लगता है कि आप सभी संभावित प्रॉप्स को सीखने के लिए रिएक्ट इंस्पेक्टर का उपयोग कर सकते हैं जो एक-एक करके बदलेंगे और उन्हें पास करेंगे, लेकिन ... प्रॉपर सिंटैक्स सुनिश्चित करता है कि माता-पिता अपने बच्चे के पैनल में जो कुछ भी जोड़ना चाहते हैं वह संलग्न होगा ( सहित, लेकिन उन लोगों तक सीमित नहीं जिन्हें आपको स्पष्ट रूप से सेट करने की आवश्यकता है)

इस समस्या को ठीक करने की आवश्यकता है।
MANY (या .. लगभग) डेवलपर कस्टम कंपोनेंट्स के लिए लाइब्रेरी का उपयोग करना चाहते हैं।

उदाहरण)
यह कोड काम नहीं कर रहा है। क्योंकि Menu और Menu Item को Opaque props की जरूरत होती है।

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

@moonjoungyoung @adamerose
क्या आपने धागा पढ़ा है?
आपको इसे काम करने के लिए आंतरिक एनॉट घटक में आराम सहारा पास करना होगा।

यहाँ मेरे लिए क्या काम किया गया है कस्टम घटकों को प्राप्त करने के लिए react-router NavLinks antd Menu लिए सशर्त प्रतिपादन, वास्तव में हालांकि यह एक फिक्स की जरूरत है - मुझे बर्बाद कर दिया इस धागे को खोजने से बहुत पहले।

_edit- कोई बात नहीं, चयनितकेईएस ठीक से काम नहीं करता है_

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

@moonjoungyoung @adamerose
क्या आपने धागा पढ़ा है?
आपको इसे काम करने के लिए आंतरिक एनॉट घटक में आराम सहारा पास करना होगा।

क्या आप ऊपर मेरे उदाहरण पर एक नज़र डाल सकते हैं? मुझे लगा कि मैंने इस धागे में हर काम को लागू किया है, लेकिन यह अभी भी ठीक से काम नहीं करता है। मैं नीचे प्रॉप्स को पास कर रहा हूं और Menu.Item पर उन्हें फैला रहा हूं लेकिन सक्रिय होने पर यह अभी भी हाइलाइट नहीं होगा, और घटक ट्री इस तरह दिखता है

मैंने उस मुद्दे पर कुछ समय बिताया ...

और यह उल्लेखनीय है, आपको बस आराम करने की जरूरत है यानी को सहारा। पतन। पैनल (इसे समझने के लिए आरसी-पैनल का स्रोत कोड जांचें)

मेरे मामले में, मुझे "{... प्रॉप्स}" के पीछे "हैडर = {गणना_हेडर}" लगाना है। अगर मैं ऐसा नहीं करता हूं, तो पैनल का हेडर दिखाई नहीं देता है। मुझे लगता है कि "{... प्रॉप्स}" जो बाद में अनुक्रम में "हेडर" जानकारी को ओवरराइट करता है। जब मैं शुरुआत में "{... प्रॉप्स}" डालता हूं, तो यह काम करता है। उस स्थिति में, मुझे लगता है कि "हेडर" जो बाद में दिखाई देते हैं, प्रॉप्स में "हेडर" जानकारी को ओवरराइट कर देते हैं।

मेरा 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> };