[reactjs] 반응 렌더링 함수에서 빈 상태로 되돌릴 수 있습니까?

Program / 글쓴이

알림 구성 요소가 있으며 시간 초과 설정이 있습니다. 시간 초과 후을 호출 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' />

스 니펫 확장

답변

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

컴포넌트가 아무것도 렌더링하지 않게하려면 doc에null 따라를 반환하십시오 .

드문 경우이지만 다른 구성 요소에 의해 렌더링되었지만 구성 요소를 숨길 수 있습니다. 이렇게하려면 렌더링 출력 대신 null을 반환합니다.

undefined예를 들어 돌아 가려고하면 다음과 같은 오류가 발생합니다.

렌더에서 아무것도 반환되지 않았습니다. 이것은 일반적으로 return 문이 없다는 것을 의미합니다. 또는 아무것도 렌더링하지 않으려면 null을 반환합니다.

다른 답변으로 지적, null, true, false및 undefined조건부 렌더링을위한 유용 유효 자녀 안에 당신의 jsx,하지만 당신은 숨길 구성 요소를 원하는 / 아무것도 렌더링하지, 그냥 돌아가 null.

답변

예, React 렌더 메소드에서 빈 값을 반환 할 수 있습니다.

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

문서 에 따르면 :

false, null, undefined, 그리고 true올바른 자녀입니다. 그들은 단순히 렌더링하지 않습니다.

당신은 쓸 수 있습니다 

return null; or
return false; or
return true; or
return undefined;

그러나 return null아무것도 반환되지 않음을 의미하므로 가장 선호됩니다.

답변

주제를 약간 벗어 났지만 아무 것도 렌더링하지 않는 클래스 기반 구성 요소가 필요했지만 아직 표준화되지 않은 ES 구문을 사용하고 싶다면 다음과 같이하십시오.

render = () => null

이것은 기본적으로 현재 transform-class-properties Babel 플러그인이 필요한 화살표 메소드입니다 . 반응하지 않으면 컴포넌트를 정의 할 수 없습니다render 함수 이것이 내가 생각할 수있는이 요구 사항을 충족시키는 가장 간결한 형태입니다.

나는 현재 문서 에서 빌린 ScrollToTop 의 변형 에서이 트릭을 사용 하고 react-router있습니다. 필자의 경우 구성 요소의 단일 인스턴스 만 있고 아무것도 렌더링하지 않으므로 짧은 “렌더링 널”형식이 적합합니다.

답변

우리는 이렇게 돌아갈 수 있습니다.

return <React.Fragment />;

답변

render () 함수에서 잘못된 값을 반환하면 아무것도 렌더링되지 않습니다. 그래서 당신은 할 수 있습니다

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

답변