如何在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 节点。阅读更多 here.

所以将所有这些放在一个 div 中，它应该会起作用:)

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

如何在jsx页面上显示状态？

How to display state on page in jsx?

reactjs

redux

react-redux