javascript - react 父组件检查子组件是否会渲染

Question

我有一个子组件，它取决于它的某些 Prop 最终会渲染或不渲染某些东西。 children 的渲染功能看起来像这样:

render() {
  if (props.a == 'foo' && props.b == 'bar') {
    return (<p> Hey There </p>);
  } else if {props.a == 'z') {
    return (<p> Hey There </p>);
  } // more conditions
  } else {
    return null
  }
}

在父组件中，我正在渲染几个子组件，我需要知道其中有多少将被渲染，因为根据这个数字我会做某事或不做某事。我不想重复从 child 到 parent 的条件逻辑，但我不知道如何从 parent 那里知道 child 是否会渲染。

Answer 1

您尝试做的是 React 中的一种反模式。如果我理解您的问题，子级渲染输出会影响其父级的渲染输出，这可能会让您陷入渲染循环。

我建议您让子组件尽可能简单，并将条件逻辑提升到父组件，这样您就可以计算将要渲染的子组件的数量。

如果我答错了你的问题，请告诉我。