带有 redux 的 react-preloader-icon

Question

我是 react/redux 的新手，正在尝试将此预加载器库与 react/redux 一起使用： https://github.com/UYEONG/react-preloader-icon

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

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

我在容器组件中使用它 Books 的 渲染方法...

为什么会出现此错误？
这是什么意思？

preloader组件的正确使用方法是什么？

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

如 docs 所述，如果您在 render 方法之外添加 ref 元素，则会发生这种情况。或者，如果您有多个 React 副本，则可能会发生这种情况。也许试试运行

rm -rf node_modules && npm install

Answer 2

我多次加载反应，所以状态在多个反应实例之间共享...我通过将此添加到我的 webpack.config.js 文件来解决它，强制应用程序仅使用 'primary'来自 node_modules/react 文件夹的依赖项：

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

阅读更多here。

带有 redux 的 react-preloader-icon

react-preloader-icon with redux

reactjs

react-redux