리액션 렌더 함수에서 빈 상태로 반환할 수 있는가?

리액션 렌더 함수에서 빈 상태로 반환할 수 있는가?

알림 구성 요소가 있고 시간 초과 설정이 있어.시간 초과 후 호출this.setState({isTimeout:true}).

내가 하고 싶은 것은 이미 시간이 초과되었다면 아무 것도 렌더링하지 않고 싶다.

render() {
  let finalClasses = "" + (this.state.classes || "");
  if (isTimeout){
    return (); // here has some syntax error
  }
  return (<div>{this.props.children}</div>);
}

문제는 다음과 같다.

return (): // 여기에 구문 오류가 있음

할 수 , 빈칸 그대를 만 하면 돼, 수표도 있고, 빈칸도 있고, 빈칸도 있고.null하기 싫으면render구성 요소에서 다음과 같은 모든 구성 요소:

return (null);

---

또 다른 중요한 점은 JSX 내부에서 조건부로 요소를 렌더링할 경우 다음이 발생할 경우 입니다.condition=false, 이 값들 중 하나를 반환할 수 있다.false, null, undefined, true. DOC에 따라:

booleans (true/false), null, and undefined유효한 아이들일 거야 무시당한다는 건 아이를 낳지 않는다는 뜻이지

이 모든 것JSX표현은 동일한 결과를 낳는다.

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

예:

것이다. 짝수 는 수정이 가능한 값만 반환할 이다.null.

const App = ({ number }) => {
  if(number%2) {
    return (
      <div>
        Number: {number}
      </div>
    )
  }
  
  return (null);           //===> notice here, returning null for even values
}

const data = [1,2,3,4,5,6];

ReactDOM.render(
  <div>
    {data.map(el => <App key={el} number={el} />)}
  </div>,
  document.getElementById('app')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app' />

일부 답변은 약간 부정확하며 문서의 잘못된 부분을 가리킨다.

구성 요소가 아무 것도 렌더링하지 않도록 하려면 반환하십시오.null, doc에 따르면:

드문 경우지만 다른 구성요소에 의해 렌더링되었더라도 구성요소가 자신을 숨기기를 원할 수 있다.이렇게 하려면 렌더 출력 대신 null을 반환하십시오.

만약 당신이 돌아오려고 하면undefined예를 들어 다음과 같은 오류가 발생할 수 있다.

렌더에서 아무것도 돌려받지 못했다.이것은 보통 반품 명세서가 없어진다는 것을 의미한다.또는 아무것도 렌더링하지 않으려면 null을 반환하십시오.

다른 답변에 의해 지적된 바와 같이,nulltruefalse그리고undefined유효한 자식이며, jsx 내에서 조건부 렌더링에 유용하지만, 구성 요소가 아무것도 숨기거나 렌더링하지 않고 그냥 돌아가기를 원하는 경우null.

예, 리액트 렌더링 방법에서 빈 값을 반환할 수 있다.

다음 중 하나를 반환할 수 있다.false, null, undefined, or true

문서에 따르면:

falsenullundefined그리고true유효한 아이들이다.그것들은 단순히 렌더링하지 않는다.

너는 쓸 수 있다.

return null; or
return false; or
return true; or
return <div>{undefined}</div>; 

하지만return null가장 선호되는 것은 아무것도 반환되지 않는다는 것을 의미하기 때문이다.

주제에서 약간 벗어나지만, 어떤 것도 렌더링하지 않는 클래스 기반 구성요소가 필요하며 아직 표준화되지 않은 ES 구문을 사용하게 되어 기쁘다면, 다음 절차를 따르십시오.

render = () => null

이것은 기본적으로 현재 transform-class-properties Babel 플러그인이 필요한 화살표 방법이다.반응으로 구성 요소를 정의하지 않고render기능 그리고 이것은 내가 생각할 수 있는 가장 간결한 형태다.

나는 이 트릭을 현재 에서 빌린 ScrollToTop의 변종에서 사용하고 있다.react-router문서화내 경우, 구성 요소의 한 가지 인스턴스만 있을 뿐 아무 것도 렌더링하지 않기 때문에, 짧은 형태의 "렌더 null"이 그 안에 잘 들어맞는다.

Typecript를 사용하는 경우 구성 요소/기능에 반환 유형이 있는 경우React.Element에 다음과 같은 오류가 발생할 것이다.

'null' 형식은 'ReactElement<any, 문자열 |JSXElementConstructor'' 형식에 할당할 수 없다.

해결책은React.Fragment.

return <React.Fragment />

또는

return <></>

구성요소를 렌더링하거나 렌더링하지 않기 위해 3차 모드로 체크하는 대신 구성요소에서 null을 반환할 수 있는 위치를 확인하는 질문에 대한 답은 YES, You Can!이다.

즉, 구성 요소의 일부를 렌더링할 때 jsx 내부의 정크 3차 조건 대신:

// some component body
return(
  <section>
   {/* some ui */}
   
   { someCondition && <MyComponent /> }
   or
   { someCondition ? <MyComponent /> : null }

   {/* more ui */}
  </section>
)

다음과 같은 구성 요소 내부의 조건보다 점검할 수 있다.

const MyComponent:React.FC = () => {
  
  // get someCondition from context at here before any thing


  if(someCondition) return null; // i mean this part , checking inside component! 
  
  return (
    <section>   
     // some ui...
    </section>
  )
}

내 경우, 내가 다음 정보를 고려해보아라.someCondition상위 수준 구성 요소의 컨텍스트에서 가변적(예를 들어, 마음속으로만 고려)이며 드릴을 지원할 필요는 없다.someCondition안쪽에MyComponent.

그 후 코드가 얼마나 깨끗한지 보십시오. 즉, JSX 내에서 3차 연산자를 사용할 필요가 없으며, 상위 구성 요소는 다음과 같음:

// some component body
return(
  <section>
   {/* some ui */}
   
   <MyComponent />

   {/* more ui */}
  </section>
)

그리고MyComponent나머지는 네가 알아서 할 거야!

렌더() 함수의 거짓 값을 반환하면 아무것도 렌더링하지 않는다.그러니 그냥 하면 된다.

 render() {
    let finalClasses = "" + (this.state.classes || "");
    return !isTimeout && <div>{this.props.children}</div>;
  }

우린 이렇게 돌아올 수 있어

return <React.Fragment />;

참조URL: https://stackoverflow.com/questions/42083181/is-it-possible-to-return-empty-in-react-render-function