Question

我有一个map()函数，需要根据条件显示视图。我查看了有关如何编写条件的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

您正在使用dispatch_details和ternary operator条件，请使用任何一个。

通过三元运营商：

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>
}

Answer 2

您的三元条件中有两个语法错误：

删除关键字if。检查正确的语法here。

您的代码中缺少一个括号。如果您将其格式化为：

{(this.props.schema.collectionName.length < 0 ? 
   (<Expandable></Expandable>) 
   : (<h1>hejsan</h1>) 
)}

希望这有效！

Answer 3

删除if关键字。它应该是predicate ? true_result : false_result。

同样? :被称为三元运算符。

Answer 4

您将if语句与三元表达式混合，这就是您遇到语法错误的原因。如果在渲染方法之外提取映射函数，可能更容易理解发生了什么：

renderItem = (id) => {
    // just standard if statement
    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>
    );
}

然后在映射时调用它：

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(this.renderItem)
                }
            </div>
        </div>
    )
}

当然，您也可以使用三元表达式，这是一个偏好问题。但是，您使用的内容会影响可读性，因此请务必选中different ways and tips to properly do conditional rendering in react and react native。

Answer 5

我找到了一个简单的解决方案：

row = myArray.map((cell, i) => {

    if (i == myArray.length - 1) {
      return <div> Test Data 1</div>;
    }
    return <div> Test Data 2</div>;
  });

Answer 6

如果您是像我这样的极简主义者。假设您只想使用包含条目的列表来呈现记录。

<div>
  {data.map((record) => (
    record.list.length > 0
      ? (<YourRenderComponent record={record} key={record.id} />)
      : null
  ))}
</div>

如果map（）内的条件React

6 个答案: