Question

所以这是一个关于我在学习React时不小心偶然发现的答案的问题。

采用以下Table组件：

class Table extends Component {
  render() {
     const {list, pattern, onDismiss} = this.props;
    return (
      <div className="newDiv">
      </div>
    )
  }
}

如果我添加以下表达式，<div>元素的类为newDiv，它就可以正常工作：

        {
          list.filter(isSearched(pattern)).map(item => 
            <div key={item.objectID}>

            </div>
          )
        }

如果我不使用速记箭头函数语法，或使用ES5函数，请注意另外的{和}：

        {
          list.filter(isSearched(pattern)).map(item => {
            <div key={item.objectID}>

            </div>
          })
        }

它不起作用。这是官方的React＆＃39;是什么？如果你使用箭头函数的速记版本，你只能像map那样使用ES6函数吗？

Answer 1

使用{ }语法没有隐式返回，因此在这种情况下，map-callback不会产生任何内容。

    {
      list.filter(isSearched(pattern)).map(item => {
        return <div key={item.objectID}></div>
      })
    }

尝试使用return声明。

Answer 2

你需要回复：

return <div key={item.objectID}>

在ES6中的单行箭头函数中，返回发生并且不必具体，{ }

也不是

如果使用简写版，则必须指示返回

Answer 3

除非你添加花括号，否则箭头函数默认返回它的语句，然后它需要一个return语句。

在React表达式中运行函数

3 个答案: