Html React将时间线元素视为空，即使有条件检查也是如此

我正在使用react事件时间线库（此处：）为我的一个页面创建时间线

我创建了一个名为：events的事件列表，并将其传递给日程表。时间线由两部分组成：第一部分是初始事件，创建页面时，每个时间线顶部都有一个时间线事件来捕捉该事件。第二部分是根据页面状态提供的事件列表动态生成的

React抛出这个时间轴错误，基于调试，我认为问题在于下面的html结构，其中&检查是：

我得到的错误是：

React.cloneElement（…）：参数必须是React元素，但传递了null

组件中出现上述错误： 在时间线中（由TimelineComponent创建）

{（数据）&&（（）}
//^^^^创建事件
//时间轴的动态部分。我将事件中的每个元素映射到一个时间线事件
{events&&（events.map）（（event，index）=>(
{this.showInfoBox（event.type）&&
(
{this.getInfo（event.type）}
)}
{event.comment}
)))}

null&&something

解析为

null

看起来

无法接受

null

作为其

道具。子对象
。在呈现之前尝试准备事件
：

let allEvents = [];
if (data) allEvents.push(/*something*/)
if (events) {
  allEvents = allEvents.concat(events.map(/*something*/));
}
...
{allEvents.length > 0 && (
  <Timeline>
    {allEvents.map(event => <TimelineEvent/>)}
  </Timeline>
)}

null&&something
解析为
null

看起来
无法接受
null
作为其
道具。子对象
。在呈现之前尝试准备事件
：

let allEvents = [];
if (data) allEvents.push(/*something*/)
if (events) {
  allEvents = allEvents.concat(events.map(/*something*/));
}
...
{allEvents.length > 0 && (
  <Timeline>
    {allEvents.map(event => <TimelineEvent/>)}
  </Timeline>
)}

我的解决方案是，当值为null时，只需返回一个空div，当您运行它时，它就会正常工作

我认为上面的解决方案会导致性能问题，因为它循环了两次

我希望它能有所帮助。
我的解决方案是，当值为null时，只需返回一个空div，当您运行它时，它就会正常工作

我认为上面的解决方案会导致性能问题，因为它循环了两次

我希望这能有所帮助。
这就是我最终使用的方法。当我生成事件列表时，我只是将创建事件添加到列表中，并根据creationDateTime对它们进行排序。这就是我最终使用的方法。生成事件列表时，我只需将创建事件添加到列表中，并根据creationDateTime对其进行排序。
const childrenWithProps = React.Children.map(children, child => React.cloneElement(child, { orientation }))