为什么我的古腾堡块没有保存和渲染棋盘

Question

我正在构建一个古腾堡块，用户将在其中将 PGN 代码（国际象棋游戏符号）放置在

RichText

字段内。在前端，游戏的代码将嵌入棋盘库中，并显示游戏的符号和动作。当我将 PGN 粘贴到

RichText

字段中时，控制台中出现错误，提示我出现错误

Error: Minified React error #321

（无效的挂钩调用错误）。

我正在使用 @mliebelt/pgn-viewer 作为棋盘。

这是我的代码：

编辑.js

import { __ } from '@wordpress/i18n';

import { useBlockProps, RichText } from '@wordpress/block-editor';

import './editor.scss';
export default function Edit({attributes, setAttributes}) {
const blockProps = useBlockProps();

const handleChange = (val) => {
    console.log('New value:', val);
    setAttributes({ pgnCode: val });
};

    return (
        <>
        <RichText
        {...blockProps}
        className="pgn-textarea"
        tagName="p"
        placeholder={__("Enter PGN code here...", "wcbp")}
        value={attributes.pgnCode}
        onChange={handleChange}
        allowedFormats={[]}
        />
        </>
    );
}

保存.js

import { useBlockProps } from '@wordpress/block-editor';

import { useEffect, useState } from 'react';
import { pgnView } from '@mliebelt/pgn-viewer';
import PGNViewer from './PGNViewer';

export default function save({ attributes }) {
    const blockProps = useBlockProps.save();

        
    return (
        <div {...blockProps}>
        <PGNViewer attributes={attributes} />
    </div>
    );
}

PGNViewer.js

import { useEffect } from 'react';
import { pgnView } from '@mliebelt/pgn-viewer';

function PGNViewer({ attributes }) {
    if (!attributes || !attributes.pgnCode) {
        return null; // Or render a placeholder
    }

    const newBoardId = `board-${Math.floor(Math.random() * 100000)}`;

    useEffect(() => {
        pgnView(newBoardId, {
            pgn: attributes.pgnCode,
            notation: 'long',
            layout: 'left',
            locale: 'pl',
            startPlay: 1,
            showResult: true,
            boardSize: '500',
            showFen: false,
            pieceStyle: 'merida'
        });
    }, [attributes.pgnCode]);

    return <div id={newBoardId}></div>;
}

export default PGNViewer;

Answer 1

保存.js

修改您的

save.js

文件，使其仅输出具有

<div>

和

id

属性的单个

data-pgn-code

。

id

将是我们根元素的目标。

data-pgn-code

将是

pgnCode

属性值的容器。

import { useBlockProps } from '@wordpress/block-editor';

export default function save({ attributes: { pgnCode } }) {
  const blockProps = useBlockProps.save({
    id: 'pgn-viewer-root'
    'data-pgn-code': pgnCode
  });

  return <div {...blockProps} />
}

View.js

在

view.js

中，您获取保存的 div 并使用

createRoot

挂载

PGNViewer

组件。通过从根元素获取数据属性的值，将 props 传递给组件。

import { createRoot } from "@wordpress/element";
import PGNViewer from './PGNViewer';

const domNode = document.getElementById('pgn-viewer-root');

if (domNode !== null) {
  const pgnCode = domNode.dataset.pgnCode;
  const root = createRoot(domNode);

  root.render(
    <PGNViewer pgnCode={pgnCode} />
  );
}

注释

• 实现

  pgnView

  查看器同样容易，而不用在

  view.js

  文件中安装 React 组件。但由于问题是关于在前端使用 React，我将把它留给你。
• 在上面的示例中

  PGNViewer

  接受单个 prop

  pgnCode

  而不是整个

  attributes

  对象。请务必考虑到这一变化