Gutenberg With InstanceID。什么时候用呢?

时间:2019-01-04 作者:at least three characters

古腾堡的WordPress块API具有withInstanceId package.

他们说,

一些组件需要为每个实例生成唯一的id。例如,这可以作为元素ID的后缀。使用withInstanceId包装组件可提供唯一的instanceId来实现此目的。

并举例说明:

/**
 * WordPress dependencies
 */
import { withInstanceId } from \'@wordpress/compose\';

function MyCustomElement( { instanceId } ) {
    return (
        <div id={ `my-custom-element-${ instanceId }` }>
            content
        </div>
    );
}

export default withInstanceId( MyCustomElement );
它似乎只是用于html ID?至于没有重复的id名称?它还有其他用途吗?如果我只是使用export default withInstanceId( MyCustomElement ) 整个组件是否具有唯一的id?

2 个回复
最合适的回答,由SO网友:Alvaro 整理而成

生成的id 添加到组件的道具。因此可以通过this.props.instanceId 组件内部。

在您发布的示例中,它用于分配唯一id attribute 到html元素。但是,它可以用于react内部的自定义逻辑。例如,可以为每个组件指定id 然后将其数据保存到redux存储中,这样当需要从存储中的元素访问数据时,可以使用id 找到它。

SO网友:Meera

您可以使用clientId来唯一标识块。clientId在props中可用。

像这样的。。

export function EditBlock({clientId, setAttributes} ) {
  
  // save clientId in attributes to make it available in Save
  return (
        <div id={ `my-custom-element-${ clientId }` }>
            content
        </div>
    ); 
}
无需进行HOC。

相关推荐