时间戳

首页 > 解决方案 > 在 React 中嵌套三元运算符中映射函数的放置

javascript - 在 React 中嵌套三元运算符中映射函数的放置

问题描述

下面是一个嵌套的三元运算符。如何this.state.todos.map ((todo) =>让它发挥作用？我可以以某种方式简化这个吗？目前我有一个错误：意外的令牌，预期的“，”。如果edit为 false，则先渲染li。如果todo.date->true先渲染li，否则渲染第二li有人会建议你吗？我可以应用这样的结构吗？

class App extends Component {
  constructor() {
    super();

    this.state = {
      todos:[
          {name:'as', desc:'sd', date:'05-04-2008},{name:'sd', desc:'', date: ''}],
      edit: false
    }
  }

  render() {

    return (
      <div>
        { this.state.edit ?
          (
            <Form

            />
          )

          :

          {this.state.todos.map((todo) => { //problem here                       
            (<li>
                {  todo["date"] ?
                <div>
                    <span>
                        todo["name"])
                    </span>
                    <span>
                        todo["desc"])
                    </span>
                </div>

                :

                <div>
                    <span>
                        todo["name"])
                    </span>
                </div>  
                }
            </li>)
        }
      </div>
    )
  }
}

标签： javascriptreactjsecmascript-6ternary-operator

解决方案

两个问题：

  1. 您已经在表达式上下文中，因此您不想使用{beforethis.state.todos进入表达式上下文。

  2. 您的map回调不返回值，因为您使用的是没有return.

修复两者：

render() {

  return (
    <div>
      { this.state.edit ?
        (
          <Form

          />
        )

        :
//      v---- *** no { here
        this.state.todos.map((todo) => // *** No { here
          (<li>
            {  todo.date ?
            <div>
                <span>
                    {todo.name}
                </span>
                <span>
                    {todo.desc}
                </span>
            </div>

            :

            <div>
                <span>
                    {todo.name}
                </span>
            </div>  
            }
          </li>)
        ) // *** Added missing ) here
      }
    </div>
  )
}

我删除了回调中的{之前this.state.todos.map和{之后=>，并添加了一个缺失的)之后来</li>)终止map回调。（{没有对应的}，所以我不必删除它们。）

旁注：构造函数中的this.state =行中也存在语法错误。

推荐阅读