Question

我正在使用React-Admin，并且我的数据库中有一个包含换行符（\ n）的字段。当我在这样的页面上输出此内容时：

<TextField source="extra_details" />

换行符被忽略，所有内容一起运行。如何使换行符正确显示？

谢谢

Answer 1

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

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

Answer 4

我发现此线程非常有用。 https://github.com/marmelab/react-admin/issues/2403

TextField组件将其所有道具传递给基础的Typography组件。因此，您可以这样做：

<TextField component="pre" />

使用React-Admin / Material UI的Textfields保留换行符？

4 个答案: