React中GraphQL数组渲染拆分及react-string-replace使用问题

一、正确渲染数组为<li>列表项 #

你遇到的问题是因为React在渲染字符串数组时，会直接将所有字符串拼接成单一文本节点，不会自动为每个元素创建<li>。解决这个问题的关键是使用数组的map()方法遍历每个元素，返回对应的<li>组件：

// 假设你已经通过GraphQL获取到itineraryTabItems数组
const itineraryTabItems = get(this.props,'data.contentfulTourInformation.itineraryTabItems');

// 正确的渲染方式
<ul>
  {itineraryTabItems.map((item, index) => (
    <li key={index}>{item}</li>
  ))}
</ul>

• 注意：这里使用index作为key是简单的方案，如果你的数组元素有唯一标识符（比如每个Item对应的ID），优先使用唯一ID作为key，这样React的Diff算法能更高效地更新列表。
• 如果itineraryTabItems可能为undefined或null，可以先做空值判断避免报错：

  <ul>
    {itineraryTabItems?.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
  

二、使用react-string-replace处理GraphQL数据 #

react-string-replace主要用于将字符串中的特定模式替换为React元素，适合当你从GraphQL获取的不是数组，而是拼接字符串的场景（比如"Item 1, Item 2, Item 3"）。以下是具体用法：

1. 首先安装依赖：

npm install react-string-replace
# 或者
yarn add react-string-replace

2. 导入并使用：
   假设你从GraphQL拿到的是一个逗号分隔的字符串：

import reactStringReplace from 'react-string-replace';

// 假设获取到的是拼接字符串
const itineraryString = get(this.props,'data.contentfulTourInformation.itineraryTabItems');

// 用正则匹配每个Item，替换为<li>
const itineraryTabItems = reactStringReplace(itineraryString, /Item \d+/g, (match, i) => (
  <li key={i}>{match}</li>
));

// 渲染列表
<ul>{itineraryTabItems}</ul>

另一种常见场景：如果字符串是用特定分隔符（比如换行符、分号）分隔的，也可以先拆分再映射（这种方式往往比正则更直观）：

// 先将字符串拆分为数组
const itemsArray = itineraryString.split(', ');
// 再映射为<li>
const itineraryTabItems = itemsArray.map((item, i) => <li key={i}>{item}</li>);

总结一下：如果已经拿到数组，直接用map()渲染即可；如果拿到的是拼接字符串，根据情况选择react-string-replace或split()+map()的方式处理。

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