Question

我是新的反应/ redux并尝试将此预加载器lib与react / redux一起使用： https://github.com/UYEONG/react-preloader-icon

尝试使用时，我在浏览器控制台中收到此错误：

未捕获错误：addComponentAsRefTo（...）：只有ReactOwner可以有refs。您可能正在向未在组件render方法中创建的组件添加引用，或者您已经加载了多个React副本...

我在容器组件图书＆＃39; 渲染方法...

中使用它

为什么我收到此错误？
这是什么意思？

使用预加载器组件的正确方法是什么？

class Books extends React.Component {

  constructor(props, context) {
    super(props, context);
    this.redirectToAddBookPage = this.redirectToAddBookPage.bind(this);
  }

  createBookRow(book, index) {
    return <div key={index}>{ book.title }</div>;
  }

  redirectToAddBookPage() {
    browserHistory.push('/book');
  }

  render() {
    const {books} = this.props;
    return (
      <div>
        <h1>Books</h1>
        <input type="submit"
               value="Add new book"
               className="btn btn-primary"
               onClick={this.redirectToAddBookPage}/>

        <PreloaderIcon
          type={ICON_TYPE.OVAL}
          size={32}
          strokeWidth={3}
          strokeColor="#F0AD4E"
          duration={800}
        />

        <BookList books={books}/>
      </div>
    );
  }

}

Books.propTypes = {
  books: PropTypes.array.isRequired,
};

function mapStateToProps(state, ownProps) {
  return {
    books: state.books
  };
}

export default connect(mapStateToProps)(Books);

Answer 1

如果要在render方法之外添加ref元素，则会出现docs状态。或者，如果你有多个反应副本，它可能会发生。也许试试看

rm -rf node_modules＆amp;＆amp; npm install

Answer 2

我多次加载反应，因此状态在多个反应实例之间共享...我通过将其添加到我的webpack.config.js文件解决了这个问题，迫使该应用仅使用＆＃39; primary＆＃39 ;来自node_modules/react文件夹的依赖：

resolve: {
  alias: {
    'react': path.join(__dirname, 'node_modules', 'react')
  }
}

了解更多here。

使用redux的react-preloader-icon

2 个答案: