Question

我尝试让我的React Search框过滤器正常工作。

看看this sandbox到目前为止我有什么。

我有一个HOC withSection.js，现在我只在组件中添加一个<section>标记：

const withSection = Component => props => (
  <section>
    <Component {...props} />
  </section>
)

然后在父组件中，将我的SearchBox组件包装到此HOC中并进行渲染：

const SectionSearchBox = withSection(SearchBox);

<SectionSearchBox search={search} setSearch={setSearch} />

以某种方式，一旦我将搜索框包装到此HOC中，它就会破坏功能吗？

这是怎么了？

Answer 1

您需要在其父组件的范围之外声明SectionSearchBox。在codesandbox示例中，它看起来像：

import withSection from "./hoc/withSection";
import SearchBox from "./SearchBox";

const SectionSearchBox = withSection(SearchBox);

function ArticlePage() {
  ...
};

否则，将使用其父项的每个新渲染来重新创建该组件的每个实例（即，当搜索字词更改时）。这导致搜索框在每次击键时都显得没有重点，因为一个新的输入元素被放置在其位置上，并且具有上一次渲染的值。

通过高级组件进行反应搜索过滤器（挂钩）不起作用

1 个答案: