Question

我有2块代码我想在条件之间切换，我更喜欢内联，但似乎这种语法不正确：

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

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

我明白了：

未捕获错误：对象作为React子对象无效（找到：对象使用密钥{loginOptions}）。如果你想渲染一个集合 children，使用数组代替或使用包装对象来自React附加组件的createFragment（对象）。检查渲染方法 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

Answer 2

我目前喜欢像这样格式化我的三元组：

render () {
  return (
    <div className="row">
      { //Check if message failed
        (this.state.message === 'failed')
          ? <div> Something went wrong </div> 
          : <div> Everything in the world is fine </div> 
      }
    </div>
  );
}

Answer 3

考虑到代码块只是JSX元素，你可以像

那样做

＆＃13;

class App extends React.Component {
    state = {condition: false}
    
    render() {
      var chunk1 = (<div>Hello World</div>)
      var chunk2 = (<div>Hello React</div>)
      return (
          <div>{this.state.condition? chunk1 : chunk2}</div>
      )
    }
}

ReactDOM.render(<App/>, document.getElementById('app'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

＆＃13;

在JSX中使用大块代码内联if-else

3 个答案: