reactjs - Reactjs：CJSX 嵌套条件

Question

在 React 组件中处理嵌套条件逻辑的正确语法是什么？

React.createClass
render: ->
  <div>
    {if @props.showList
      {for item in @props.myItems
        {item}
      }
    else
    }
  </div>

for 循环（单独）可以被渲染；可以呈现 if/else 条件（单独）。但是，将 for 循环嵌套在条件中会失败。

任何帮助将不胜感激。

Answer 1

我还没有测试过它，但是根据 JSX 的正常工作方式，你只需{expression}要从 JSX 模式中逃脱。

程序以 JS 模式（或此处为 CS）启动，当遇到元素标记时，它会进入 JSX 模式。在 JSX 模式下使用{foo}会导致它返回到 JS 模式。从那里开始应用上述规则，您可以通过启动标记重新进入 JSX 模式，依此类推。

render: ->
  <div>
    {
    if @props.showList
      for item in @props.myItems
        item

    else
       <div>{foo}</div>
    }
  </div>

带注释：

咖啡脚本：

render: ->

CoffeeScript 中的 JSX

  <div>

CoffeeScript 中 JSX 中的 CoffeeScript

    {
    if @props.showList
      for item in @props.myItems
        item

    else

CoffeeScript 中的 JSX CoffeeScript 中的 JSX

       <div>

CoffeeScript 中 JSX 中的 CoffeeScript

          {foo}

CoffeeScript 中的 JSX

       </div>

CoffeeScript 中的 JSX

    }
  </div>

咖啡脚本

...

Answer 2

在这些{}部分中，您可以只使用普通的 Coffeescript/CJSX 代码，只要它计算为单个表达式：

React.createClass
  render: ->
    <div>
      {
        if @props.showList
          for item in @props.myItems
            <span key={item.id}>{item}</span>
        else
          <span>some other content</span>
      }
    </div>