javascript - JSX 中内联 if-else 和大块代码

Question

我有 2 段代码想要在条件之间切换，并且我更喜欢内联执行，但似乎这种语法不正确:

const chunk1 = (...)
const chunk2 = (...)

{this.state.condition ? (
  {chunk1}
) : (
  {chunk2}
)}

我得到:

Uncaught Error: Objects are not valid as a React child (found: object with keys {loginOptions}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of Card.

正确的方法是什么？

Answer 1

我认为你的语法是错误的。试试这个:

{this.state.condition ? 
  chunk1
: 
  chunk2
}

或者

  if (condition) {
    content = chunk1;
  } else {
    content = chunk2;
  }

{content}

ES7 做:

const content = (data) => do {
  if (data) chunk1
  else chunk2
}

{content}

更多信息

Official React documentation for Conditional rendering