请教报错“Only a ReactOwner can have refs”

#1

最近在学些react，但是在使用ref的时候总是报错：

bundle1.js:833 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).

使用的react版本是v15.1.0，其他的都没啥问题，就是只要写ref就出错。实在找不出啥问题。。求指点迷津。。

依赖包：

"devDependencies": {
    "babel-core": "^6.11.4",
   "babel-loader": "^6.2.4",
   "babel-preset-es2015": "^6.9.0",
   "babel-preset-react": "^6.11.1",
   "react": "^15.2.1",
   "react-dom": "^15.2.1",
    "webpack": "^1.13.1"
  }

index.html

<div id="app"></div>
<script src="../dist/react.min.js"></script>
<script src="out/bundle1.js"></script>

App.js

import React from "react";
import ReactDOM from "react-dom";
import Bpage from "./Bpage.js";

class App extends React.Component {
   render(){       
   return (
       <Bpage name="todolists form props" />
   )
    }
}
ReactDOM.render(<App/>, document.getElementById("app"));

Bpage.js

export default class Bpage extends React.Component {
  onClickHandler(){
    console.log(React.findDOMNode(this.refs.testRef));
  }
  render(){       
        return (
            <div className="panel">
                <div ref="testRef">{this.props.name}</div>
                <button onClick = {this.onClickHandler.bind(this)}>点击</button>
            </div>
        )
    }
}
#2

两个React冲突。 试试在html把react.min的script去掉

#4

直接去掉之后，会报
bundle.js:21245 Uncaught ReferenceError: React is not defined 。。。

使用 15.0.1换成15.2.1依然会出问题。

#5

不妨试试 https://github.com/facebookincubator/create-react-app ？

#6

感觉应该是使用版本的问题。React.findDOMNode 方法在低版本下会报warning，高版本会直接出错吧。使用ReactDOM.findDOMNode 试试呢

#7

现在换了个方法，把原来App.js中的import React、、和 ReactDOM改为require就可以了
页面中还引入

但是我不知道为什么会这样啊。。求解释。。

原来的entry.js

require("./App.js");

现在改为

var React = require("react");
var ReactDOM = require("react-dom");
require("./App.js");

原来的App.js

import React from "react";
import ReactDOM from "react-dom";
import Bpage from "./Bpage.js";

class App extends React.Component {
   render(){       
   return (
       <Bpage name="todolists form props" />
   )
    }
}
ReactDOM.render(<App/>, document.getElementById("app"));

改为

import Bpage from "./Bpage.js";

class App extends React.Component {
   render(){       
   return (
       <Bpage name="todolists form props" />
   )
    }
}
ReactDOM.render(<App/>, document.getElementById("app"));
#8

还没有使用ReactDOM.findDOMNode呢，现在是只要dom上有ref这个属性了，运行起来就会报错的。

#9

应该是 @yjcxy12 所说的问题，至于去掉 <script src="../dist/react.min.js"></script> 出现 React is not defined 可能是哪个模块没引入 React 导致的吧，或者 webpack 的配置有问题！

#10

node的加载机制，require（‘react’）,会优先在当前目录查找react，，，，再到node_module中找。使用import是ES6的语法，import React form ‘实际react.js存放地址’。。应该是这样搞才对。

#11

应该是的，html中应该只需要生成的bundle.js就行了，
因为我看生成的bundle.js中也有React的东西。。
但是webpack.config不知道怎么配置
这个是webpack.config。。

'use strict';
var path = require('path');

module.exports = {
    entry: [
        "./src/entry.js"
    ],
    output: {
        path: path.join(__dirname, 'out'),
        publicPath: './out/',
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.js?$/,
                loader: 'babel',
                exclude: /node_modules/,
                query:{
                    presets:["es2015","react"]
                }
            }
        ]
    },
    resolve: {
        extensions: ['', '.js', '.jsx', '.json']
    }
};
#12

感谢。。

发现问题了，去掉html中的react.js之后，后面的组件中没有引入React。。所以才出现React未定义。。

#13

谢谢你，已经解决了。

#14

React中文社区-2群 523838207

#15

我也遇到这个问题了，不一样的是我的html中没有引用react，问题出在npm 引用了两个react版本，分别是react & react-dom，参考官网：https://facebook.github.io/react/warnings/refs-must-have-owner.html
使用命令 npm ls react 发现有两个版本，重新安装一下固定版本就好了。希望对后来者有帮助。