reactjs - if 条件在 map() React 中

Question

我有一个 map() 函数，需要根据条件显示 View 。我查看了有关如何编写条件的 React 文档，这就是编写条件的方法:

{if (loggedIn) ? (
  // Hello!
) : (
  // ByeBye!
)}

链接如下:https://facebook.github.io/react/docs/conditional-rendering.html#inline-if-else-with-conditional-operator

因此，我尝试利用这些知识并将其应用到我的 React 应用程序中。结果是这样的:

render() {
  return (
    <div>
      <div className="box">
        {this.props.collection.ids
          .filter(
            id =>
              // note: this is only passed when in top level of document
              this.props.collection.documents[id][
                this.props.schema.foreignKey
              ] === this.props.parentDocumentId
          )
          .map(id =>
            {if (this.props.schema.collectionName.length < 0 ? (

              <Expandable>
                <ObjectDisplay
                  key={id}
                  parentDocumentId={id}
                  schema={schema[this.props.schema.collectionName]}
                  value={this.props.collection.documents[id]}
                />
              </Expandable>

            ) : (
              <h1>hejsan</h1>
            )}
          )}
      </div>
    </div>
  )
}

但是这不起作用..!错误如下:

我感谢我能得到的所有帮助!

Answer 1

您同时使用三元运算符和if条件，使用任意一个。

通过三元运算符:

.map(id => {
    return this.props.schema.collectionName.length < 0 ?
        <Expandable>
            <ObjectDisplay
                key={id}
                parentDocumentId={id}
                schema={schema[this.props.schema.collectionName]}
                value={this.props.collection.documents[id]}
            />
        </Expandable>
    :
        <h1>hejsan</h1>
}

根据 if 条件:

.map(id => {
    if(this.props.schema.collectionName.length < 0)
        return <Expandable>
                  <ObjectDisplay
                      key={id}
                      parentDocumentId={id}
                      schema={schema[this.props.schema.collectionName]}
                      value={this.props.collection.documents[id]}
                  />
              </Expandable>
    return <h1>hejsan</h1>
}