首页 文章

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

提问于
浏览
0

我正在开发一个定制的古腾堡块 . 我接受一些输入( Headers ,按钮文本等),然后显示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中检索 Headers 和按钮的正确值?有任何想法吗?

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 .

    然后在 edit 函数中使用它:

    <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"
    />
    

相关问题