React组件返回元素数组时，如何仅展示指定单个元素？

Hey there! Let's break down how to fix this issue and get you the flexibility you need while keeping everything in one component.

Why Your Original Approach Didn't Work #

When you use <FrontendCategoriesListing />, React renders the component into a React element tree—not the raw array you returned inside the component. That’s why trying to use [0] or [2] directly on the component tag doesn’t work: you’re trying to index a React component instance, not the internal array of elements.

Fix 1: Add a Prop to Control Which Element(s) to Show #

The simplest way to adapt your existing class component is to pass a prop that tells the component which element to render. Here’s how to modify your code:

import React, { Component } from 'react';

class FrontendCategoriesListing extends Component {
  render() {
    // First, store your elements in a reusable variable (and add unique keys, which React requires for lists!)
    const contentElements = [
      <h1 key="info-1"> First information </h1>,
      <h2 key="info-2"> Second information </h2>,
      <React.Fragment key="info-3"> Third information </React.Fragment>,
      <div key="info-4"> Fourth information </div>
    ];

    // Use the prop to decide what to return
    const { displayIndex } = this.props;
    // If displayIndex is provided, return just that element; otherwise return all elements
    return displayIndex !== undefined ? contentElements[displayIndex] : contentElements;
  }
}

export default FrontendCategoriesListing;

Then, when you use the component:

// Render only the fourth element (index 3)
<FrontendCategoriesListing displayIndex={3} />

// Render all elements (default behavior)
<FrontendCategoriesListing />

Fix 2: More Flexible Control (By Name Instead of Index) #

If you want to avoid relying on array indices (which can break if you reorder elements later), you can map elements to names and pass a prop with the name(s) you want to show:

import React, { Component } from 'react';

class FrontendCategoriesListing extends Component {
  render() {
    const contentElements = {
      mainHeading: <h1 key="main-heading"> First information </h1>,
      subHeading: <h2 key="sub-heading"> Second information </h2>,
      inlineText: <React.Fragment key="inline-text"> Third information </React.Fragment>,
      contentBox: <div key="content-box"> Fourth information </div>
    };

    const { display } = this.props;
    // Handle single element, multiple elements, or default to all
    if (Array.isArray(display)) {
      return display.map(name => contentElements[name]);
    } else if (display) {
      return contentElements[display];
    }
    return Object.values(contentElements);
  }
}

export default FrontendCategoriesListing;

Usage examples:

// Render only the contentBox element
<FrontendCategoriesListing display="contentBox" />

// Render both mainHeading and inlineText
<FrontendCategoriesListing display={['mainHeading', 'inlineText']} />

Quick Note on Keys #

I added unique key attributes to all elements in the examples—this is mandatory for React when rendering lists (arrays of elements) to prevent performance issues and warnings. Make sure to keep those in your code!

Bonus: If You Ever Switch to Function Components #

Just in case you want to transition to function components later, the logic stays almost identical:

import React from 'react';

function FrontendCategoriesListing({ displayIndex }) {
  const contentElements = [
    <h1 key="info-1"> First information </h1>,
    <h2 key="info-2"> Second information </h2>,
    <React.Fragment key="info-3"> Third information </React.Fragment>,
    <div key="info-4"> Fourth information </div>
  ];

  return displayIndex !== undefined ? contentElements[displayIndex] : contentElements;
}

export default FrontendCategoriesListing;

All of these approaches keep everything in a single component while giving you the flexibility to render specific elements when needed.

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