尝试以单个映射列表项为目标并在react中更改其图标

import React from 'react';

const MappingListItem = ({ icon, text }) => {
  return (
    <div>
      <span className={icon}></span>
      <span>{text}</span>
    </div>
  );
}

export default MappingListItem;

import React from 'react';
import MappingListItem from './MappingListItem';

const MappingList = ({ mappings }) => {
  return (
    <div>
      {mappings.map((mapping, index) => (
        <MappingListItem
          key={index}
          icon={mapping.icon}
          text={mapping.text}
        />
      ))}
    </div>
  );
}

export default MappingList;

import React from 'react';

const MappingListItem = ({ icon, text }) => {
  return (
    <div>
      <span className={`icon ${icon}`}></span>
      <span>{text}</span>
    </div>
  );
}

export default MappingListItem;