ReachJS空白文本节点不能作为的子级出现。确保在每行的标签之间没有多余的空格

Question

我得到警告：validateDOMNesting（...）：空格文本节点不能显示为的子级。确保在源代码的每一行的标签之间没有多余的空格。。当我尝试在ReactJS中使用materialUI实现表格时。 Erro说在 的代码行中找到空格。但是我在错误行中找不到任何空格。

return (
  <>
    <TableRow
      key={this.props.data.id}
      className="simpleProductRow align-top">
      <TableCell className="simpleProductInfo simpleProductCell">
        <Typography variant="body2" component="p">
          <Typography
            variant="body2"
            component="label"
            style={inlineBlockStyle}
          >
            Info:{' '}
          </Typography>
          <Typography className="simpleProductName" component="span">
            {this.props.data.name}
          </Typography>
        </Typography>

        <Typography variant="body2" component="span">
          <Typography variant="body2" style={inlineBlockStyle}>
            Part #:{' '}
          </Typography>
          <Typography style={inlineBlockStyle}>
            {this.props.data.sku}
          </Typography>
          <Typography style={inlineBlockStyleSmall}>
            (Mfr #: {this.props.data.manufacturerPartNumber})
          </Typography>
        </Typography>
        <Typography variant="body2" component="p">
          <Typography
            variant="body2"
            component="label"
            style={inlineBlockStyle}
          >
            Ships:{' '}
          </Typography>
          <Typography style={inlineBlockStyle} component="span">
            {' '}
            {this.props.data.deliveryDate}
          </Typography>
        </Typography>

        {this.props &&
          this.props.data &&
          this.props.data.isFreeShipping && (
            <Chip
              className={this.props.classes.freeShippingChip}
              label="Free Shipping"
              avatar={freeshippingavatar}
            />
          )}
      </TableCell>{' '}

    </TableRow>
    <TableRow>
      <TableCell colSpan={4}>
        <ProductSpecifications data={this.props && this.props.data} />
      </TableCell>
    </TableRow>
  </>
);

Answer 1

在代码示例的结尾附近，您具有：

</TableCell>{' '}

您需要最后删除{' '}。这是一个“空白文本节点”。