Question

我有一个应用程序，并使用vis.js构建时间轴事件。我正在使用React。我想在每个事件附近添加一个图标，所以我使用groupTemplate，并且希望在那里渲染一个带有组文本和图标的组件。在我添加的选项中：

groupTemplate: (item, element) => {
    if (!item) return;
        ReactDOM.render(<TimelineGroupComp item={item}/>, element);
}

TimelineGroupComp组件呈现功能：

return (
     <div className="primary-wrapper" key={this.props.item.content}>
           <div style="background-image:url(../images/myIcon.svg);"/>
     </div>
);

我得到了正确的图标，但是文本是item.id而不是item.content。

我尝试在TimelineGroupComp中添加具有正确文本的跨度，但它还会呈现item.id，不仅呈现正确文本。

我还有另一个问题：当我折叠/展开组时，控制台中出现错误：警告：render（...）：看起来像这个的React渲染内容
不使用React删除容器。不支持，它将导致错误。而是调用ReactDOM.unmountComponentAtNode清空一个容器。并且该组呈现为正常状态，忽略了我的组件。

Answer 1

我知道这篇文章已经发表了将近一年，但是我想我还是会把这个问题的答案发布给以后遇到同样问题的任何人。我遇到了同样的问题，这就是我解决的方法。

从React 16开始，如果要在Vis时间轴中使用React模板，则必须在React.createPortal选项中使用groupTemplate，请参见https://jsfiddle.net/api/post/library/pure/。

对于上面的代码，正确的groupTemplate为：

groupTemplate: (item, element) => {
  if (!item) return;
  ReactDOM.createPortal(
    ReactDOM.render(<TimelineGroupComp item={item}/>, element),
    element
  )
}

如何使用groupTemplate

1 个答案: