基于Strapi+React+Gatsby的博客多分类链接渲染问题

Got it, let's fix this for you! The problem with your current code is that converting mapped categories to a string (using toString()) strips away all React component functionality—you can't turn a Link into a string and expect it to work as a clickable link. Instead, we need to render actual Link components directly, and handle comma separation within JSX.

Here's how to do it properly:

Step 1: Import Gatsby's Link Component #

First, make sure you have Gatsby's built-in Link imported for internal routing:

import { Link } from 'gatsby';

Step 2: Create a Helper Function to Render Categories #

We'll build a reusable function that takes your categories array, maps each category to a Link, and inserts commas between them without extra DOM elements:

const renderCategories = (categories) => {
  return categories.map((category, index) => (
    <React.Fragment key={category.name}>
      {/* Add comma + space before every category except the first */}
      {index > 0 && ', '}
      <Link 
        to={`/categories/${category.name.toLowerCase().replace(/\s+/g, '-')}`}
        className="category-link" // Optional: add class for styling
      >
        {category.name}
      </Link>
    </React.Fragment>
  ));
};

• The key prop is required for mapped React elements (we use category.name since it’s unique per category).
• The to path assumes your category pages follow a /categories/category-slug structure. If you store slugs directly in Strapi, replace the string transformation with category.slug instead.

Step 3: Use the Helper in Your Article Render #

Replace your existing category rendering code with this function when looping through articles:

{queryData.map(article => (
  <article key={article.id}>
    <h2>{article.title}</h2>
    <div className="article-meta">
      {/* Render clickable categories */}
      {renderCategories(article.categories)}
    </div>
    <div className="article-content">{article.content}</div>
  </article>
))}

Alternative: Using Reduce for Concatenation #

If you prefer a more concise approach, you can use Array.reduce() to build the element array:

const renderCategories = (categories) => {
  return categories.reduce((elements, category, index) => {
    if (index === 0) {
      // First category: just add the Link
      return [
        <Link key={category.name} to={`/categories/${category.name.toLowerCase().replace(/\s+/g, '-')}`}>
          {category.name}
        </Link>
      ];
    }
    // Subsequent categories: add comma, then the Link
    return [...elements, ', ', 
      <Link key={category.name} to={`/categories/${category.name.toLowerCase().replace(/\s+/g, '-')}`}>
        {category.name}
      </Link>
    ];
  }, []);
};

Why Your Original Code Didn't Work #

When you used .map(category => category.name).toString().replace(/,/g, ', '), you converted the array of category names to a plain string. If you tried mapping to Link components instead of names, toString() would turn each component into [object Object], resulting in broken output like [object Object], [object Object]. By rendering components directly, React handles them as valid JSX elements.

内容的提问来源于stack exchange，提问作者João Pedro