首页 > 编程语言 >Extraneous non-props attributes (title) were passed to component but could not be automatically inhe

Extraneous non-props attributes (title) were passed to component but could not be automatically inhe

时间:2024-03-29 10:44:32浏览次数:15  
标签:non because component 透传 attrs context props Attributes

大概意思就是给子组件传递的属性,由于子组件呈现片段或文本根节点,无法自动继承;就是"透传 Attributes"。

对于多根节点的组件没有自动 attribute 透传行为;如果 $attrs 没有被显式绑定,将会抛出一个运行时警告。

解决方式:手动显示绑定$attrs

(1)模板
	<template>
		<h1>多根节点的 Attributes 继承</h1>
		<div :="$attrs"></div>
	</template>

(2)渲染函数
	export default defineComponent({
		setup(props,context){
			const attrs = context.attrs
			return ()=>[h('h1','多根节点的 Attributes 继承'), h('div',{...attrs},'透传 Attributes')]
		}
	})

(3)JSX / TSX
	export default defineComponent({
		setup(props,context){
			// `attrs` 包含了所有非 props 的 attribute
			const attrs = context.attrs
			return () => {
				return (
				  <>
					<h1>多根节点的 Attributes 继承</h1>
					<div {...attrs}>透传 Attributes</div>
				  </>
				)
			}
		}
	})

  

  

  

标签:non,because,component,透传,attrs,context,props,Attributes
From: https://www.cnblogs.com/changxue/p/18103281

相关文章

  • teamcenter中 import com.teamcenter.rac.commonclient.date.DateComponent;的使用
     渲染:Datedate=null; TCPropertyDescriptordescriptor=property.getDescriptor(); Stringpropertyname=descriptor.getName(); if("EOL_Date".equals(propertyname)){// DateComponenta=newDateComponent(); date=property.getDateVa......
  • 关于使用IconData时flutter build apk 打包报错Target aot_android_asset_bundle fail
    flutter项目中引入了iconfont.ttf之后,调试时正常,打包就报错。 网上有的说法是:使用了iconfont.ttf里面不存在的icon,但是我使用的都是在iconfont.tt文件中的icon。 我的情况是使用了switch  case给IconData的codePoint动态赋值,下面这种情况就是打包报错的 解决办法是......
  • 解决 TS7053: Element implicitly has an any type because expression of type strin
    背景有个接口interfaceDataType{id:number;name:string;created_at:string;updated_at:string;}我的数据{"id":9,"created_at":"2024-03-11T17:50:16.129235+08:00","updated_at":"202......
  • non constant or forward reference address expression for section .ARM.extab 错误
    编译时报错:FAILED:STM32F103RET6_Test001.elfcmd.exe/C"cd.&&D:\ProgramFiles\gcc-arm-none-eabi\bin\arm-none-eabi-gcc.exe-g-Wl,-gc-sections,--print-memory-usage,-Map=D:/ProjectCode/CLion/test/STM32F103RET6_Test001/cmake-build-debug-arm-......
  • vue2 defineComponent 自定义组件的强大功能
    完全可以通过向defineComponent()传入一个选项式API所定义的object,来定义一个组件,并包含各种响应式功能;如下About组件所示:<scriptsetup>import{ref,computed,defineComponent}from'vue'constHome=defineComponent({template:`<h1>Home</h1>`})constAbo......
  • centos7 Packstack allinone安装openstack
    centos7Packstackallinone安装openstackPackstack是一种用于自动化部署OpenStack环境的工具,它可以快速安装和配置OpenStack的各个组件,同时提供了一些默认设置以方便快速上手。All-in-One模式是Packstack的一种安装模式,它在一台物理或虚拟机上部署了所有OpenStack的核心组件,包......
  • 使用{ "dependencies": { "my-component-library-b": "workspace:^" } } 这种方式
    在使用{"dependencies":{"my-component-library-b":"workspace:^"}}方式引用组件库B时,由于B包是作为工作区的一部分,因此在这种情况下,你不需要将B包预先打包成库文件(如UMD、CommonJS或ES模块格式)。YarnWorkspaces可以直接解析和链接工作区内的依赖。这意味着,业务包A......
  • vue3 动态编译组件失败:Component provided template option but runtime compilation
    根据vue3官方文档路由,写了如下一个简单的页面来模拟路由的实现。为了减少*.vue文件的个数,在这个但页面中,使用defineComponent通过object定义组件。<scriptsetup>import{ref,computed,defineComponent}from'vue'constHome=defineComponent({template:`......
  • Camunda问题:src-resolve: Cannot resolve the name ‘extension‘ to a(n) ‘element
    问题描述今天,小伙伴在使用云程低代码平台创建流程模板时,出现了报错,如下图:后台堆栈信息如下:ENGINE-16004Exceptionwhileclosingcommandcontext:ENGINE-09005CouldnotparseBPMNprocess.Errors:*src-resolve:Cannotresolvethename'extension'toa(n)'ele......
  • 使用PureComponent进行自动优化
    在React应用中,性能优化是一个重要的环节,尤其是对于企业级的电子商务系统来说,良好的用户体验直接关联到用户留存和转化率。PureComponent是React提供的一个工具,能帮助我们在一些场景下自动进行性能优化。接下来,我将通过简单易懂的语言解释PureComponent是什么,它如何工作,以及如何......