反应错误'Failed propType:提供给`Provider`的无效道具`children`,期望一个ReactElement'

mod*_*tor 32 javascript reactjs redux react-redux

我有一些React.js的问题.这是我的代码:

import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import App from './containers/App';
import todoApp from './reducers';

let store = createStore(todoApp);
let rootElement = document.getElementById('root');

React.render(
    <Provider store={store}>
        {() => <App />}
    </Provider>,
    rootElement
);
Run Code Online (Sandbox Code Playgroud)

并运行页面,它说:

propType失败:children提供的prop无效Provider,预期单个ReactElement

这是我相关的已安装节点模块的列表:

  • 反应15.0.1
  • react-redux 4.4.5
  • redux 3.4.0

实际上,我目前正在学习与Redux的React,所以我很难怎么做.我只是按照网站上的教程(我可以提供一个链接,但它不是英文)但它只是没有使用该错误消息.当我搜索时,有人说反应和react-redux的升级版本,但我安装了最新版本.任何建议都会非常感激.

wuc*_*uct 19

根据文档,您可以使用普通的React元素而不是内部函数<Provider />.

因此,只需将代码更改为

<Provider store={store}>
    <App />
</Provider>
Run Code Online (Sandbox Code Playgroud)

我认为自react@0.14以来这已经发生了变化.


小智 6

最初的问题有错别字。您的回答采用正确的语法是正确的。

但是,直接的原因是<App />需要放在单独的行上。

如果您将它放在与<Provider store={store}>React / Redux 相同的行上,它将尝试执行比应做的更多的事情。

ReactDOM.render(
<Provider store={store}>
  <App />
</Provider>,
  document.getElementById('root')
);
Run Code Online (Sandbox Code Playgroud)

  • 你能澄清一下你在这里的意思吗?换行符不应该对 JSX 的解释方式产生任何影响。大多数空白在捆绑时被剥离。 (4认同)