blog

Ant Design v4+CracoでIconノードを動的に生成するには?

当時、私は操作に苦労しましたが、達成できませんでした。 学習は、学習と忘却のプロセスであり、新しい技術の追求は、基本的なことを忘れている、ああ、モーニングコールを記録するべきではありません。...

Mar 27, 2020 · 2 min. read
Share this

アントデザイン4+は、出てきた後、プロジェクトで使用されていない、と簡単にプロジェクトのバージョンをアップグレードする勇気がない、公式ウェブサイトはあまり変更されていないようですが、実際には、ほぼすべてのコンポーネントが変更され、さらにそのようなフォーム、ツリー、セレクト、テーブルなどのいくつかのコンポーネントは、、全体的に書き直しました

新しいプロジェクトは、ドキュメントの使用中の微妙な変化の多くのコンポーネントの存在のために、以前よりもシンプルでクリアな感じAntd4を試してみましたが、問題が発生するまで、メインは、基本的に正常な解決策を、表示するにはまだです〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜。

サイドメニューのアイコン動的生成の問題 もちろん、直接antdのMenuコンポーネントを使用して死者を書くことも可能ですが、メニューが多く、それは管理するために良いことではありませんし、メニューの配列を作成し、波のトラバース そして、問題が来て、Menuコンポーネントの内部v3は次のとおりです。

<Icon/> 統一され、動的に変更したいだけ行の型の値を変更する必要がある!
// <Icon type="pie" /> <Icon type="shop" /> <Icon type="time" />

v4は、メニューのプロパティにこのアイコンにメニューコンポーネントを見て、パラメータがノードであり、すべての突然の混乱は、動的に生成する方法を知りません その時点で、いわゆる "操作 "の多くは、達成するために無力。私は慎重にドキュメントを調べると、元のメソッド*** React.createElement()***を発見しました*** ***私はその時点で自分の顔を叩いて、毎日フックフックが、リアクトの元のメソッドを忘れていた*** ***。

React.createElementの簡単な紹介

<h1 className="one">React.createElement</h1>
React.createElement("h1", {className: "one"}, "React.createElement")

というわけで、これを応用すると、React.createElement

簡単なことです。

学習は、学習と忘却のプロセスであることを意味し、新しい技術の追求は、基本的なことを忘れている、ああ、モーニングコールを記録してはいけません。

Read next

デザイン・パターン - プロトタイプ・パターン

オブジェクトを作成するコストが大きく、同じクラスの異なるオブジェクト間の差が小さい場合、作成時間を節約するために、既存のオブジェクトのコピーを使用して新しいオブジェクトを作成することができます。このように、プロトタイプに基づいてオブジェクトを作成する方法を、プロトタイプ設計パ...

Mar 27, 2020 · 1 min read