反应错误(只有 ReactOwner 可以有参考.) [英] React Error (Only a ReactOwner can have refs.)

问题描述

我刚刚使用 'React-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({渲染:函数(){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;返回 (<div><SearchkitProvider searchkit={sk}><布局><顶栏><SearchBox autofocus={true} searchOnChange={true} prefixQueryFields={["actors^1","type^2","languages","title^10"]}/></TopBar><布局体><侧边栏><HierarchicalMenuFilter fields={[type.raw", genres.raw"]} title=Categories";id=类别"/><RefinementListFilter id="演员";标题=演员"字段=actors.raw"运算符=AND"大小={10}/></侧边栏><布局结果><操作栏><ActionBarRow><HitsStats/></ActionBarRow><ActionBarRow><选定的过滤器/><重置过滤器/></ActionBarRow></ActionBar><Hits mod="sk-hits-grid";hitsPerPage={10} itemComponent={MovieHitsGridItem} sourceFilter={[title", poster", imdbId"]}/><NoHits/></LayoutResults></LayoutBody></布局></SearchkitProvider>

);}});

React 相当新，所以不太确定为什么会出现这些问题?

谢谢

解决方案

好的，我刚刚浏览了这个 searchkit 库.基于它是一个 React 组件并且您使用的是 react-rails 这一事实，我几乎可以肯定您会遇到同时拥有两个 React 实例的问题.react-rails 缺点是很难将外部库与其集成.设置和开始使用很快，但一旦你想安装其他反应库，你就会碰壁.

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

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

I've just installed a fresh react into my rails project with 'React-rails' and added searchkit on top of it. But I'm getting some errors with it.

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.

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>);
  }
});

Fairly new with React, so not too sure why these problems are occuring?

Thanks

解决方案

Ok, I just browsed through this searchkit library. Based on the fact it's a React component and you are using react-rails, I'm almost certain you are running into the issue of having two React instances at one time. react-rails drawback is the difficulty to integrate external libraries with it. It's quick to setup and start using but as soon as you want to install other react libraries, you will hit a wall.

I had this issue before and what I did was to use https://github.com/netguru/react_webpack_rails instead. If you want something abit more then have a look at https://github.com/shakacode/react_on_rails. These two options require more effort to setup but well worth it if you are serious about React and its ecosystem.

BTW: Searchkit looks great!

这篇关于反应错误(只有 ReactOwner 可以有参考.)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！