[英]How to display state on page in jsx?
I just started looking at react/redux this is my component: 我刚刚开始查看react / redux,这是我的组件:
const store = createStore(reducer);
const rootEl = document.getElementById('root')
//render root component
const render = () => ReactDOM.render(
{store.getState()}
<List
addToList={() => store.dispatch(
{
type: 'ADDTEXT',
payload: {
text: 'this is a text'
}
}
)}
/>
,
rootEl
)
//call
render()
//subscribe the store
store.subscribe(render)
I thought I could mix up js with html but the store.getState() gives me this error: 我以为我可以将js与html混合使用,但是store.getState()给我这个错误:
Syntax error: Unexpected token (22:8)
20 | const render = () => ReactDOM.render(
21 |
> 22 | {store.getState()}
How can I display the state on the UI? 如何在UI上显示状态?
The problem here is simple. 这里的问题很简单。 JSX doesn't support returning multiple JSX nodes.
JSX不支持返回多个JSX节点。 Read more here .
在这里阅读更多。
So put all of this in a single div, and it shall work :) 因此,将所有这些放在一个div中,它将起作用:)
<div>
{store.getState()}
<List addToList={() => store.dispatch({
type: 'ADDTEXT',
payload: {
text: 'this is a text'
}
})
}/>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.