ReactJS版本和依赖关系中的冲突导致“无状态函数组件不能具有引用”

Question

自最近四天以来，这个问题一直困扰着我。 我正在使用React 15.6.1（尽管npm默认拉入15.6.2）。 这是我的package.json文件的部分列表：

"react": "^15.6.1",
"react-bootstrap": "^0.31.0",
"react-datepicker": "^0.55.0",
"react-document-meta": "^2.1.2",
"react-dom": "^15.6.1",
"react-dotdotdot": "^1.1.0",
"react-helmet": "^5.1.3",
"react-native-cards-slider": "^0.1.2",
"react-redux": "^4.4.7",
"react-redux-toastr": "^7.1.4",
"react-router": "^2.4.0",
"react-router-dom": "^4.1.1",
"react-router-redux": "^4.0.4"

我在索引文件中得到“无状态功能组件不能具有引用”。 错误指向此位置：

（匿名函数）src / index.js：15

  12 | const store = configure();
  13 | 
  14 | 
> 15 | ReactDOM.render(
  16 |   <Provider store={store}>
  17 |     <App />
  18 |   </Provider>,

下面给出了所有堆栈扩展错误显示的更详细信息：

Stateless function components cannot have refs.
▼ 17 stack frames were expanded.
invariant
node_modules/fbjs/lib/invariant.js:42
attachRef
node_modules/react-dom/lib/ReactCompositeComponent.js:845
addComponentAsRefTo
node_modules/react-dom/lib/ReactOwner.js:69
attachRef
node_modules/react-dom/lib/ReactRef.js:23
ReactRef.attachRefs
node_modules/react-dom/lib/ReactRef.js:42
attachRefs
node_modules/react-dom/lib/ReactReconciler.js:23
notifyAll
node_modules/react-dom/lib/CallbackQueue.js:76
close
node_modules/react-dom/lib/ReactReconcileTransaction.js:80
closeAll
node_modules/react-dom/lib/Transaction.js:209
perform
node_modules/react-dom/lib/Transaction.js:156
batchedMountComponentIntoNode
node_modules/react-dom/lib/ReactMount.js:126
perform
node_modules/react-dom/lib/Transaction.js:143
batchedUpdates
node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:62
batchedUpdates
node_modules/react-dom/lib/ReactUpdates.js:97
_renderNewRootComponent
node_modules/react-dom/lib/ReactMount.js:319
_renderSubtreeIntoContainer
node_modules/react-dom/lib/ReactMount.js:401
render
node_modules/react-dom/lib/ReactMount.js:422
▲ 17 stack frames were expanded.
(anonymous function)
src/index.js:15

  12 | const store = configure();
  13 | 
  14 | 
> 15 | ReactDOM.render(
  16 |   <Provider store={store}>
  17 |     <App />
  18 |   </Provider>,

View compiled
▶ 6 stack frames were collapsed.

我是ReactJS的新手，对此一无所知。 我问的很多人都告诉我这是一个版本问题，但是我尝试了降级和升级，但均无济于事。 我也建议使用此部分代码，但我没有最清楚的线索放在哪里或如何使用它：

function Component = () => {
  let $ref;

  return (
    <InnerComponent ref={(ref) => { $ref = ref; }} />
  );
};

另外，如果这是我的src / index.js文件，

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

import configure from './store/configureStore';
import App from './containers/App';
import registerServiceWorker from './registerServiceWorker';
import './assets/styles/components.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.css';

const store = configure();

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
registerServiceWorker();

另外，这是我的src / containers / App.js

import React, { Component } from 'react';
import { Router, Route, IndexRoute, browserHistory } from 'react-router'

import MainLayout from './Layout/Mainlayout';
import Home from './home/Home';
import Login from './login/Login';
import SignUp from './login/SignUp';
import Experience from './experience/';
import About from './about/About';
import Contact from './contact/Contact';
import Terms from './terms/Terms';
import EventDetail from './eventdetail/';
import Listing from './Listing/Listing';

class App extends Component {

  render() {
    return (
      <Router history={browserHistory}>
        <div>
          <Route exact path="/" component={MainLayout}>
            <IndexRoute component={Home}/>
            <Route path="/experience/:id" component={Experience}/>
            <Route path="/rovelogues/:slug" component={Listing}/>
            {/* <Route path="/events" component={Events}/> */}
            <Route path="/events/:id" component={EventDetail}/>
            <Route path="/rovelogues-by-pro" component={Home}/>
            <Route path="/login" component={Login}/>
            <Route path="/sign-up" component={SignUp}/>
            <Route path="/about" component={About}/>
            <Route path="/contact" component={Contact}/>
            <Route path="/terms" component={Terms}/>
          </Route>
        </div>
      </Router>
    );
  }
}

export default App;

任何帮助或指导指出我在做什么错，将不胜感激。

Answer 1

我建议使用Yarn代替Npm。 https://yarnpkg.com/en/

安装完成后，测试是否可以在控制台中识别

yarn --version

然后在您的项目文件夹中删除node_modules文件夹，然后运行

yarn

纱线很可能会知道哪些版本可以很好地搭配使用，您将不再遇到该问题。