);
};
const element = document.getElementById('root') as HTMLElement;
ReactDOM.createRoot(element).render(
);
```
您可以在创建画布渲染器时, 通过添加自己的渲染组件来覆盖内容块的默认渲染
```tsx
import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';
import { Block, Image, ImageBlock, RenderBlockProps, RenderContextProvider, Renderer, Table, TableBlock } from '@contensis/canvas-react';
import * as CanvasData from './canvas-data';
const MyImage = (props: RenderBlockProps) => {
// Embelish the image markup if a caption is included
const caption = props.block?.value?.caption;
// Set a className for the image in all cases
return !!caption ? (
{caption}
) : (
);
};
const MyTable = (props: RenderBlockProps) => {
// Set CSS className on tables
return
);
};
const element = document.getElementById('root') as HTMLElement;
ReactDOM.createRoot(element).render(
);
```
对于Canvas数据中的任何组件字段,我们也可以这样做
```tsx
import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';
import { Block, Image, RenderContextProvider, Renderer, Table } from '@contensis/canvas-react';
import * as CanvasData from './canvas-data';
type Book = { cover: string; name: string };
// Render a "book" component within the canvas data
const MyBookComponent = (props: RenderBlockProps) => {
const book = props.block?.value;
if (!book) return null;
return (
{book.name}
{book.name}
);
}
// Component wrapping a customised Renderer for use in our app
const SimpleRenderer = ({ data }: { data: Block[] }) => {
return (
);
};
// Our React App
const App = () => {
const [data] = useState(CanvasData.data); // Demo data
return (