如何确定父组件的渲染结果是否为null

Question

我想在内容之间插入一些内容，但是如何确定父组件的呈现结果是否为<input type="text" nbInput [(colorPicker)]="colorRangeTraceArc" [cpPosition]="'right'" [cpOutputFormat]="'rgba'[style.background]="colorRangeTraceArc" formControlName="colorRTC" name="colorRangeTraceArc" style="width: 100px" (colorPickerChange)="onChangeColorRTA($event)" /> ？

https://codesandbox.io/s/k9nr4pqz9r

null

Answer 1

ReactDOMServer.renderToString允许您获取组件的字符串HTML。演示：https://codesandbox.io/s/20m61496zy

但是我强烈建议您不要这样做，因为这会花费很多。为您提供更好的解决方案是访问child.props来读取条件（demo）：

React.Children.forEach(children, (child, index) => {
    if ((typeof child.props.show === 'boolean' && child.props.show === false)) {
      ret.push(' nothing here ');
    } else {
      ret.push(child);
    }
    ret.push(" * ");
  });