如果 map() 内的条件反应 [英] If condition inside of map() React

问题描述

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

{if (loggedIn) ?(//你好！) : (//再见！)}

这是链接:

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

解决方案

您同时使用 三元运算符 和 if 条件，请使用任何一个.

通过三元运算符:

.map(id => {返回 this.props.schema.collectionName.length <0 ?<可扩展的><对象显示键={id}parentDocumentId={id}架构={架构[this.props.schema.collectionName]}值={this.props.collection.documents[id]}/></可扩展>:<h1>hejsan</h1>}

通过 if 条件:

.map(id => {if(this.props.schema.collectionName.length <0)返回<可扩展><对象显示键={id}parentDocumentId={id}架构={架构[this.props.schema.collectionName]}值={this.props.collection.documents[id]}/></可扩展>返回<h1>hejsan</h1>}

I have a map()function that needs to display views based on a condition. I've looked at the React documentation on how to write conditions and this is how you can write a condition:

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

Here's the link: https://facebook.github.io/react/docs/conditional-rendering.html#inline-if-else-with-conditional-operator

So, I tried to take that knowledge and implemant it in my React app. And it turned out like this:

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

But it doesn't work..! Here's the error:

I appreciate all the help I can get!

解决方案

You are using both ternary operator and if condition, use any one.

By ternary operator:

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

By if condition:

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

这篇关于如果 map() 内的条件反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！