如何在导航栏中用ReactJS编写上标

import React, { Component } from 'react';

class NavigationBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      badgeContent: 0, // 上标内容，默认为0
    };
  }

  render() {
    return (
      <div className="navigation-bar">
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Contact</li>
          <li>
            Notifications
            {this.state.badgeContent > 0 && (
              <sup className="badge">{this.state.badgeContent}</sup>
            )}
          </li>
        </ul>
      </div>
    );
  }
}

export default NavigationBar;

.badge {
  background-color: red;
  color: white;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 50%;
  position: absolute;
  top: -5px;
  right: -5px;
}