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>

带注释：

CoffeeScript的：

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>

的CoffeeScript

...

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>

Reactjs：CJSX嵌套条件句

2 个答案: