解决JavaScript对象字符串中换行符（ ）在Web界面不生效的问题

export const TweetList = [
  {
    link: 'https://twitter.com/JayWuzer/status/1553804606265651200',
    tweet: "Being your full authentic self is a life hack. \n The ones who don't vibe with you will naturally be repulsed, and the ones who do vibe with you will naturally be drawn to you. \n Saves a LOT of time and heartache.",
    date: '7/31/2022' // 日期通常以字符串形式存储
  },
  // ... 其他推文
];

import React from 'react';
import { TweetList } from './helper'; // 假设TweetList在helper.js中

function TweetDisplay() {
  return (
    <div>
      <h2>最新推文</h2>
      {TweetList.map((tweetItem, index) => (
        <div key={index} style={{ marginBottom: '20px', border: '1px solid #eee', padding: '15px', borderRadius: '8px' }}>
          <p style={{ 
            whiteSpace: 'pre-line', // 关键样式
            fontFamily: 'Arial, sans-serif',
            fontSize: '16px',
            lineHeight: '1.6'
          }}>
            {tweetItem.tweet}
          </p>
          <a href={tweetItem.link} target="_blank" rel="noopener noreferrer" style={{ color: '#1da1f2', textDecoration: 'none' }}>
            查看原文
          </a>
          <span style={{ fontSize: '12px', color: '#888', marginLeft: '10px' }}>
            {tweetItem.date}
          </span>
        </div>
      ))}
    </div>
  );
}

export default TweetDisplay;

/* 例如：styles.module.css 或 global.css */
.tweetContent {
  white-space: pre-line;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

import React from 'react';
import { TweetList } from './helper';
import styles from './styles.module.css'; // 假设使用CSS模块

function TweetDisplay() {
  return (
    <div>
      <h2>最新推文</h2>
      {TweetList.map((tweetItem, index) => (
        <div key={index} className={styles.tweetCard}> {/* 假设有一个卡片样式 */}
          <p className={styles.tweetContent}> {/* 应用CSS类 */}
            {tweetItem.tweet}
          </p>
          {/* ... 其他内容 */}
        </div>
      ))}
    </div>
  );
}

export default TweetDisplay;