将 react-markdown 与 Material-UI 表一起使用

Question

我正在尝试使用react-markdown 解析降价表并使用Material-UI table component 呈现结果标签。这是我的渲染器：

import withStyles from '@material-ui/core/styles/withStyles';
import PropTypes from 'prop-types';
import TableCell from '@material-ui/core/TableCell';

const styles = (theme) => ({
  root: {
    marginBottom: theme.spacing(2),
  },
});

const RenderedTCell = ({rendererProps, classes}) => {
  if(rendererProps.children.length !== 0) {
    console.log('rendererProps.children', rendererProps.children);
  }
  return (
    <TableCell className={classes.td} {...rendererProps} />
  );
};

RenderedTCell.propTypes = {
  classes: PropTypes.shape({
    root: PropTypes.string,
  }).isRequired,
};

export default withStyles(styles)(RenderedTCell);

所有表格标签的markdown渲染器定义如下：

const renderers = {
    tableCell: (props) => (
      <RenderedTCell
        rendererProps={props}
      />
    ),
    tableRow: (props) => (
      <RenderedTRow
        rendererProps={props}
      />
    ),
    tableBody: (props) => (
      <RenderedTBody
        rendererProps={props}
      />
    ),
    tableHead: (props) => (
      <RenderedTHead
        rendererProps={props}
      />
    ),
    table: (props) => (
      <RenderedTable
        rendererProps={props}
      />
    ),
  };

在这里，所有其他元素（table、tableHead、tableBody、tableRow）渲染良好，但 tableCell 元素不断抛出错误：

Error while running `getDataFromTree` TypeError: Cannot read property 'charAt' of null
at capitalize (/home/ubuntu/proost/web/node_modules/@material-ui/core/utils/capitalize.js:19:17)
at Object.TableCell [as render] (/home/ubuntu/proost/web/node_modules/@material-ui/core/TableCell/TableCell.js:183:148)
at a.b.render (/home/ubuntu/proost/web/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:46:105)
at a.b.read (/home/ubuntu/proost/web/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:18)
at renderToStaticMarkup (/home/ubuntu/proost/web/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:54:462)
at process (/home/ubuntu/proost/web/node_modules/@apollo/react-ssr/lib/react-ssr.cjs.js:38:16)
at process._tickCallback (internal/process/next_tick.js:68:7)

知道什么可能会破坏代码吗？

Answer 1

我有同样的问题。我通过不将所有道具进一步传递给材料组件来解决它。

你可以在这个 gist 的组件中看到我用材料 ui 来主题化降价： https://gist.github.com/boganegru/a4da0b0da0b1233d30b10063b10efa8a