Javascript React Algolia instantsearch连接搜索框

我使用Algolia React InstantSearch和connectSearchBox创建自定义输入。我目前的做法如下：

const MySearchBox = connectSearchBox(({currentRefinement, refine}) => {
    return (
      <input
        type="text"
        placeholder="Search"
        value={currentRefinement}
        onFocus={()=> props.onFocus()}
        onBlur={()=> props.onBlur()}
        onChange={(e) => {refine(e.target.value)}}
      />
    );
  });

constmysearchbox=connectSearchBox（{currentRefineration，refine}）=>{
返回(
props.onFocus（）}
onBlur={（）=>props.onBlur（）}
onChange={（e）=>{refine（e.target.value）}
/>
);
});

然后使用以下代码进行实例化：

<InstantSearch
  onSearchStateChange={(result) => this.onSearchChange(result)}
  appId={appId}
  apiKey={apiKey}
  indexName={index}>
  <MySearchBox/>
</InstantSearch>

this.onSearchChange（结果）}
appId={appId}
apiKey={apiKey}
indexName={index}>

这很好用。然而，我想做的是能够将道具传递给MySearchBox。所以我会这样做：

const MySearchBox = (props) => {
  connectSearchBox(({currentRefinement, refine}) => {
    return (
      <input
        type="text"
        ....
      />
    );
  })
}

constmysearchbox=（道具）=>{
connectSearchBox（{currentRefinement，Refinee}）=>{
返回(
);
})
}

或者这个：

const MySearchBox = React.createClass({
  render() {
    return (
      connectSearchBox(({currentRefinement, refine}) => {
        return (
          <input
            type="text"
          />
        );
      })
    )
  }
});

const MySearchBox=React.createClass({
render（）{
返回(
connectSearchBox（{currentRefinement，Refinee}）=>{
返回(
);
})
)
}
});

但是，运行此代码时，我会出现以下错误：

MYSEARCHBOX（…）：必须返回有效的REACT元素（或NULL）。 您可能返回了未定义、数组或其他无效的 反对

---

最后，我如何将道具传递到MySearchBox？

您只需将道具传递到您的自定义搜索框并按如下方式检索它们：

自定义搜索框：

const MySearchBox = connectSearchBox(({ onFocus, onBlur, currentRefinement, refine }) => {
  return (
    <input
      type="text"
      placeholder="Search"
      value={currentRefinement}
      onFocus={() => onFocus()}
      onBlur={() => onBlur()}
      onChange={e => {
        refine(e.target.value);
      }}
    />
  );
});

constmysearchbox=connectSearchBox（{onFocus，onBlur，currentRefinement，refined}）=>{
返回(
onFocus（）}
onBlur={（）=>onBlur（）}
onChange={e=>{
细化（如目标值）；
}}
/>
);
});

用法：

<MySearchBox onFocus={} onBlur={} />

此外，我们现在正在将*上的

事件转发给
小部件