React组件问题：根据文章阅读时长显示对应数量表情符号

核心逻辑梳理 #

要实现对应数量的表情展示，关键是根据时长区间计算需要重复的表情次数：

• 当阅读时长＜30分钟：用Math.ceil(minutes / 5)计算咖啡杯☕️的数量（向上取整）
• 当阅读时长≥30分钟：用Math.ceil(minutes / 10)计算便当盒🍱的数量（向上取整）
• 最后将表情重复对应次数，拼接时长文本即可

修改后的React组件代码 #

import React from 'react';

const ReadTimeIndicator = ({ minutes }) => {
  let emoji;
  let count;

  if (minutes < 30) {
    emoji = '☕️';
    count = Math.ceil(minutes / 5);
  } else {
    emoji = '🍱';
    count = Math.ceil(minutes / 10);
  }

  // 生成重复的表情字符串
  const emojiString = emoji.repeat(count);

  return (
    <span>{emojiString} {minutes} min read</span>
  );
};

// 测试代码：遍历测试数组渲染组件
const App = () => {
  const testDurations = [5, 15, 47];
  return (
    <div>
      {testDurations.map((duration) => (
        <ReadTimeIndicator key={duration} minutes={duration} />
      ))}
    </div>
  );
};

export default App;

测试效果 #

针对测试数组[5,15,47]，渲染结果如下：

• 5分钟：☕️ 5 min read
• 15分钟：☕️☕️☕️ 15 min read
• 47分钟：🍱🍱🍱🍱🍱 47 min read

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