[英]React.Children.only expected to receive a single React element child error
I'm getting 'React.Children.only expected to receive a single React element child.'我收到“React.Children.only 预计会收到一个 React 元素孩子。” from the following code.
从下面的代码。
I have created a new react app using create-react-app and installed redux and react-redux, and created a simple reducer and creating store with that.我使用 create-react-app 创建了一个新的 React 应用程序并安装了 redux 和 react-redux,并创建了一个简单的 reducer 并用它创建了 store。
import React from "react";
import ReactDOM from "react-dom";
import { createStore, combineReducers } from "redux";
import { Provider } from "react-redux";
import logo from './logo.svg';
import './App.css';
class App extends React.Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
function productReducer(state = [], action) {
return state;
}
const store = createStore(
productReducer
);
ReactDOM.render((<Provider store={store}><App /> </Provider>), document.getElementById('root'));
You have a space here:你在这里有一个空间:
↓
<Provider store={store}><App /> </Provider>
JSX is kinda picky about spacing on single lines. JSX 对单行的间距有点挑剔。 The above essentially gets interpreted as:
以上基本上被解释为:
<Provider store={store}><App />{' '}</Provider>
(In fact, Prettier will produce pretty much this exact output ) (事实上, Prettier会产生几乎这个精确的输出)
You can either remove the space:您可以删除空格:
<Provider store={store}><App /></Provider>
Or break it up on to multiple lines:或者将其分解为多行:
<Provider store={store}>
<App />
</Provider>
I had a similar problem and it turns out I had converted my App root from a function to a class, which means I had to change the syntax from this:我有一个类似的问题,结果我已经将我的 App 根从一个函数转换为一个类,这意味着我必须从这个更改语法:
ReactDOM.render(
<Provider store={store}>
{ App }
</Provider>,
document.getElementById('root')
);
To this:对此:
ReactDOM.render(
<Provider store={store}>
{ <App /> }
</Provider>,
document.getElementById('root')
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.