Javascript 将文本与React组件中的组件混合

有没有办法缩短这个

const visitInfo = (date, guide, attendee) => {
  return (
    <>
      {(date || guide) && ' The tour was performed'}
      {date && ' at '}
      {date && <TimeFormat>{date}</TimeFormat>}
      {date && ' on '}
      {date && <DateFormat}>{date}</DateFormat>}
      {guide && ` by ${guide}`}
      {attendee && ` and was attended by ${attendee}`}.
    </>
  )
}

const visitInfo=（日期、指南、与会者）=>{
返回(
{（日期| | |导游）&&“巡演已完成”}
{date&&'at'}
{date&&{date}
{date&&'on'}
{date&&{date}
{guide&&`by${guide}`}
{attendee&&`并有${attendee}`}参加。
)
}

const visitInfo=（日期、指南、与会者）=>{
返回(
{（日期| | |导游）&&“巡演已完成”}
{date&`at${{date}}在${{date}}上
{guide&&`by${guide}`}
{attendee&&`并有${attendee}`}参加。
)
}

文本和其他元素都算作一个元素的子元素，因此您也可以将它们包装在一个片段中，这样就可以排除重复的

日期和
：

const visitInfo = (date, guide, attendee) => {
  return (
    <>
      {(date || guide) && ' The tour was performed'}
      {date && (
        <> at <TimeFormat>{date}</TimeFormat> on <DateFormat>{date}</DateFormat></>
      )}
      {guide && ` by ${guide}`}
      {attendee && ` and was attended by ${attendee}`}.
    </>
  );
}

const visitInfo=（日期、指南、与会者）=>{
返回(
{（日期| | |导游）&&“巡演已完成”}
{日期&&(
在{date}在{date}
)}
{guide&&`by${guide}`}
{attendee&&`并有${attendee}`}参加。
);
}

此处的格式化程序似乎不满意，但在例如中工作正常。
…您尝试了什么吗？如果没有其他问题的话，
date&&
似乎可以解决。@jornsharpe是的，我花了很长时间想办法避免重复
date&&
，但除了上面的问题，我找不到其他解决方案，这就是我为什么发布这个问题的原因。这看起来像是我什么都没试过吗？你别提试过别的东西，我们只能继续了。而且它似乎不是很传统；visitInfo应该是基于功能的组件吗？DateFormat和TimeFormat真的把日期当作孩子吗？这能回答你的问题吗@jonrsharpe感谢您的反馈，非常感谢，我很高兴了解。您的控制台有任何错误吗？抱歉。修正了我的打字错误。现在尝试使用上面的代码。没有注意到：）谢谢！组件渲染为
[object object]
，即
在[object object]
@a2441918上的[object object]执行了巡更，这不是渲染组件的方式
const visitInfo = (date, guide, attendee) => {
  return (
    <>
      {(date || guide) && ' The tour was performed'}
      {date && (
        <> at <TimeFormat>{date}</TimeFormat> on <DateFormat>{date}</DateFormat></>
      )}
      {guide && ` by ${guide}`}
      {attendee && ` and was attended by ${attendee}`}.
    </>
  );
}