如何获取state名称？及如何针对不同状态数组实现差异化渲染？

嘿，我来帮你搞定这两个问题！先从第一个问题说起，再一步步拆解差异化渲染的实现方式。

一、如何获取State的名称？ #

首先要纠正你代码里的一个小细节：map的回调参数顺序是(item, index)，不是(index, key)——你写反啦！这里的item才是数组里的每一条状态数据，你需要从单个item里拿到它的类型名称（比如deposit/trade/withdraw），而不是从整个data数组上取data.name（数组本身没有name属性哦）。

举个例子，如果你的数据结构是这样的（每个条目自带类型标识）：

const data = [
  { name: "deposit", txId: "tx_001", address: "0xabc...", amount: 50 },
  { name: "trade", txId: "tx_002", address: "0xdef...", pair: "BTC/USDT" },
  { name: "withdraw", txId: "tx_003", address: "0xghi...", fee: 0.2 }
];

那在map回调里，你就能通过item.name轻松拿到每个State的名称啦。如果你的数据里没有直接的name字段，也可以通过字段存在性判断（比如deposit有amount，trade有pair），但更推荐给每条数据加一个明确的类型标识字段，逻辑会更清晰。

二、实现差异化渲染的几种方式 #

根据你的需求，我整理了3种从简单到优雅的实现方案，你可以根据场景选择：

方案1：简单的条件渲染（适合逻辑少的场景） #

用JSX的短路逻辑&&，当条件满足时渲染对应内容，代码简洁直观：

txRender(data) {
  return data.map((item, key) => (
    // 注意：最好用item.txId这种唯一值当key，不要用索引key
    <div key={item.txId}>
      {/* 渲染所有类型共有的内容 */}
      <p>交易编号：{item.txId}</p>
      <p>地址：{item.address}</p>

      {/* 差异化渲染部分 */}
      {item.name === "deposit" && <p>存款金额：{item.amount}</p>}
      {item.name === "trade" && <p>交易对：{item.pair}</p>}
      {item.name === "withdraw" && <p>手续费：{item.fee}</p>}
    </div>
  ));
}

方案2：Switch语句（适合类型多、逻辑稍复杂的场景） #

如果每个类型的渲染逻辑不止一行，用switch会比一堆if更清晰：

txRender(data) {
  return data.map((item, key) => {
    let extraContent;
    switch(item.name) {
      case "deposit":
        extraContent = <p>存款金额：{item.amount}</p>;
        break;
      case "trade":
        // 交易类型可能需要渲染多个字段
        extraContent = (
          <div className="trade-extra">
            <p>交易对：{item.pair}</p>
            <p>交易方向：{item.direction}</p>
          </div>
        );
        break;
      case "withdraw":
        extraContent = <p>手续费：{item.fee}</p>;
        break;
      default:
        extraContent = null; // 未知类型不渲染额外内容
    }

    return (
      <div key={item.txId}>
        {/* 公共内容 */}
        <p>交易编号：{item.txId}</p>
        <p>地址：{item.address}</p>
        {/* 插入差异化内容 */}
        {extraContent}
      </div>
    );
  });
}

方案3：对象映射（最优雅的可扩展方案） #

把每个类型的渲染逻辑抽成独立组件，用对象做映射，后续新增类型时只需要添加新组件和映射项，不用修改主渲染逻辑：

// 先定义每个类型的专属渲染组件
const DepositExtra = ({ item }) => <p>存款金额：{item.amount}</p>;
const TradeExtra = ({ item }) => (
  <div className="trade-extra">
    <p>交易对：{item.pair}</p>
    <p>交易方向：{item.direction}</p>
  </div>
);
const WithdrawExtra = ({ item }) => <p>手续费：{item.fee}</p>;

// 建立「类型名称-组件」的映射表
const extraComponentMap = {
  deposit: DepositExtra,
  trade: TradeExtra,
  withdraw: WithdrawExtra
};

txRender(data) {
  return data.map((item, key) => {
    // 根据类型获取对应的组件
    const ExtraComponent = extraComponentMap[item.name];
    return (
      <div key={item.txId}>
        {/* 公共内容 */}
        <p>交易编号：{item.txId}</p>
        <p>地址：{item.address}</p>
        {/* 渲染专属组件（如果存在） */}
        {ExtraComponent && <ExtraComponent item={item} />}
      </div>
    );
  });
}

最后提个小建议：给map元素的key属性用数据里的唯一标识（比如item.txId），不要用循环索引，这样能避免数组顺序变化时的渲染性能问题或错误。

内容的提问来源于stack exchange，提问作者Руслан Миров