反应-电子邮件-编辑器加载使用获取数据动态设计

Question

我尝试将反应电子邮件编辑器集成为一个组件。 仅当我使用定义为常量的设计时，它才有效。

这是示例 https://github.com/unlayer/react-email-editor/blob/master/demo/src/example/index.js

我对 reactjs useRef 没有更深入的经验。 我尝试了不同的方法来加载数据，但没有成功：

• 将数据加载到包装器组件中并将其作为 props 传递
• 使用 useEffect 和 useState 处理数据

有成功的样本吗？

...
const [selected, setSelected] = useState();

const emailEditorRef = useRef(null);
useEffect(() => {
loadSelectedDesign(selected);
}, [selected]);
const loadSelectedDesign = (design) => {
console.log("loadSelectedDesign", design);
// does not work:
if (emailEditorRef.current && emailEditorRef.current.editor)
emailEditorRef.current.editor.loadDesign(design);
}
...
const select = () => {
const fetchSelectedTemplate = async () => {
const emailTemplate = (
await dataProvider.getEmailTemplate("XYZ")
).data;
setSelected(emailTemplate);
};
fetchSelectedTemplate();
};
...

<Button onClick={select}>
Load
</Button>
<React.StrictMode>
<EmailEditor ref={emailEditorRef} onLoad={onLoad} onReady={onReady} options={props.unlayerOptions} />
</React.StrictMode>

Answer 1

捕获所有内容的结果并将其注销到控制台(即使函数应返回 void/undefined)。

我怀疑你只需要await承诺。

await fetchSelectedTemplate()

Answer 2

我能够自己解决它。 这只是加载 JSON 时的格式问题。