Ant-design: HOCで動作できない `antd`のコンポーネントのリスト

一部のコンポーネントはAPIの一部としてkeyを使用しているため、すべてのAPIの名前を変更するまでこれを修正することはできません。 例えば

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

これは重大な変更になりますが、このようなantd-codemodによって解決できます。

それで、そうする価値があると思いますか？

これは良い考えではないと思います。

codemodソリューションのファンではありません。
私の見解ですが、悲しいことに、ほとんどの人にとって、それは歓迎されるよりも反発的であると私は信じています。

コンポーネントをカスタムコンポーネントに埋め込むことは、Reactの一般的な方法です。

それを修正して、間違いなくant-designの採用が急速に増加するのを見てください。

Ant Designは本当に魅力的で、react-bootstrapを離れたくなる最初のライブラリです。

@MacKentoch

一部のコンポーネントはAPIの一部としてキーを使用するため、すべてのAPIの名前を変更するまでこれを修正することはできません。

@ afc163これらのAPIの名前を変更できない場合、この問題を解決できません。 ただし、回避策を提供できます。https ：

これをドキュメントに追加する必要があると思いますか？

@benjycuiわかりました。

とにかく、結局ブロックしていません。

お時間を割いていただきありがとうございます。

@benjycui私はあなたが提案した回避策を調査していましたが、それは適切な解決策ではないと思います。 通常、コンポーネントをラップするときは、内部状態も必要です。 提案されたソリューションでは、これは不可能です。
また、これは少なからぬ問題だと思います。 共通のコンポーネントを分離できないということは、アプリケーション内で同じコードを何度も繰り返すことを意味します。 アプリケーションが大きい場合は、antdをまったく採用しないことを検討します。 これを建設的な批評家と考えてください。
お疲れ様でした！

これは小さな問題ではなく、Ant Designライブラリを使い始めたときは予期していなかったことであると言うことに同意しました。カスタムコンポーネントのグッドプラクティスは、Reactプロジェクト全体で使用されています。 個人的には、Ant Designが大好きですが、一部の人にとっては、これは大きな問題になる可能性があります。 今後のAntDesignv3でこれが改善されるのを本当に楽しみにしています。

v3でこれに対する解決策を見つけてください。

このパッケージがリリースされた後に解決できます（多分）。

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

メニューを使用してナビゲーションバーを作成し、メニューにReact Router <Link />タグを<Icon />ネストしようとすると、この試みに遭遇しました（これが間違っている場合は申し訳ありません）。

より好ましい解決策はありますか？

私見ですが、このスレッドは公式ドキュメントに含まれている必要があります。これは、この問題が多くのユーザーにとって大きな問題になる可能性があるためです。
ドキュメントには、状態が不要な場合の代替手段として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) => { ... })使用する場合、少なくとも私にとっては回避策は機能しません。 結局、keyプロパティはmykey/.0ような値を取得しますが、これは私が作業できるものではありません。 また、プロパティの名前の変更にも投票します。

この問題は実際に私をantdから遠ざけるかもしれません...または少なくともこれらのコンポーネントの代替品を見つける原因になります。 再利用可能なコンポーネントを作成する能力が実際に制限されます。

Menu.Item @yunshuipiao内でReactRouterを利用しようとしている人のために、＃6576で私のために働いた成功したソリューションがありました

もう1つの小さな問題：Menu.Itemをラップすると、少なくとも垂直モードでは、子アイテムの1つが選択されたときに、サブメニューが選択された状態で表示されなくなります。 関連する行：

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.Itemは、ラップされたときに選択されません。 回避策はありますか？

@Nomeyho関連するメソッドをコピーして貼り付け、元のチェックをコメントアウトして、ラッパーでクラスをclassNameとして渡すことにより、 ant-menu-submenu-selectedクラスを追加するかどうかを決定するロジックを再構築することになりました。

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から遠ざけるかもしれません...または少なくともこれらのコンポーネントの代替品を見つける原因になります。 再利用可能なコンポーネントを作成する能力が実際に制限されます。

次のようなMenuSubMenuと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反応することで利益を得ることができますか？

それは素晴らしいニュースです

はい、問題を解決するには、 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 select sourceも、「React.Children.forEach」や「React.cloneElement」ではなく、関数の子の小道具を使用します

これがばかげた質問であるならすみませんが、私はまだReactとAntDesignにかなり慣れていません。
これは、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;

CASLを使用して、ユーザーの許可に基づいてUI要素をレンダリングし始めました。 ただし、小道具が子要素に正しく伝播されないためにisRootMenu関数の呼び出しが失敗するため、サブメニューがレンダリングされないという問題が発生しました。

回避策として、サブメニューを定数として定義し、「手作業で」小道具に渡しました。
「」
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

gibelium / meteor-react-antd-casl

ant-designUIライブラリを使用した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に固有ですが、 です。

以前のコメントに加えて-はい、これも優先度が高いと見なすことができると思います。 問題の1つを正常に解決した後（上記で説明したように）、カスタムコンポーネントでラップされた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値が無効です

同じ問題... 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を送信することもできます。

@ afc163

私はその問題にしばらく時間を費やしました...

そしてそれは実行可能です、あなたはただ残りの小道具を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を使用して、変更される可能性のあるすべての小道具を学習し、それらを1つずつ渡すことができると思いますが、... props構文により、親が子パネルに追加したいものがすべて添付されます（明示的に設定する必要があるものを含みますが、これに限定されません）

この問題は修正する必要があります。
多くの（またはほとんど）開発者は、カスタムコンポーネントにライブラリを使用したいと考えています。

例）
このコードは機能していません。 メニューとメニューアイテムには不透明な小道具が必要だからです。

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

@moonjoungyoung @adamerose
スレッドを読みましたか？
それを機能させるには、レストプロップを内側のantdコンポーネントに渡す必要があります。

これが私がカスタムコンポーネントとreact-router NavLinks条件付きレンダリングをreact-router antd Menu内で取得するために働いたものですが、これには修正が必要です-私は無駄にしましたこのスレッドを見つけるまでにかなりの時間がかかります。

_編集-気にしないでください、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>
);

@moonjoungyoung @adamerose
スレッドを読みましたか？
それを機能させるには、レストプロップを内側のantdコンポーネントに渡す必要があります。

上記の私の例を見ていただけますか？ このスレッドですべての回避策を適用したと思いましたが、それでも正しく機能しません。 小道具を渡して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> };