Question

我从Parent组件传递域属性到Child组件。在Child中，如果一个网站与域一起存在，它将返回该网站的信息。否则，它返回null。当它返回null时，我不想在Child组件上呈现Parent组件。

如何防止渲染？

class Parent extends Component {

  ...

  render() {
    const { domain } = this.props;
    return (
        <div>
            <Child domain={domain} />
        </div>
    );
  }
}

class Child extends Component {
  ...
  Here, check if the website exists
  ...

  render() {
    const { domain } = this.props;
    const { isExist } = this.state;

    return {isExist ? <div>Yes</div> : null}
  }

}

Answer 1

在null中返回render的子代不会呈现给DOM。原始代码已经完成了此操作，但是语法存在问题。

仅在JSX元素内使用括号来包装JS表达式。在这里将它们视为对象文字：

return {isExist ? <div>Yes</div> : null}

应该是：

return isExist ? <div>Yes</div> : null

然后works as intended。

Answer 2

两种方法：定义shouldComponentUpdate方法或使用纯组件。

如果子组件返回null，如何防止呈现

2 个答案: