React Fiberでプリレンダー子をブロックすることはできますか？

Question

React Fiberにコンポーネントを書きました。 このコンポーネントは1つのcond propsを受け取り、それはtrueで、子をレンダリングします。

"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） str.lengthが表示されていることを意味するIfコンポーネントに渡される前に、あなたの子供は評価されます。

Basic exampleコードに基づいています。