Могу ли я заблокировать детей-предренеров на 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 выдает ошибку, которую вы видите.

Базовый пример на основе вашего кода.