React中如何提取props里date_joined字段的日期部分？

针对你遇到的ISO格式日期字符串（如2022-08-08T16:53:11.223390Z），可以用以下几种实用方法提取日期部分：

方法1：字符串分割（最直接高效） #

利用ISO日期的固定结构，直接按T分割字符串并取第一部分：

<h5 className="font-size-15 mt-4">Date Joined</h5>
<p className="text-muted">
  <i className='bx bx-id-card bx-tada' ></i>
  &nbsp; &nbsp; {this.props.pathologist.date_joined.split('T')[0]}
</p>

方法2：Date对象处理（支持格式自定义） #

如果后续需要调整日期展示格式，用原生Date对象更灵活：

// 自定义日期格式化函数
const formatDate = (isoString) => {
  const date = new Date(isoString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 在JSX中调用
<h5 className="font-size-15 mt-4">Date Joined</h5>
<p className="text-muted">
  <i className='bx bx-id-card bx-tada' ></i>
  &nbsp; &nbsp; {formatDate(this.props.pathologist.date_joined)}
</p>

也可以利用本地化方法快速生成YYYY-MM-DD格式：

const formatDate = (isoString) => new Date(isoString).toLocaleDateString('en-CA');

方法3：正则表达式匹配 #

用正则精准提取YYYY-MM-DD格式的日期片段：

<h5 className="font-size-15 mt-4">Date Joined</h5>
<p className="text-muted">
  <i className='bx bx-id-card bx-tada' ></i>
  &nbsp; &nbsp; {this.props.pathologist.date_joined.match(/^\d{4}-\d{2}-\d{2}/)[0]}
</p>

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