Question

我在React Fiber上写了组件。这个组件接收1个cond道具，这是真的，渲染孩子。

"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根据您的代码。

我可以阻止Reren Fiber上的孩子们使用它吗？

1 个答案: