reactjs - 重新渲染 ReactiveList 结果

Question

我正在尝试使用响应式搜索库构建搜索引擎。有人知道我如何触发 ReactiveList 结果的重新渲染吗？（例如，使用按钮 onClick 事件？）

Answer 1

如果您有类组件，请尝试以下代码

this.forceUpdate();

Answer 2

不幸的是，我无法在这里提供我的完整代码。但我会尝试解释我的问题是什么。在我的主要应用程序组件中，我确实有 ReactiveBase、DataSearch 和 ReactiveList 以及几个按钮：

const App = () => (
  <ReactiveBase
   app="Test"
   credentials="null"
   url="http://localhost:9200"
   analytics={false}
   searchStateHeader
   >
   <DataSearch />
   <ReactiveList
   componentId="result"
   dataField="_score"
   renderItem={renderItem}
   >
<div><Switch defaultChecked onChange={onSpeciesChange} style={{ marginRight: '5px', background: "brown" }} id="cellines"/> <label> Celline </label></div>
<div><Switch defaultChecked onChange={onSpeciesChange} style={{ marginRight: '5px', background: "blue" }} id="chemicals"/> <label> Chemicals </label></div>

所以按钮在我的主 App 组件中呈现，我确实有一个函数 onSpeciesChange，它基本上用布尔值更新一个名为 entityswitchstatus 的全局对象：

function onSpeciesChange(checked,event) {
  if (event.target.id === "cellines") { entityswitchstatus.cellines=checked; }
  else if (event.target.id === "chemicals") { entityswitchstatus.chemicals=checked; }
  else if (event.target.id === "diseases") { entityswitchstatus.diseases=checked; }
  else if (event.target.id === "genes") { entityswitchstatus.genes=checked; }
  else if (event.target.id === "mutations") { entityswitchstatus.mutations=checked;}
  else if (event.target.id === "species") { entityswitchstatus.species=checked; }
  console.log(entityswitchstatus);
}

在 ReactiveList 组件的 renderItem 函数中，我正在处理来自 Elasticsearch 的响应。如果有某个字段并且全局 entityswitchstatus 为真，我会突出显示弹性搜索响应的另一个字段。这一切都发生在 ReactiveList 的 renderItem 函数中。

function renderItem(res) {
if (res.ptc_species && entityswitchstatus.species) { var species_classname = createHighlighClassObject(res.ptc_species,"species"); } else { res.ptc_species = [] }
}

基本上通过单击按钮，我当然可以更改全局对象 entityswitchstatus。但这不会导致 ReactiveList 组件的重新渲染，这也是预期的。我不能将任何额外的道具传递给 renderItem 或者至少我不知道如何。所以我的想法是通过单击主 App 组件中的按钮来简单地调用 ReactiveList 组件的重新渲染。

希望这不会太混乱。