如何在jsx中显示页面状态

Question

我刚开始看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)

我想我可以把js和html混在一起，但是store.getState()给了我这个错误:

Syntax error: Unexpected token (22:8)
  20 | const render = () => ReactDOM.render(
  21 | 
> 22 |   {store.getState()}

如何在UI上显示状态?

Answer 1

问题很简单。JSX不支持返回多个JSX节点。点击这里阅读更多内容。

所以把所有这些放到一个div中，它会工作的:)

<div>
  {store.getState()}
  <List addToList={() => store.dispatch({
      type: 'ADDTEXT',
      payload: {
        text: 'this is a text'
      }
    })
  }/>
</div>