在WordPress Gutenberg块中返回大块HTML

Question

我正在构建一个古腾堡块，但遇到了一个问题。

我想返回一大块 HTML，但收到有关意外<的错误。>

有没有办法从古腾堡块返回一大块 HTML，而无需转义所有内容或在 Javascript 中逐个元素构建它？

这是我的示例代码：

wp.blocks.registerBlockType('myforms/contactus', {
title: 'Contact Us',
icon: 'smiley',
category: 'widgets',
edit: function (props) {
return React.createElement(
"div",
null,
"Contact Us form will be rendered here."
);
},
save: function (props) {
return (
<div>
<form method="post" action="#" id="ContactForm" class="contact-form form-with-validation col-md-12 m-2">
<div class="mt-3 mb-3">
<div class="form-row">
<div class="form-group col-md-6">
<label for="FirstName" class="sr-only">First name</label>
<input type="text" id="FirstName" name="FirstName" placeholder="First name" class="form-control" required data-rule-required="true" data-msg-required="Please enter your first name." />
</div>
<div class="form-group col-md-6">
<label for="LastName" class="sr-only">Last name</label>
<input type="text" id="LastName" name="LastName" placeholder="Last name" class="form-control" required data-rule-required="true" data-msg-required="Please enter your last name."/>
</div>
</div>
<div class="form-group">
<label for="Email" class="sr-only">Email</label>
<input type="email" id="Email" name="Email" placeholder="Email" class="form-control" required data-rule-required="true" data-msg-required="Please enter your email address." data-rule-email="true" data-msg-email="Please enter a valid email address." />
</div>
<div class="form-group">
<label for="Subject" class="sr-only">Subject</label>
<input type="text" id="Subject" name="Subject" placeholder="Subject" class="form-control" required data-rule-required="true" data-msg-required="Please enter a message subject." />
</div>
<div class="form-group">
<label for="Message" class="sr-only">Your message...</label>
<textarea rows="5" cols="20" id="Message" name="Message" placeholder="Your message..." class="form-control" required data-rule-required="true" data-msg-required="Please enter a message."></textarea>
</div>
</div>
<div class="form-group">
<input type="hidden" id="FormType" name="FormType" value="ContactForm" />
<button type="submit" id="SendButton" class="btn btn-primary">Send message</button>
</div>
</form>
<div class="form-with-validation-success col-md-12 m-2">
Your message has been successfully sent.
</div>
<div class="form-with-validation-error col-md-12 m-2">
Unfortunately, an error occurred while submitting this form.  
</div>
</div>
);
}
})

Answer 1

---

更新/解决方案：我发现以下内容有效。 通过使用模板文字(即用反引号包围(，我可以将整个 HTML 块作为单个变量返回，但保持可维护的方式。

注意：Chrome，Safari，Edge和Firefox都支持此功能超过四年。 但是，某些浏览器 - 特别是当前版本的Internet Explorer - 不支持此功能。 您可以通过 Babel 等工具运行脚本作为构建过程的一部分来缓解此问题。

function GetContactUsHtml() {
return html = `
<form method="post" action="#" id="ContactForm" class="contact-form form-with-validation col-md-12 m-2">
<div class="mt-3 mb-3">
<div class="form-row">
<div class="form-group col-md-6">
<label for="FirstName" class="sr-only">First name</label>
<input type="text" id="FirstName" name="FirstName" placeholder="First name" class="form-control" required data-rule-required="true" data-msg-required="Please enter your first name." />
</div>
<div class="form-group col-md-6">
<label for="LastName" class="sr-only">Last name</label>
<input type="text" id="LastName" name="LastName" placeholder="Last name" class="form-control" required data-rule-required="true" data-msg-required="Please enter your last name."/>
</div>
</div>
<div class="form-group">
<label for="Email" class="sr-only">Email</label>
<input type="email" id="Email" name="Email" placeholder="Email" class="form-control" required data-rule-required="true" data-msg-required="Please enter your email address." data-rule-email="true" data-msg-email="Please enter a valid email address." />
</div>
<div class="form-group">
<label for="Subject" class="sr-only">Subject</label>
<input type="text" id="Subject" name="Subject" placeholder="Subject" class="form-control" required data-rule-required="true" data-msg-required="Please enter a message subject." />
</div>
<div class="form-group">
<label for="Message" class="sr-only">Your message...</label>
<textarea rows="5" cols="20" id="Message" name="Message" placeholder="Your message..." class="form-control" required data-rule-required="true" data-msg-required="Please enter a message."></textarea>
</div>
</div>
<div class="form-group">
<input type="hidden" id="FormType" name="FormType" value="ContactForm" />
<button type="submit" id="SendButton" class="btn btn-primary">Send message</button>
</div>
</form>
<div class="form-with-validation-success col-md-12 m-2">
Your message has been successfully sent.   Thank you for taking the time to provide us your feedback.
</div>
<div class="form-with-validation-error col-md-12 m-2">
Unfortunately, an error occurred while submitting this form.
</div>
`;
}
wp.blocks.registerBlockType('whrf/contactus', {
title: 'Contact Us',
icon: 'smiley',
category: 'widgets',
edit: function (props) {
return React.createElement(
"div",
null,
"Contact Us form will be rendered here."
);
},
save: function (props) {
return wp.element.createElement(
"div",
{
dangerouslySetInnerHTML: {
__html: GetContactUsHtml()
}
}
);
}
})