对Material-UI表使用react-markdown

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

我也有同样的问题。我没有把所有的道具都传给材料组件，从而解决了这个问题。

您可以在以下要点的组件中看到我用material ui创建的降价主题：https://gist.github.com/boganegru/a4da0b0da0b1233d30b10063b10efa8a