我刚刚用
‘React-rails’在我的rails项目中安装了一个新的反应,并在其上添加了searchkit.但是我遇到了一些错误.
Uncaught Invariant Violation: addComponentAsRefTo(…): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component’s
render
method,or you have multiple copies of React loaded.
应用程序/资产/ Java脚本/组件/ search.js.jsx
const host = "http://demo.searchkit.co/api/movies" const sk = new Searchkit.SearchkitManager(host,{}) var Search = React.createClass({ render: function() { const SearchkitProvider = Searchkit.SearchkitProvider; const SearchBox = Searchkit.SearchBox; const Hits = Searchkit.Hits; const NoHits = Searchkit.NoHits; const HitsStats = Searchkit.HitsStats; const Layout = Searchkit.Layout; const LayoutBody = Searchkit.LayoutBody; const LayoutResults = Searchkit.LayoutResults; const SearchBox = Searchkit.SearchBox; const TopBar = Searchkit.TopBar; const SideBar = Searchkit.SideBar; const ActionBar = Searchkit.ActionBar; const ActionBarRow = Searchkit.ActionBarRow; const HierarchicalMenuFilter = Searchkit.HierarchicalMenuFilter; const RefinementListFilter = Searchkit.RefinementListFilter; const SelectedFilters = Searchkit.SelectedFilters; const ResetFilters = Searchkit.ResetFilters; const MovieHitsGridItem = Searchkit.MovieHitsGridItem; return (<div> <SearchkitProvider searchkit={sk}> <Layout> <TopBar> <SearchBox autofocus={true} searchOnChange={true} prefixQueryFields={["actors^1","type^2","languages","title^10"]}/> </TopBar> <LayoutBody> <SideBar> <HierarchicalMenuFilter fields={["type.raw","genres.raw"]} title="Categories" id="categories"/> <RefinementListFilter id="actors" title="Actors" field="actors.raw" operator="AND" size={10}/> </SideBar> <LayoutResults> <ActionBar> <ActionBarRow> <HitsStats/> </ActionBarRow> <ActionBarRow> <SelectedFilters/> <ResetFilters/> </ActionBarRow> </ActionBar> <Hits mod="sk-hits-grid" hitsPerPage={10} itemComponent={MovieHitsGridItem} sourceFilter={["title","poster","imdbId"]}/> <NoHits/> </LayoutResults> </LayoutBody> </Layout> </SearchkitProvider> </div>); } });
React相当新,所以不太确定为什么会出现这些问题?
谢谢
解决方法
好的,我刚刚浏览了这个searchkit库.基于它是一个React组件并且你正在使用react-rails的事实,我几乎可以肯定你遇到了一次有两个React实例的问题. react-rails的缺点是难以将外部库与它集成.它可以快速设置并开始使用,但只要你想安装其他反应库,你就会碰壁.
我以前遇到过这个问题,而我所做的就是使用https://github.com/netguru/react_webpack_rails.如果你想要更多的东西,那么看看https://github.com/shakacode/react_on_rails.这两个选项需要更多的努力设置,但如果你认真对待React及其生态系统,那么它是值得的.
顺便说一句:Searchkit看起来很棒!