React错误（只有ReactOwner可以具有引用。）

Question

我刚刚使用‘React-rails’在我的rails项目中安装了一个新的反应，并在其之上添加了searchkit。但是我遇到了一些错误。

未捕获的不变违规：addComponentAsRefTo（…）：只有ReactOwner可以具有引用。您可能正在向未在组件render方法内部创建的组件添加引用，或者您已加载多个React副本。

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还是很新的东西，所以不太确定为什么会出现这些问题？

谢谢

Answer 1

好的，我只是浏览了这个Searchkit库。基于它是一个React组件并且您正在使用的事实react- rails，几乎可以肯定您遇到了一次拥有两个React实例的问题。react- rails缺点是难以与其集成外部库。它可以快速设置和开始使用，但是一旦您要安装其他React库，就会遇到麻烦。

我之前遇到过这个问题，而我所做的是改为使用
https://github.com/netguru/react_webpack_rails。如果您想要更多一点，请查看https://github.com/shakacode/react_on_rails。这两个选项需要花费更多的精力来设置，但是如果您对React及其生态系统很认真的话，这是非常值得的。

顺便说一句：Searchkit看起来很棒！