React中如何利用props.type实现JSON数据的动态映射？

你遇到的问题是因为JavaScript的点语法不支持动态属性名，模板字符串的写法在这里无效。要实现动态访问，得用方括号语法来替代点语法。

修正后的代码 #

import text from "../../text/global.json";

function Card(props) {
  const { col, type } = props;

  return (
    <>
      <Col className={`bg-white p-4 card-b col-md-${col}`}>
        {/* 用方括号语法动态获取对应type的title */}
        <h5>{text.homepage.servicios.cards[type]?.title}</h5>
        <p>Litigio, Microfinanzas, Responsabilidad social y sustentabilidad.</p>
        <Button>Ver más</Button>
      </Col>
    </>
  );
}

关键说明 #

• 方括号[type]可以接收变量作为属性名，完美匹配你通过props.type动态获取属性的需求。
• 可选链操作符?.的作用是：如果type对应的属性不存在（比如cards里没有某个type的键），不会抛出Cannot read properties of undefined的错误，而是返回undefined，避免组件崩溃。
• 用解构赋值const { col, type } = props可以简化代码，不用单独声明变量。

内容的提问来源于stack exchange，提问作者Rodrigo Barba