How can I write an else if structure using React (JSX) - the ternary is not expressive enough

Question

I want to write the equivalent in react:

if (this.props.conditionA) {
    Condition A
} else if (this.props.conditionB) {
    

        

Answer 1

If you don't need the

, just return the elements:

render() {
  if (this.props.conditionA) {
    return Condition A;
  } else if (this.props.conditionB) {
    return Condition B;
  } else {
    return Neither;
  }
}

You can even move the last return statement out of the else block.

---

In general, you don't have to embed everything inside JSX. It's perfectly fine to compute values beforehand, just like you do elsewhere:

render() {
  let content;
  if (this.props.conditionA) {
    content = Condition A;
  } else if (this.props.conditionB) {
    content = Condition B;
  } else {
    content = Neither;
  }

  return 
{content}
;
}

You have to do that whenever you need / want to use a statement.

0 讨论(0)

查看其它6个回答

发布评论:

提交评论

---

•  加载中...