ruby-on-rails – React Error(只有一个ReactOwner可以有refs.)

我刚刚用 ‘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看起来很棒！