[英]React Redux render connected component
I'm using the connect
function React Redux to connect my store to a React component. 我正在使用
connect
功能React Redux将商店连接到React组件。 After it is connected I want to render the component. 连接后,我要渲染组件。 This works:
这有效:
class Init extends React.Component {
render() {
return (
<View /> // Is really more elaborate
)
}
}
Connect it to the store: 将其连接到商店:
const InitPage = connect(
state => ({
}),
dispatch => ({
})
)(Init)
Now render it: 现在渲染它:
class App extends React.Component {
render() {
const content = <InitPage />
return (
{content}
)
}
}
Great. 大。 This all works.
所有这一切。 However...
然而...
When I place the connect
inside a function and return the connect, as in: 当我将
connect
放置在函数中并返回连接时,如下所示:
const getInitPage = () => {
const InitPage = connect(
state => ({
}),
dispatch => ({
})
)(Init)
return InitPage
}
If I now try to render the component: 如果我现在尝试渲染组件:
class App extends React.Component {
render() {
const content = getInitPage()
return (
{content}
)
}
}
I get an error: 我收到一个错误:
Invariant Violation: React.Children.only expected to receive a single React element child.
What is the correct way to return a Redux "connected" component from a function? 从函数返回Redux“已连接”组件的正确方法是什么?
In case you are returning the component from the function, you need to render it like 如果您要从函数返回组件,则需要将其呈现为
class App extends React.Component {
render() {
const Content = getInitPage()
return (
<Content/>
)
}
}
Also make sure the componentName starts with a uppercase character. 还要确保componentName以大写字母开头。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.