react-bootstrap 0.32.1版本ListGroup显示异常问题排查

Hey there! Let's break down the issues with your ListGroup code—React-Bootstrap 0.32.1 is an older version tied to Bootstrap 3, so it has specific API rules that differ from newer releases:

Key Problems & Fixes #

1. Incorrect header Prop Usage #

In v0.32.1, the ListGroupItem does not accept a header prop to set header text. Instead, you need to nest a <ListGroupItem.Header> component inside the item to get proper header styling. Your current code passes header as a prop, which gets ignored, so the text isn't styled like a header at all.

2. Missing Required Bootstrap 3 CSS #

React-Bootstrap doesn't include Bootstrap's CSS by default. Since v0.32.1 is built for Bootstrap 3.x, you must include the matching Bootstrap 3 CSS file in your project—without it, all ListGroup styling (like padding, borders, active state colors) won't load, leaving raw, unstyled elements.

3. Minor Typo (Optional but Good Fix) #

You have a typo: paitent should be patient—this doesn't break functionality, but it's good to correct for clarity.

Fixed Code Example #

Here's the corrected version that follows v0.32.1's API rules:

import React from 'react';
import { ListGroup, ListGroupItem } from 'react-bootstrap';

class MyListGroup extends React.Component {
  render() {
    return (
      <ListGroup>
        <ListGroupItem active href="#">
          <ListGroupItem.Header>Patient 1</ListGroupItem.Header>
          Session 1
        </ListGroupItem>
        <ListGroupItem href="#">
          <ListGroupItem.Header>Patient 2</ListGroupItem.Header>
          Session 2
        </ListGroupItem>
      </ListGroup>
    );
  }
}

export default MyListGroup;

Don't Forget the CSS! #

Make sure you include Bootstrap 3.x in your project (either via CDN or local import):

<!-- Add this in your public/index.html -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

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