如何使用开关盒显示基于道具数据的特定组件图标?
How to display a specific component icon based off of props data using a switch case?
我是 React 的新手,是自学的。我正在创建一个使用 weatherapi.com 显示当前月相和信息的基本应用程序。这个API只给你月相的名字,没有给你图标。所以我的计划是从 https://react-icons.github.io/react-icons/ and display the current phase icon based off of the data received from the props. I was told that creating a variable for each icon then pulling the data, running a conditional or switch case, then replacing the icon variable in my html snippet was the best way to do this. After trying multiple times and doing research I'm not quite understanding how to do this since its my first time learning about switch cases or even using one. Here is the link to my github (I'm aware what's currently displayed is incorrect this is just to show what components are being used & the overall project): https://github.com/madisonmincevich/react-moon-app/blob/master/src/MoonIcon.js
导入图标
有一些不同的方法可以做到,但我尝试用你的方法解决它。
刚刚创建了一个名为 mapping
的新数组,它有 2 个对象,您可以通过名称和组件键看到这些对象。
takeComponent
函数检查来自 props 的数据。
然后你可以创建一个新的对象并将找到的对象赋值给它(lastObj
),它的组件键等于你要使用的元素react-icons-wi
您可以查看下面的代码,希望对您有所帮助。
我是 React 的新手,是自学的。我正在创建一个使用 weatherapi.com 显示当前月相和信息的基本应用程序。这个API只给你月相的名字,没有给你图标。所以我的计划是从 https://react-icons.github.io/react-icons/ and display the current phase icon based off of the data received from the props. I was told that creating a variable for each icon then pulling the data, running a conditional or switch case, then replacing the icon variable in my html snippet was the best way to do this. After trying multiple times and doing research I'm not quite understanding how to do this since its my first time learning about switch cases or even using one. Here is the link to my github (I'm aware what's currently displayed is incorrect this is just to show what components are being used & the overall project): https://github.com/madisonmincevich/react-moon-app/blob/master/src/MoonIcon.js
导入图标有一些不同的方法可以做到,但我尝试用你的方法解决它。
刚刚创建了一个名为 mapping
的新数组,它有 2 个对象,您可以通过名称和组件键看到这些对象。
takeComponent
函数检查来自 props 的数据。
然后你可以创建一个新的对象并将找到的对象赋值给它(lastObj
),它的组件键等于你要使用的元素react-icons-wi
您可以查看下面的代码,希望对您有所帮助。