React开发中如何获取对象数组内的属性值实现图片alt标签动态赋值

你需要把ContentData.js中的contentAll改为可接收参数的函数，在Content.js渲染时将同层级的name值传入即可实现动态赋值，改动如下：

第一步：修改ContentData.js #

将静态的contentAllJSX结构改为接收name参数的函数，直接把参数赋值给img的alt属性即可：

import React from "react";

const listsData = [
  {
    id: 1,
    name: "My alt tags",
    text: (
      <>
        <p>Lorem Imsum</p>
      </>
    ),
    mainContent: [
      {
        // 改为函数接收name参数
        contentAll: (name) => (
          <>
            <p>
              Lorem Ipsum is simply dummy text of the printing and typesetting
              industry.
            </p>
            <img
              alt={name}
              src="https://images.unsplash.com/photo-1637704758245-ed126909d374?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxNHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60"
            />
          </>
        )
      }
    ]
  }
];

export default listsData;

第二步：修改Content.js #

渲染contentAll时调用函数，传入当前遍历项的name属性：

import React, { Component } from "react";
import mainListsItems from "./ContentData";

class Content extends Component {
  render() {
    const myContent = mainListsItems.map((lists, k) => (
      <>
        <div key={k}>{lists.text}</div>
        {lists.mainContent.map((subcontent, j) => {
          // 调用contentAll函数传入对应name值
          return <div key={j}>{subcontent.contentAll(lists.name)}</div>;
        })}
      </>
    ));

    return <>{myContent}</>;
  }
}

export default Content;

该方案适配多列表项的场景，每个列表项下的图片都会自动读取自身对应层级的name值作为alt属性。

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