ReactJS -如何在ReactJS中检测元素是其父元素的第n_ first _还是最后一个子元素？

import React from 'react';

class ListItem extends React.Component {
  componentDidMount() {
    this.checkPosition();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.index !== this.props.index || prevProps.items !== this.props.items) {
      this.checkPosition();
    }
  }

  checkPosition() {
    const { index, items } = this.props;
    const parentElement = this.listItemRef.parentElement;
    const firstChildIndex = Array.from(parentElement.children).findIndex(child => child === this.listItemRef);
    const isFirst = firstChildIndex === 0;
    const isLast = firstChildIndex === items.length - 1;

    console.log(`Item ${index} is ${isFirst ? '' : 'not '}the first child.`);
    console.log(`Item ${index} is ${isLast ? '' : 'not '}the last child.`);
  }

  render() {
    return (
      <li ref={el => this.listItemRef = el}>
        {this.props.item}
      </li>
    );
  }
}

class List extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map((item, index) => (
          <ListItem key={index} index={index} item={item} items={this.props.items} />
        ))}
      </ul>
    );
  }
}

export default List;