0

我正在开发一个定制的古腾堡块。我接受了一些输入（标题、按钮文本等）并显示了一个 iframe。这些属性的值是 iframe 的 url 中的查询参数。当我尝试编辑该块时，我试图从该 iframe 中提取这些值，但我一直失败。我的计划 B 是用这些值保存一个不可见的 div，或者将一些数据属性传递给 iframe，然后以这种方式取回值，因为我不知道如何解析 src 以获取查询参数。

registerBlockType('box-card/conversion-boxes', {   
  title: 'Conversion boxes',
  icon: 'nametag',
  category: 'common',
  attributes: {
    title: {
      source: 'attribute',
      selector: 'iframe',
      attribute: 'src'
    },
    button: {
      source: 'attribute',
      selector: 'iframe',
      attribute: 'src'
    },
  }

我的 src 的样子是：

src="/modularconvbox/modularconvbox.php?type=newsletter&title=test-title&button=test-button"

如何在 React 中检索标题和按钮的正确值？有任何想法吗？

4

1 回答 1

0

我实际上发现它是这样工作的：

registerBlockType('box-card/conversion-boxes', {   
  title: 'Conversion boxes',
  icon: 'nametag',
  category: 'common',
  attributes: {
    title: {
      type="text",
      selector: '.class1'
    },
    button: {
      type="text",
      selector: '.class2'
    },
  }

只要您不使用selector，它的工作原理与将 iframe 保存为任何其他块相同。

然后你在编辑功能中使用它：

<PlainText
  onChange={ content => setAttributes({ title: content }) }
  value={ attributes.title }
  placeholder="Conversion box title"
  className="class1"
/>

<PlainText
  onChange={ content => setAttributes({ button: content }) }
  value={ attributes.button }
  placeholder="Conversion box button text"
  className="class2"
/>
于 2018-07-13T10:13:41.763 回答