是否使用React-Admin / Material UI的文本字段保留换行符？

Question

我正在使用React-Admin，并且在我的数据库中有一个包含换行符(\n)的字段。当我在如下所示的页面上输出时：

<TextField source="extra_details" />

换行符将被忽略，所有内容都会一起运行。如何才能正确显示换行符？

谢谢

Answer 1

默认情况下，您可以使用pre-wrap样式创建自定义TextField：

import { FC } from "react";
import { TextField as BaseTextField, TextFieldProps } from "react-admin";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  textContent: {
    whiteSpace: "pre-wrap"
  },
});

export const TextField: FC<TextFieldProps> = (props) => {
  const classes = useStyles();

  return <BaseTextField
    className={classes.textContent}
    {...props}
  />
}
TextField.defaultProps = {
  addLabel: true,
}

然后像使用供应商TextField一样使用它。

请注意addLabel选项:您需要它来保持标签与自定义组件一起显示。

您可以在此处获得更多详细信息和示例：https://marmelab.com/react-admin/Fields.html#styling-fields

Answer 2

那<RichTextField />呢？

https://marmelab.com/react-admin/Fields.html#richtextfield

或者，您可以随时创建自己的TextField组件。

Answer 3

风格可能会有所帮助。

import {withStyles} from "@material-ui/core/styles";

const styles = {
  displayLinebreakAndTab: {whiteSpace: "pre-wrap" },
};

const SomeText = withStyles(styles)(({classes, ...props}) => (
  <TextField
    className={classes.displayLinebreakAndTab}
    {...props}
  />
));