Question

我正在开发一个自定义的古腾堡块。我输入了一些内容（标题，按钮文字等），然后显示了iframe。这些属性的值是iframe网址中的查询参数。当我尝试编辑该代码块时，我试图从该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中检索标题和按钮的正确值？有什么想法吗？

Answer 1

我实际上发现它可以这样工作：

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

只要不使用选择器，它的作用与将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"
/>

如何为React Gutenberg属性分配iframe网址查询参数值

1 个答案: