React Fiber에서 사전 렌더링 하위를 차단할 수 있습니까?

Question

React Fiber에 구성 요소를 썼습니다. 이 구성 요소는 1 개의 cond props를 수신하며 이는 사실이며 자식을 렌더링합니다.

"use strict"; 
import * as React from "react"; 
import * as ReactDOM from "react-dom"; 

interface IfProps { 
    cond: boolean; 
} 

export class If extends React.Component<IfProps, {}> { 
    render() { 
    const {cond, children} = this.props; 

    if (cond) { 
     return children; 
    } else { 
     return null; 
    } 
    } 
} 

class TopComponent extends React.Component { 
    render() { 
    let str: any = null; 

    return (
     <div> 
     <If cond={str != null}> 
      This part not showed. 
      {str.length} 
     </If> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(<TopComponent />, document.getElementById("app")); 

React Fiber 이전에는이 ​​코드가 작동합니다. 하지만 이제 React Fiber가 오류를 일으 킵니다.

Uncaught TypeError: Cannot read property 'length' of null 

구성 요소가 렌더링되기 전에 React Fiber가 자식을 렌더링한다고 생각합니다. 하지만이 동작은 구성 요소를 중단시킵니다.

구성 요소의 하위 항목을 미리 렌더링 할 수 있습니까?

Answer 1

귀하의 경우에는 반응이 null 반환 값을 허용하지 않습니다. (그것은 무엇입니까 ReactComponent.render) 하지만 아이들이 If 구성 요소로 넘겨지기 전에 평가를 받게됩니다. 이는 str.length이 당신이보고있는 오류를 던집니다.

Basic example 코드에 따라