dantrain / react-stonecutter

Animated grid layout component for React

Home Page:http://dantrain.github.io/react-stonecutter

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs.

Benjamin5050 opened this issue · comments

I want to use react-stonecutter with my existing project. However when I tried the simple usage example, nothing is displayed from the <CSSGrid/>. All I am getting is this error:

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 (details: https://fb.me/react-refs-must-have-owner).

import React from 'react'

import { CSSGrid, layout } from 'react-stonecutter';

export default class Photos extends React.Component {
    render() {
        return(
            <div id="profile_photos">
               <div id="profile_photos_nav">
                   <span class="photo_nav" id="photo_timeline">
                       <button class="active_btn">Timeline Photos</button>
                    </span>
                   <span class="photo_nav" id="photo_profile">
                       <button>Profile Photos</button>
                   </span>
                   <span class="clear_both"></span>
               </div>

               <CSSGrid
                  component="ul"
                  columns={5}
                  columnWidth={150}
                  gutterWidth={5}
                  gutterHeight={5}
                  layout={layout.pinterest}
                  duration={800}
                  easing="ease-out"
                >
                  <li key="A" itemHeight={150}>A</li>
                  <li key="B" itemHeight={120}>B</li>
                  <li key="C" itemHeight={170}>C</li>
                </CSSGrid>

            </div>
        );
    }
}

I don't know whether this is relevant, but I am using "react": "^15.1.0", and while installing this package, I got this warning:

npm WARN peerDependencies The peer dependency react@^15.2.0 included from react-addons-transition-group will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.

Can you please help me with this? Thank you.

Okay, I had to remove react package from inside the react-stonecutter package. And there was no error.

How did you remove react