Question

我正在使用react-event-timeline lib（这里：https://www.npmjs.com/package/react-event-timeline）为我的其中一个页面创建时间线。

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

React会抛出此时间轴错误，并且基于调试，我认为问题出在 &&检查所在的html结构中：

我得到的错误是：

React.cloneElement（...）：参数必须是一个React元素，但是您传递了null 。

上面的错误发生在组件中：在时间轴中（由TimelineComponent创建）


<Timeline className={styles.timeline}>
                  {(data) && (<TimelineEvent
                      createdAt={Moment(data.creationDateTime).fromNow()}
                      icon={<ActionIcon variant={'create'} fontSize={18} />}
                      iconStyle={this.bubbleStyles('create').icon}
                      bubbleStyle={this.bubbleStyles('create').bubble}
                      subtitle={this.emptyContainer()}
                      contentStyle={contStyle}
                      title={this.creationTitle(data.user)}/>)}

// ^^^ the creation event
// vvv the dynamic part of the timeline. I map each element in events to a timelineEvent
                  {events && (events.map((event, index) => (
                      <TimelineEvent
                          key={index}
                          createdAt={Moment(event.creationDateTime).fromNow()}
                          icon={event.type && <ActionIcon variant={event.type} fontSize={18} />}
                          iconStyle={event.type && this.bubbleStyles(event.type).icon}
                          bubbleStyle={event.type && this.bubbleStyles(event.type).bubble}
                          subtitle={this.emptyContainer()}
                          contentStyle={contStyle}
                          title={this.titleElement(event, index)}>
                          {this.showInfoBox(event.type) &&
                          (<div className={styles.infoBox}>
                                  <div className={styles.infoBoxBody}>
                                      {this.getInfo(event.type)}
                                  </div>
                              </div>
                          )}
                          <div className={styles.commentBox}>
                              {event.comment}
                          </div>
                      </TimelineEvent>
                  )))}
              </Timeline>

Answer 1

null && something解析为null。

看来<Timeline>无法接受null作为其props.children。在呈现<Timeline>之前尝试准备事件：

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

可能是一个错误https://github.com/rcdexta/react-event-timeline/blob/master/components/Timeline.js#L8

const childrenWithProps = React.Children.map(children, child => React.cloneElement(child, { orientation }))

Answer 2

对此，我的解决方案是当该值为null时，只返回一个空的div，然后在运行它时就可以正常工作。

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

希望对您有帮助。

即使有条件检查，React也会将时间轴元素视为null

2 个答案: