富文本- 反应- 提交者

内容丰富的文本字段类型的反应渲染器.

安装

使用 无数字 :

npm install @contentful/rich-text-react-renderer

使用 线条数字 :

yarn add @contentful/rich-text-react-renderer

使用量

import { documentToReactComponents } from '@contentful/rich-text-react-renderer';

const document = {
  nodeType: 'document',
  data: {},
  content: [
    {
      nodeType: 'paragraph',
      data: {},
      content: [
        {
          nodeType: 'text',
          value: 'Hello world!',
          marks: [],
          data: {},
        },
      ],
    },
  ],
};

documentToReactComponents(document); // -> <p>Hello world!</p>

import { documentToReactComponents } from '@contentful/rich-text-react-renderer';

const document = {
  nodeType: 'document',
  content: [
    {
      nodeType: 'paragraph',
      content: [
        {
          nodeType: 'text',
          value: 'Hello',
          marks: [{ type: 'bold' }],
        },
        {
          nodeType: 'text',
          value: ' world!',
          marks: [{ type: 'italic' }],
        },
      ],
    },
  ],
};

documentToReactComponents(document);
// -> <p><b>Hello</b><u> world!</u></p>

也可以通过标记和节点的自定义渲染器作为这样的可选参数:

import { BLOCKS, MARKS } from '@contentful/rich-text-types';
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';

const document = {
  nodeType: 'document',
  content: [
    {
      nodeType: 'paragraph',
      content: [
        {
          nodeType: 'text',
          value: 'Hello',
          marks: [{ type: 'bold' }],
        },
        {
          nodeType: 'text',
          value: ' world!',
          marks: [{ type: 'italic' }],
        },
      ],
    },
  ],
};

const Bold = ({ children }) => <p className="bold">{children}</p>;

const Text = ({ children }) => <p className="align-center">{children}</p>;

const options = {
  renderMark: {
    [MARKS.BOLD]: (text) => <Bold>{text}</Bold>,
  },
  renderNode: {
    [BLOCKS.PARAGRAPH]: (node, children) => <Text>{children}</Text>,
  },
  renderText: (text) => text.replace('!', '?'),
};

documentToReactComponents(document, options);
// -> <p class="align-center"><p class="bold">Hello</p><u> world?</u></p>

最后,但并非最不重要的是,您可以通过嵌入式条目的自定义渲染组件:

import { BLOCKS } from '@contentful/rich-text-types';
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';

const document = {
  nodeType: 'document',
  content: [
    {
      nodeType: 'embedded-entry-block',
      data: {
        target: (...)Link<'Entry'>(...);
      },
    },
  ]
};

const CustomComponent = ({ title, description }) => (
  <div>
    <h2>{title}</h2>
    <p>{description}</p>
  </div>
);

const options = {
  renderNode: {
    [BLOCKS.EMBEDDED_ENTRY]: (node) => {
      const { title, description } = node.data.target.fields;
      return <CustomComponent title={title} description={description} />
    }
  }
};

documentToReactComponents(document, options);
// -> <div><h2>[title]</h2><p>[description]</p></div>

这个 renderNode 键应为以下之一 BLOCKS 财务报告和审定财务报表 INLINES 定义属性 @contentful/rich-text-types数字 :

• BLOCKS

  • DOCUMENT
  • PARAGRAPH
  • HEADING_1
  • HEADING_2
  • HEADING_3
  • HEADING_4
  • HEADING_5
  • HEADING_6
  • UL_LIST
  • OL_LIST
  • LIST_ITEM
  • QUOTE
  • HR
  • EMBEDDED_ENTRY
  • EMBEDDED_ASSET
  • EMBEDDED_RESOURCE

• INLINES

  • EMBEDDED_ENTRY (这与 BLOCKS.EMBEDDED_ENTRY(中文(简体) )
  • EMBEDDED_RESOURCE
  • HYPERLINK
  • ENTRY_HYPERLINK
  • ASSET_HYPERLINK
  • RESOURCE_HYPERLINK

这个 renderMark 键应为以下之一 MARKS 定义属性 @contentful/rich-text-types数字 :

• BOLD
• ITALIC
• UNDERLINE
• CODE

这个 renderText callback是一个具有单一字符串参数并返回反应节点的函数。 每个文本节点由这个回调单独评估. 一种可能的用例是取代 \n 生产 Shift + Enter 与 <br/> 反应元素. 可以通过下列方式做到这一点:

const options = {
  renderText: (text) => {
    return text.split('\n').reduce((children, textSegment, index) => {
      return [...children, index > 0 && <br key={index} />, textSegment];
    }, []);
  },
};

关于添加a的说明 key 自定义渲染器中的道具 :

有可能通过 key 由自定义渲染器返回的组件中的道具。 使用节点嵌入的条目中有一个很好的用途 target.sys.id。重要的是不要通过任何类似索引(例如1或1)的东西,因为它可能与自动注入一个索引的默认渲染器相冲突 key prop在内容丰富的文本 AST 中使用它们的索引.

要围绕这个限制工作, 请在您的自定义密钥中附加任何非数字字符 .

const options = {
  renderMark: {
    [MARKS.BOLD]: (text) => {
      return <b key={`${text}-key`}>{text}</b>;
    },
  },
};

保留空白

这个 options 对象可以包含一个 preserveWhitespace 布尔旗。 设定为 true,此旗帜通过替换内容,确保丰富文本内容中的多个空格得到保存  换行符 <br /> 标签。 这对依赖于使用空格和换行符进行特定格式化的内容有用.

请注意: preserveWhitespace 与 renderText 选项。 当功能 preserveWhitespace 与习惯一起需要 renderText 复召,应在复召范围内执行.

import { documentToReactComponents } from '@contentful/rich-text-react-renderer';

const document = {
  nodeType: 'document',
  content: [
    {
      nodeType: 'paragraph',
      content: [
        {
          nodeType: 'text',
          value: 'Hello     world!',
          marks: [],
        },
      ],
    },
  ],
};

const options = {
  preserveWhitespace: true,
};

documentToReactComponents(document, options);
// -> <p>Hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;world!</p>

在这个例子中,"Hello"和"world!"之间的多处空格被保存在已渲染的输出中.