問題タブ [react-icons]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - ReactJS で Prop を介してコンポーネントを呼び出す
を使用してインポートするアイコンのラッパー コンポーネントを作成していますreact-icons。現在の外観の例を次に示します。
さて、これは思い通りに動作しますが、コードを単純化したいと思います。理想的には、次のように表示/動作することを望みます:
これを行う方法はありますか？
注: 参考Iconまでに、私のコンポーネントの現在のコードは次のとおりです。
コンポーネントはの<IconBase>スタイルの一部ですstyled-components。
アップデート
Twitter の例は単なる例であることに注意してください。コンポーネントに渡す名前に関係なく機能するソリューションを探してい<Icon>ます。つまり、次のすべて (およびそれ以上) が機能します。
これらはそれぞれ次と同等です。
つまり、 からどのアイコンを取得しても、プロップreact-iconsに対して適切にレンダリングされます。name
reactjs - モジュールは、外部パッケージからの名前付きエクスポートの動的インポートに対して定義されていません
react-iconsからのアイコン コンポーネントの名前付きエクスポートに対応する文字列の配列によって定義されているように、からアイコンをインポートしたいと考えていますreact-icons。のアイコンの各ライブラリのケースについて説明しますreact-icons。これは、FontAwesome のケースの例です。
lazy(() => import('react-icons/fa').then(module => ({ default: module.Components[icon]})))
上記のコード スニペットは、名前付きエクスポートを動的にインポートする方法として見つかりました。
これにより、 で指定されたアイコンに対応するコンポーネントが返されることを期待していますicon。たとえば、次のようlet icon = 'FaPhp';
なエラーが発生しています。
TypeError: Cannot read property 'FaPhp' of undefined