ReachJS Текстовые узлы с пробельными символами не могут отображаться как дочерние элементы <tr>. Убедитесь, что у вас нет лишних пробелов между тегами в каждой строке - PullRequest
0 голосов
/ 23 мая 2019

Я получаю Предупреждение: validateDOMNesting (...): текстовые узлы с пробелами не могут отображаться как дочерние элементы.Убедитесь, что у вас нет лишних пробелов между тегами в каждой строке исходного кода. , когда я пытаюсь реализовать таблицу с materialUI в ReactJS.Эрро говорит, что в строке кода вокруг обнаружены пробелы.

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>
  </>
);

1 Ответ

0 голосов
/ 23 мая 2019

В конце вашего примера кода:

</TableCell>{' '}

Вам нужно удалить {' '} в конце. Это «пробельный текстовый узел».

...