map() React 내부 조건

map() React 내부 조건

나는 가지고 있다map()조건을 기준으로 보기를 표시해야 하는 함수입니다.조건을 기술하는 방법에 대한 React 문서를 살펴보았는데, 다음과 같이 조건을 기술할 수 있습니다.

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

다음 링크입니다.https://facebook.github.io/react/docs/conditional-rendering.html#inline-if-else-with-conditional-operator

그래서 저는 그 지식을 리액트 앱에 반영하려고 했습니다.결국 이렇게 됐어요.

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

하지만 소용없어..!다음은 오류입니다.

도움을 받을 수 있어서 정말 고마워요!

둘 다 사용하고 있습니다.ternary operator그리고.if아무 조건이나 사용하세요.

3진 연산자별:

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

조건별:

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

나처럼 미니멀리스트라면.엔트리가 포함된 리스트가 있는 레코드만 렌더링한다고 합니다.

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

3차 조건에는 다음 두 가지 구문 오류가 있습니다.

1. 키워드를 삭제하다if여기서 올바른 구문을 확인해 주세요.

2. 코드에 괄호가 없습니다.다음과 같이 포맷하면:

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

잘 됐으면 좋겠다!

이건 내가 찾은 간단한 해결책이야

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

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

를 삭제합니다.if키워드를 지정합니다.그냥 해야 할 거야predicate ? true_result : false_result.

또한.? :는 3차 연산자라고 불립니다.

if 문장과 3진법을 혼합하고 있기 때문에 구문 오류가 발생하고 있습니다.렌더링 메서드 이외의 매핑 함수를 추출하면 무슨 일이 일어나고 있는지 쉽게 이해할 수 있습니다.

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

물론 삼원표현도 할 수 있었을 텐데, 그건 선호도 문제니까.그러나 사용하는 내용은 가독성에 영향을 미치므로 반응 및 반응 네이티브에서 조건부 렌더링을 올바르게 수행하기 위한 다양한 방법 및 팁을 확인하십시오.

만약을 위해:

If 한정: (사용)&&없이.? :또는else)

반품할 필요가 없을 때else

예: (어레이 또는 오브젝트)

// const someArray = ['a', 'b', 'c']
{someArray.map(
  (v) =>
    someCondition && (
      <></> // {v}
    )
)}

// const someObject = {a: '1', b: '2', c: '3'}
{Object.keys(someObject).map(
  (k) =>
    someCondition && (
      <></> // {someObject[k]} (Remember: add key={k} in wrapper)
    )
)}

3원 연산자가 동작하지만 if-else 문장은 동작하지 않는다는 것은 다소 터무니없고 복잡한 논리를 괴롭힌다.하지만 전자가 유일한 해결책인 것 같다.

언급URL : https://stackoverflow.com/questions/44969877/if-condition-inside-of-map-react