我刚刚使用‘React-rails’在我的rails项目中安装了一个新的反应,并在其之上添加了searchkit。但是我遇到了一些错误。
未捕获的不变违规:addComponentAsRefTo(…):只有ReactOwner可以具有引用。您可能正在向未在组件render方法内部创建的组件添加引用,或者您已加载多个React副本。
render
app / assets / javascripts / components / 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缺点是难以与其集成外部库。它可以快速设置和开始使用,但是一旦您要安装其他React库,就会遇到麻烦。
react- rails
我之前遇到过这个问题,而我所做的是改为使用 https://github.com/netguru/react_webpack_rails。如果您想要更多一点,请查看https://github.com/shakacode/react_on_rails。这两个选项需要花费更多的精力来设置,但是如果您对React及其生态系统很认真的话,这是非常值得的。
顺便说一句:Searchkit看起来很棒!