javascript - react中使用ref报错

问题描述

问 题

var MyComponent = React.createClass({
  handleClick: function() {
    this.refs.myTextInput.focus();
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput" />
        <input type="button" value="Focus the text input" onClick={this.handleClick} />
      </div>
    );
  }
});

ReactDOM.render(
  <MyComponent />,
  document.body
);

通过用this.refs.myTextInput.focus();,可是页面没有效果,提示错误:

Error: 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).

求指导,谢谢

解决方案

亲测没有问题;
这类的报错一般出现在没有使用render的component里面，比如下面这样：

const Comp = ({test}) => {
    return (
        <div ref="error">assdfas</div>
    )
}

你这里的写法是没有问题，接下来需要确认一下你的react的版本，也就是这个原因 ‘you have multiple copies of React loaded’

这篇关于javascript - react中使用ref报错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！