Question

我刚刚使用'React-rails'在我的rails项目中安装了新的反应，并在其上添加了searchkit。但是我发现了一些错误。

未捕获的不变违规：addComponentAsRefTo（...）：只有ReactOwner可以有refs。您可能正在为未在组件的render方法中创建的组件添加引用，或者您已经加载了多个React副本。

应用/资产/ Javascript角/组件/ 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缺点是难以将外部库与其集成。它可以快速设置并开始使用，但只要你想安装其他反应库，你就会碰壁。

之前我遇到过这个问题，而我所做的就是使用https://github.com/netguru/react_webpack_rails代替。如果你想要更多的东西，那么看看https://github.com/shakacode/react_on_rails。这两个选项需要更多的设置，但如果您认真对待React及其生态系统，那么这个选项非常值得。

BTW：Searchkit看起来很棒！

Answer 2

我似乎要参加聚会晚了，但是以防万一，有人可能再次遇到这个问题，需要更直接的解决方案。

供您参考：

导轨5.2.0

Ruby 2.5.1p57（2018-03-29修订版63029）[x86_64-darwin17]

React-rails (2.3.1)

我相信这也可能发生在不同的版本和红宝石版本上。

就像@kasperite所说的一样，我确定您错误地拥有了两个React实例。您是'require react'的两倍，或者是'require_tree .'文件中的'application.js'遇到的双重实例。

更具体地说，您应该检查'application.js'文件中的以下几行：

//= require react
//= require react_ujs
//= require components
//= require_tree .

问题是您首先通过require react指令加载React，然后使用require_tree .指令再次加载。

参考：https://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives

或如上面的链接中那样直接从官方指南中引用

require_tree指令告诉Sprockets将指定目录中的所有JavaScript文件递归地包含到输出中。必须相对于清单文件指定这些路径。您还可以使用require_directory指令，该指令仅在指定目录中包含所有JavaScript文件，而无需递归。

要对问题进行排序，您只需完全删除require_tree .指令或通过删除等号将其取消设置-将此//= require_tree .转到// require_tree .

希望这一帮助并为之欢呼。

反应错误（只有ReactOwner可以有refs。）

2 个答案: