将文本放在React JS中的图标上方

在React JS中将文本放在图标上方可以通过使用CSS样式和React组件来实现。以下是一种常见的实现方式：

创建一个React组件，包含一个图标和文本元素。

import React from 'react';

const IconWithText = ({ icon, text }) => {
  return (
    <div className="icon-with-text">
      <div className="icon">{icon}</div>
      <div className="text">{text}</div>
    </div>
  );
};

export default IconWithText;

在CSS中定义样式，使文本位于图标上方。

.icon-with-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.icon {
  /* 根据需要设置图标的样式 */
}

.text {
  /* 根据需要设置文本的样式 */
}

在其他组件中使用IconWithText组件，并传入相应的图标和文本。

import React from 'react';
import IconWithText from './IconWithText';

const App = () => {
  return (
    <div>
      <IconWithText icon={<i className="fa fa-user" />} text="用户" />
      <IconWithText icon={<i className="fa fa-envelope" />} text="消息" />
    </div>
  );
};

export default App;

这样，文本就会显示在图标的上方。你可以根据需要自定义图标和文本的样式，并根据实际情况选择适合的图标库或自定义图标。

注意：以上示例中使用了Font Awesome图标库的图标，你可以根据自己的需求选择其他图标库或自定义图标。