0

我从 Instantsearch.js 收到一个对我来说没有任何意义的错误。错误是：

错误：发生缩小异常；使用未缩小的开发环境获取完整的错误消息和其他有用的警告。

我用有问题的代码创建了一个小提琴：

https://jsfiddle.net/qkqzgsv9/

这是HTML：

<div type="text" id="search-box" class="form-control"></div>
<table class="table table-striped">
            <thead>
                <tr>
                    <th>Number</th>
                    <th>Name</th>
                    <th>Starts</th>
                    <th>Duration</th>
                    <th>Room</th>
                    <th><span class="glyphicon glyphicon-info-sign"></span></th>
                </tr>
            </thead>
            <tbody id="hits-container">
            </tbody>
</table>
<div id="pagination-container"></div>

这是Javascript：

  var search = instantsearch({
    appId: '5V0BUFDX8J',
    apiKey: 'a25692c12853aea7a77c5a7125498512',
    indexName: 'C86FE050-6C48-11E5-84AA-BA5F164D0BA4_events',
    urlSync: { useHash: true }
  });

search.addWidget(
  instantsearch.widgets.searchBox({
    container: '#search-box',
    autofocus: true,
    placeholder: 'Search for events by keyword, description, or event number.'
  })
);

 search.addWidget(
    instantsearch.widgets.hits({
      container: '#hits-container',
      templates: {
        empty: 'No events found',
        item: '<tr><td><a href="{{view_uri}}">{{event_number}}</a></td><td><a href="{{view_uri}}" target="_new">{{name}}</a></td><td>{{startdaypart_name}}</td><td>{{duration_name}}</td><td>{{room_name}}</td><td><span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" title="{{description}}"></span></td></tr>'
      },
    })
  );

  search.addWidget(
    instantsearch.widgets.pagination({
      container: '#pagination-container'
    })
  );

  search.start();

它发生在 Safari 和 Chrome 中。而且我什至没有使用 Instantsearch.js 的缩小版本。知道是什么原因造成的吗？

4

1 回答 1

5

这是一个棘手的错误，它是因为这个小部件在内部使用 React 而生成的。

小部件尝试呈现将包含您的模板的 div。但这是不正确的，因为您的模板包含无法在 div 中呈现的 td，因此浏览器会尝试修复该问题。这会导致 React 抛出一个不变的违规错误，因为 DOM 不是它所期望的。最后你可以看到这个特定的错误，因为 React 在构建中被缩小了。

解决方法是不使用 td 或等待修复此问题https://github.com/algolia/instantsearch.js/issues/707。

于 2015-12-29T19:44:07.473 回答