问题：
前端 - 在React中，如何将数据的值设置为代码的标签？
薛宇
我有数据如下：
[ { key: '1', type: 'Apple' }, { key: '2', type: 'Pear' }]return <> ...{ cardList.map(card => { <Card key={card.key}> // 这里我想要填写card.type </Card> })}</>也就是说，这里的需求是：
<Card key='1' > <Apple></Apple></Card><Card key='2' > <Pear></Pear></Card>请问下，这里代码应该如何写呢？
共有1个答案
夔光霁
import React from 'react';import Apple from './Apple'; import Pear from './Pear'; const components = { Apple: Apple, Pear: Pear};const cardList = [ { key: '1', type: 'Apple' }, { key: '2', type: 'Pear' }];const MyComponent = () => { return ( <> { cardList.map(card => { const SpecificCard = components[card.type]; return ( <Card key={card.key}> <SpecificCard /> </Card> ); }) } </> );};export default MyComponent;
类似资料：
-
问题内容： 说我有一个模板 在测试时，定义变量的值而不接触调用此模板的python代码将很有用。所以我正在寻找这样的东西 Django中是否存在类似的内容？ 问题答案： 你可以使用模板标签。
-
如何给组件的props设置默认值？
-
问题内容： 我想在React Native的MapView上设置一个标记，但是我无法通过MapView的官方文档找到任何信息。 如果不允许这样做，如何在React Native中使用现有的react模块，例如react-googlemaps？ 问题答案： 您可以使用道具设置标记。 例如：
-
问题内容： 假设您有两个数组： 您如何将数组a设置为数组b并使它们保持不同的对象？就像我想到的那样： 但这不起作用，因为它仅使“ a”引用数组b。因此，设置两个数组相等，同时保持它们独立的对象，以遍历一个数组的每个元素并将其设置为另一个数组的唯一方法是吗？ 那ArrayList呢？当其中有对象时，如何将一个ArrayList设置为等于另一个？ 问题答案： 您可能要使用： 或使用
-
我是spring boot的新手，正在学习
-
我想允许用户选择日历上的开始和结束日期。我使用的是反应日期。 我希望它像下面这样工作 初始开始日期和结束日期将为空。当用户选择开始日期（如10月10日）时，第一次单击时，enddate也设置为startdate（10月10日），并且开始日期（10月10日）之前的日期和从开始日期算起6周后的日期将被禁用，现在当用户选择enddate（如10月13日）时，enddate设置为13th oct，并且在选