ReachJS 空白文本节点不能显示为 <tr> 的子节点。确保每行标签之间没有任何额外的空格

Question

我收到警告：validateDOMNesting(...): 空白文本节点不能显示为 的子节点。确保源代码每行的标记之间没有任何额外的空格。当我尝试在 ReactJS 中使用 MaterialUI 实现表格时。错误说在< TableRow..周围的代码行中发现空格。 但我在错误行中找不到任何空格。

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

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

\n\n

</TableCell>{' '}

\n\n

您需要删除{' '}最后的。它是一个\xe2\x80\x9c空白文本节点\xe2\x80\x9d。

\n