default-template-argument 相关问题

Vue 3如何获取$children的信息

这是我在 Tabs 组件中使用 VUE 2 的旧代码：创建（）{ this.tabs = this.$children; } 标签： .... 这是我在 Tabs 组件中使用 VUE 2 的旧代码： created() { this.tabs = this.$children; } 标签： <Tabs> <Tab title="tab title"> .... </Tab> <Tab title="tab title"> .... </Tab> </Tabs> VUE 3：如何使用组合 API 获取有关 Tabs 组件中子项的一些信息？获取长度，迭代它们，并创建选项卡标题，...等？有任何想法吗？（使用组合API）这是我现在的 Vue 3 组件。我使用 Provide 来获取子 Tab 组件中的信息。 <template> <div class="tabs"> <div class="tabs-header"> <div v-for="(tab, index) in tabs" :key="index" @click="selectTab(index)" :class="{'tab-selected': index === selectedIndex}" class="tab" > {{ tab.props.title }} </div> </div> <slot></slot> </div> </template> <script lang="ts"> import {defineComponent, reactive, provide, onMounted, onBeforeMount, toRefs, VNode} from "vue"; interface TabProps { title: string; } export default defineComponent({ name: "Tabs", setup(_, {slots}) { const state = reactive({ selectedIndex: 0, tabs: [] as VNode<TabProps>[], count: 0 }); provide("TabsProvider", state); const selectTab = (i: number) => { state.selectedIndex = i; }; onBeforeMount(() => { if (slots.default) { state.tabs = slots.default().filter((child) => child.type.name === "Tab"); } }); onMounted(() => { selectTab(0); }); return {...toRefs(state), selectTab}; } }); </script> 选项卡组件： <script lang="ts"> export default defineComponent({ name: "Tab", setup() { const index = ref(0); const isActive = ref(false); const tabs = inject("TabsProvider"); watch( () => tabs.selectedIndex, () => { isActive.value = index.value === tabs.selectedIndex; } ); onBeforeMount(() => { index.value = tabs.count; tabs.count++; isActive.value = index.value === tabs.selectedIndex; }); return {index, isActive}; } }); </script> <template> <div class="tab" v-show="isActive"> <slot></slot> </div> </template> 哦伙计们，我解决了： this.$slots.default().filter(child => child.type.name === 'Tab') 对于想要完整代码的人：标签.vue <template> <div> <div class="tabs"> <ul> <li v-for="tab in tabs" :class="{ 'is-active': tab.isActive }"> <a :href="tab.href" @click="selectTab(tab)">{{ tab.name }}</a> </li> </ul> </div> <div class="tabs-details"> <slot></slot> </div> </div> </template> <script> export default { name: "Tabs", data() { return {tabs: [] }; }, created() { }, methods: { selectTab(selectedTab) { this.tabs.forEach(tab => { tab.isActive = (tab.name == selectedTab.name); }); } } } </script> <style scoped> </style> 标签.vue <template> <div v-show="isActive"><slot></slot></div> </template> <script> export default { name: "Tab", props: { name: { required: true }, selected: { default: false} }, data() { return { isActive: false }; }, computed: { href() { return '#' + this.name.toLowerCase().replace(/ /g, '-'); } }, mounted() { this.isActive = this.selected; }, created() { this.$parent.tabs.push(this); }, } </script> <style scoped> </style> 应用程序.js <template> <Tabs> <Tab :selected="true" :name="'a'"> aa </Tab> <Tab :name="'b'"> bb </Tab> <Tab :name="'c'"> cc </Tab> </Tabs> <template/> 我扫描子元素的解决方案（在对 vue 代码进行大量筛选之后）是这样的。 export function findChildren(parent, matcher) { const found = []; const root = parent.$.subTree; walk(root, child => { if (!matcher || matcher.test(child.$options.name)) { found.push(child); } }); return found; } function walk(vnode, cb) { if (!vnode) return; if (vnode.component) { const proxy = vnode.component.proxy; if (proxy) cb(vnode.component.proxy); walk(vnode.component.subTree, cb); } else if (vnode.shapeFlag & 16) { const vnodes = vnode.children; for (let i = 0; i < vnodes.length; i++) { walk(vnodes[i], cb); } } } 这将返回子组件。我对此的用途是我有一些通用的对话框处理代码，用于搜索子表单元素组件以咨询其有效性状态。 const found = findChildren(this, /^(OSelect|OInput|OInputitems)$/); const invalid = found.filter(input => !input.checkHtml5Validity()); 如果你复制粘贴与我相同的代码然后只需向“选项卡”组件添加一个创建的方法，该方法将自身添加到其父级的选项卡数组中 created() { this.$parent.tabs.push(this); }, 使用脚本设置语法，您可以使用useSlots：https://vuejs.org/api/sfc-script-setup.html#useslots-useattrs <script setup> import { useSlots, ref, computed } from 'vue'; const props = defineProps({ perPage: { type: Number, required: true, }, }); const slots = useSlots(); const amountToShow = ref(props.perPage); const totalChildrenCount = computed(() => slots.default()[0].children.length); const childrenToShow = computed(() => slots.default()[0].children.slice(0, amountToShow.value)); </script> <template> <component :is="child" v-for="(child, index) in childrenToShow" :key="`show-more-${child.key}-${index}`" ></component> </template> 我对 Ingrid Oberbüchler 的组件做了一个小改进，因为它不支持热重载/动态选项卡。在 Tab.vue 中： onBeforeMount(() => { // ... }) onBeforeUnmount(() => { tabs.count-- }) 在 Tabs.vue 中： const selectTab = // ... // ... watch( () => state.count, () => { if (slots.default) { state.tabs = slots.default().filter((child) => child.type.name === "Tab") } } ) 我也遇到了同样的问题，在做了很多研究并问自己为什么他们删除了$children之后，我发现他们创建了一个更好、更优雅的替代方案。这是关于动态组件的。 (<component: is =" currentTabComponent "> </component>). 我在这里找到的信息： https://v3.vuejs.org/guide/component-basics.html#dynamic-components 希望这对你有用，向大家问好！！我发现这个更新的 Vue3 教程使用 Vue 插槽构建可重用的选项卡组件对于与我相关的解释非常有帮助。它使用 ref、provide 和ject 来替换我遇到同样问题的this.tabs = this.$children;。我一直在遵循我最初发现的构建选项卡组件（Vue2）的教程的早期版本创建您自己的可重用 Vue 选项卡组件。根据 Vue 文档，假设您在 Tabs 组件下有一个默认插槽，您可以直接在模板中访问该插槽的子级，如下所示： // Tabs component <template> <div v-if="$slots && $slots.default && $slots.default()[0]" class="tabs-container"> <button v-for="(tab, index) in getTabs($slots.default()[0].children)" :key="index" :class="{ active: modelValue === index }" @click="$emit('update:model-value', index)" > <span> {{ tab.props.title }} </span> </button> </div> <slot></slot> </template> <script setup> defineProps({ modelValue: Number }) defineEmits(['update:model-value']) const getTabs = tabs => { if (Array.isArray(tabs)) { return tabs.filter(tab => tab.type.name === 'Tab') } else { return [] } </script> <style> ... </style> 并且 Tab 组件可能类似于： // Tab component <template> <div v-show="active"> <slot></slot> </div> </template> <script> export default { name: 'Tab' } </script> <script setup> defineProps({ active: Boolean, title: String }) </script> 实现应类似于以下内容（考虑一组对象，每个部分一个，带有 title 和 component）： ... <tabs v-model="active"> <tab v-for="(section, index) in sections" :key="index" :title="section.title" :active="index === active" > <component :is="section.component" ></component> </app-tab> </app-tabs> ... <script setup> import { ref } from 'vue' const active = ref(0) </script> 另一种方法是使用 useSlots，如 Vue 文档（上面的链接）中所述。在 3.x 中，$children 属性已被删除并且不再受支持。相反，如果您需要访问子组件实例，他们建议使用 $refs。作为数组 https://v3-migration.vuejs.org/writing-changes/children.html#_2-x-syntax 在 3.x 版本中，$children 已被删除且不再受支持。使用 ref 访问子实例。 <script setup> import { ref, onMounted } from 'vue' import ChildComponent from './ChildComponent .vue' const child = ref(null) onMounted(() => { console.log(child.value) // log an instance of <Child /> }) </script> <template> <ChildComponent ref="child" /> </template> 详细信息：https://vuejs.org/guide/essentials/template-refs.html#template-refs 基于@Urkle的回答： /** * walks a node down * @param vnode * @param cb */ export function walk(vnode, cb) { if (!vnode) return; if (vnode.component) { const proxy = vnode.component.proxy; if (proxy) cb(vnode.component.proxy); walk(vnode.component.subTree, cb); } else if (vnode.shapeFlag & 16) { const vnodes = vnode.children; for (let i = 0; i < vnodes.length; i++) { walk(vnodes[i], cb); } } } 除了已接受的答案之外：而不是 this.$root.$children.forEach(component => {}) 写 walk(this.$root, component => {}) 这就是我让它为我工作的方式。

嵌套 useFetch 导致 Nuxt 3 中的 Hydration 节点不匹配

在 Nuxt 3 页面内，我通过从 pinia 存储调用操作来获取帖子数据： {{ 发布数据 }} {{ 帖子内容... 在 Nuxt 3 页面内，我通过从 pinia 商店调用操作来获取帖子数据： <template> <div v-if="postData && postContent"> {{ postData }} {{ postContent }} </div> </template> <script setup> const config = useRuntimeConfig() const route = useRoute() const slug = route.params.slug const url = config.public.wpApiUrl const contentStore = useContentStore() await contentStore.fetchPostData({ url, slug }) const postData = contentStore.postData const postContent = contentStore.postContent </script> 那是我的商店： import { defineStore } from 'pinia' export const useContentStore = defineStore('content',{ state: () => ({ postData: null, postContent: null }), actions: { async fetchPostData({ url, slug }) { try { const { data: postData, error } = await useFetch(`${url}/wp/v2/posts`, { query: { slug: slug }, transform(data) { return data.map((post) => ({ id: post.id, title: post.title.rendered, content: post.content.rendered, excerpt: post.excerpt.rendered, date: post.date, slug: post.slug, })); } }) this.postData = postData.value; if (postData && postData.value && postData.value.length && postData.value[0].id) { const {data: postContent} = await useFetch(`${url}/rl/v1/get?id=${postData.value[0].id}`, { method: 'POST', }); this.postContent = postContent.value; } } catch (error) { console.error('Error fetching post data:', error) } } } }); 浏览器中的输出正常，但我在浏览器控制台中收到以下错误： entry.js:54 [Vue warn]: Hydration node mismatch: - rendered on server:  - expected on client: div at <[slug] onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <Anonymous key="/news/hello-world()" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/news/hello-world', hash: '', query: {…}, name: 'news-slug', path: '/news/hello-world', …} ... > at <RouterView name=undefined route=undefined > at <NuxtPage> at <Default ref=Ref< undefined > > at <LayoutLoader key="default" layoutProps= {ref: RefImpl} name="default" > at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default" ... > at <NuxtLayout> at <App key=3 > at <NuxtRoot> 如何解决这个问题？我尝试在 onMounted 中获取帖子数据，但在这种情况下 postData 和 postContent 保持为空 onMounted(async () => { await contentStore.fetchPostData({ url, slug }) }) 您可以使用 ClientOnly 组件来消除该警告。请参阅文档了解更多信息。该组件仅在客户端渲染其插槽。

Vue.js 风格的 v-html 和范围内的 css

如何使用 vue-loader 使用范围内的 css 设置 v-html 内容的样式？简单的例子：组件.vue 如何使用 vue-loader 使用范围内的 css 设置 v-html 内容的样式？简单的例子：组件.vue <template> <div class="icon" v-html="icon"></icon> </template> <script> export default { data () { return {icon: '<svg>...</svg>'} } } </script> <style scoped> .icon svg { fill: red; } </style> 生成html <div data-v-9b8ff292="" class="icon"><svg>...</svg></div> 生成CSS .info svg[data-v-9b8ff292] { fill: red; } 如您所见，v-html 内容没有 data-v 属性，但生成的 css 对于 svg 具有 data-v 属性。我知道这是 vue-loader 的预期行为（https://github.com/vuejs/vue-loader/issues/359）。在本期中提到了后代选择器。但正如你所看到的，我在我的 css 中使用了它，但它不起作用。如何设置 v-html 内容的样式？我正在使用vue-loader 15.9.1。 >>>解决方案对我不起作用（没有效果），而/deep/方法导致构建错误...... 这是有效的： .foo ::v-deep .bar { color: red; } 正如我在这里的回答所述：新版本的vue-loader（从版本12.2.0开始）允许您使用“深层范围”CSS。你需要这样使用它： <style scoped>现在支持可以影响子级的“深度”选择器使用 >>> 组合器的组件： .foo >>> .bar { color: red; } 将被编译为： .foo[data-v-xxxxxxx] .bar { color: red; } 更多信息请参见vue-loader的发布页面将 /deep/ 选择器与 SCSS 一起使用对我来说不起作用，但后来我尝试使用 ::v-deep 选择器例如 ::v-deep a { color: red; } 参见这个答案 AS Sarumanatee 说，如果接受的答案不起作用，请尝试： .foo /deep/ .bar { color: red; } 使用:deep {} 根据您的情况，您应该这样做： <template> <div class="icon" v-html="icon"></div> </template> <style scoped> .icon { :deep { svg { fill: red; } } } </style>

pycharm 类型错误：附加参数应命名为 <dialectname>_<argument>，得到“自动加载”

我是 python 新手，我的程序一直在运行，现在我收到此错误 - 文件“C:\Repo

typescript-eslint 规则，防止将带有类型参数的回调传递给不安全的函数

我试图在我的打字稿代码库中对任何内容都非常严格。我正在使用所有 no-unsafe-* 规则，因此我的 .eslintrc.js 包括： '@typescript-eslint/no-unsafe-argument': '错误', '@

在Powershell中获取StdRegProv类

我能找到的在 Powershell 中获取 StdRegProv WMI 类实例的唯一方法是 $StdRegProv = Get-WmiObject -List -Namespace root\default -ComputerName "my_computer" -Credential $cred | $StdRegProv = Get-WmiObject -List -Namespace root\default -ComputerName "my_computer" -Credential $cred |什...

React 中 Tailwind 动态类值编译的问题[重复]

我目前在尝试基于 Tailwind CSS 中动态生成的网格大小变量创建网格时遇到问题。当我使用变量设置 grid-template-rows 和 grid-template-co...

如何在mysql中添加登录尝试

如何使用php代码在mysql上添加登录尝试？ :ALTER TABLE 用户添加列 login_attempts INT DEFAULT 0; ALTER TABLE 用户添加列 login_attempts INT DEFAULT 0；但是php代码怎么样呢？我有...

在 C# 中将 Task<T> 转换为 Task<object>，无需 T

我有一个充满扩展方法的静态类，其中每个方法都是异步的并返回一些值 - 像这样：公共静态类 MyContextExtensions{ 公共静态异步任务我有一个充满扩展方法的静态类，其中每个方法都是异步的并返回一些值 - 像这样： public static class MyContextExtensions{ public static async Task<bool> SomeFunction(this DbContext myContext){ bool output = false; //...doing stuff with myContext return output; } public static async Task<List<string>> SomeOtherFunction(this DbContext myContext){ List<string> output = new List<string>(); //...doing stuff with myContext return output; } } 我的目标是能够从另一个类中的单个方法调用这些方法中的任何一个，并将其结果作为对象返回。它看起来像这样： public class MyHub: Hub{ public async Task<object> InvokeContextExtension(string methodName){ using(var context = new DbContext()){ //This fails because of invalid cast return await (Task<object>)typeof(MyContextExtensions).GetMethod(methodName).Invoke(null, context); } } } 问题是转换失败。我的困境是我无法将任何类型参数传递给“InvokeContextExtension”方法，因为它是 SignalR 中心的一部分并且由 javascript 调用。在某种程度上，我不关心扩展方法的返回类型，因为它只会序列化为 JSON 并发送回 javascript 客户端。但是，我确实必须将 Invoke 返回的值转换为任务才能使用等待运算符。我必须为该“任务”提供一个通用参数，否则它将把返回类型视为 void。因此，这一切都归结为如何成功地将具有通用参数 T 的任务转换为具有对象通用参数的任务，其中 T 表示扩展方法的输出。您可以分两步完成 - await使用基类执行任务，然后使用反射或dynamic收获结果： using(var context = new DbContext()) { // Get the task Task task = (Task)typeof(MyContextExtensions).GetMethod(methodName).Invoke(null, context); // Make sure it runs to completion await task.ConfigureAwait(false); // Harvest the result return (object)((dynamic)task).Result; } 这是一个完整的运行示例，它将上述通过反射调用 Task 的技术置于上下文中： class MainClass { public static void Main(string[] args) { var t1 = Task.Run(async () => Console.WriteLine(await Bar("Foo1"))); var t2 = Task.Run(async () => Console.WriteLine(await Bar("Foo2"))); Task.WaitAll(t1, t2); } public static async Task<object> Bar(string name) { Task t = (Task)typeof(MainClass).GetMethod(name).Invoke(null, new object[] { "bar" }); await t.ConfigureAwait(false); return (object)((dynamic)t).Result; } public static Task<string> Foo1(string s) { return Task.FromResult("hello"); } public static Task<bool> Foo2(string s) { return Task.FromResult(true); } } 一般来说，要将 Task<T> 转换为 Task<object>，我会简单地采用简单的连续映射： Task<T> yourTaskT; // .... Task<object> yourTaskObject = yourTaskT.ContinueWith(t => (object) t.Result); （文档链接在这里）但是，您实际的具体需求是通过反射调用 Task 并获取其（未知类型）结果。为此，您可以参考完整的dasblinkenlight的答案，它应该适合您的具体问题。我想提供一个实现，恕我直言，这是早期答案的最佳组合：精确的参数处理无动态调度通用扩展方法给你： /// <summary> /// Casts a <see cref="Task"/> to a <see cref="Task{TResult}"/>. /// This method will throw an <see cref="InvalidCastException"/> if the specified task /// returns a value which is not identity-convertible to <typeparamref name="T"/>. /// </summary> public static async Task<T> Cast<T>(this Task task) { if (task == null) throw new ArgumentNullException(nameof(task)); if (!task.GetType().IsGenericType || task.GetType().GetGenericTypeDefinition() != typeof(Task<>)) throw new ArgumentException("An argument of type 'System.Threading.Tasks.Task`1' was expected"); await task.ConfigureAwait(false); object result = task.GetType().GetProperty(nameof(Task<object>.Result)).GetValue(task); return (T)result; } 您不能将 Task<T> 转换为 Task<object>，因为 Task<T> 不是协变的（也不是逆变的）。最简单的解决方案是使用更多反射： var task = (Task) mi.Invoke (obj, null) ; var result = task.GetType ().GetProperty ("Result").GetValue (task) ; 这很慢且效率低下，但如果不经常执行此代码则可用。顺便说一句，如果您要阻塞等待其结果，那么异步 MakeMyClass1 方法有什么用呢？另一种可能性是为此目的编写一个扩展方法： public static Task<object> Convert<T>(this Task<T> task) { TaskCompletionSource<object> res = new TaskCompletionSource<object>(); return task.ContinueWith(t => { if (t.IsCanceled) { res.TrySetCanceled(); } else if (t.IsFaulted) { res.TrySetException(t.Exception); } else { res.TrySetResult(t.Result); } return res.Task; } , TaskContinuationOptions.ExecuteSynchronously).Unwrap(); } 它是非阻塞解决方案，将保留任务的原始状态/异常。最有效的方法是自定义等待者： struct TaskCast<TSource, TDestination> where TSource : TDestination { readonly Task<TSource> task; public TaskCast(Task<TSource> task) { this.task = task; } public Awaiter GetAwaiter() => new Awaiter(task); public struct Awaiter : System.Runtime.CompilerServices.INotifyCompletion { System.Runtime.CompilerServices.TaskAwaiter<TSource> awaiter; public Awaiter(Task<TSource> task) { awaiter = task.GetAwaiter(); } public bool IsCompleted => awaiter.IsCompleted; public TDestination GetResult() => awaiter.GetResult(); public void OnCompleted(Action continuation) => awaiter.OnCompleted(continuation); } } 具有以下用法： Task<...> someTask = ...; await TaskCast<..., object>(someTask); 这种方法的局限性在于结果不是 Task<object> 而是一个可等待的对象。我根据dasblinkenlight的回答做了一个小小的扩展方法： public static class TaskExtension { public async static Task<T> Cast<T>(this Task task) { if (!task.GetType().IsGenericType) throw new InvalidOperationException(); await task.ConfigureAwait(false); // Harvest the result. Ugly but works return (T)((dynamic)task).Result; } } 用途： Task<Foo> task = ... Task<object> = task.Cast<object>(); 这样您就可以将 T 中的 Task<T> 更改为您想要的任何内容。对于最佳方法，不使用反射和动态丑陋语法，也不传递泛型类型。我将使用两种扩展方法来实现这个目标。 public static async Task<object> CastToObject<T>([NotNull] this Task<T> task) { return await task.ConfigureAwait(false); } public static async Task<TResult> Cast<TResult>([NotNull] this Task<object> task) { return (TResult) await task.ConfigureAwait(false); } 用途： Task<T1> task ... Task<T2> task2 = task.CastToObject().Cast<T2>(); 这是我的第二种方法，但不推荐： public static async Task<TResult> Cast<TSource, TResult>([NotNull] this Task<TSource> task, TResult dummy = default) { return (TResult)(object) await task.ConfigureAwait(false); } 用途： Task<T1> task ... Task<T2> task2 = task.Cast((T2) default); // Or Task<T2> task2 = task.Cast<T1, T2>(); 这是我的第三种方法，但是不推荐：（类似于第二种） public static async Task<TResult> Cast<TSource, TResult>([NotNull] this Task<TSource> task, Type<TResult> type = null) { return (TResult)(object) await task.ConfigureAwait(false); } // Dummy type class public class Type<T> { } public static class TypeExtension { public static Type<T> ToGeneric<T>(this T source) { return new Type<T>(); } } 用途： Task<T1> task ... Task<T2> task2 = task.Cast(typeof(T2).ToGeneric()); // Or Task<T2> task2 = task.Cast<T1, T2>(); 将 await 与动态/反射调用混合使用并不是一个好主意，因为 await 是一条编译器指令，它会围绕调用的方法生成大量代码，并且使用更多反射来“模拟”编译器工作并没有真正的意义，延续、包装等因为您需要的是在运行时管理代码，然后忘记在编译时工作的 asyc await 语法糖。重写 SomeFunction 和 SomeOtherFunction 而不使用它们，并在运行时创建的您自己的任务中开始操作。您将得到相同的行为，但代码非常清晰。

如何在<script id="template" type="text/ractive">中语法高亮HTML？

是否有任何 Vs Code 扩展可以在内部语法高亮 HTML？ <p>你好，世界！</p>

Shadow-cljs 需要反应选择

目前我需要使用 ["react-select" :default Select] 来创建组件： (def dropdown-standard (ra/adapt-react-class Select)) （这非常有效）我想访问...

Shadow-cljs 需要反应选择可创建组件

目前我需要使用 ["react-select" :default Select] 来创建组件： (def dropdown-standard (ra/adapt-react-class Select)) （这非常有效）我想访问...

如何让新的 Angular 17 项目运行？

全新安装 Nodejs (20.10.0) 和 Angular (17.0.8)。新项目（“ng new Default”），没有文件更改。 “ngserve”没有错误，但浏览器控制台显示： main.ts:5 错误

WinUI 3 C# - Microsoft.ui.xaml.dll 故障？

更新我的问题，顺便说一句，无论谁投了反对票，都可以提供建设性的评论。使用最新的 WinUI Template Studio 和 .net 8.0。应用程序设置.json “允许的主机”：...

如何解决使用厨师客户端版本 14.6.47 未安装 7zip 的错误

我遇到以下错误配方：7zip::default[0m amazon-ebs: * windows_zipfile[c:/dirname/] 操作解压缩亚马逊-ebs：[0米亚马逊-ebs：================================================ =======...

数组工厂 Laravel 上的随机选择值

我进行了用户迁移： $table->enum('type',['卖家','买家'])->default('卖家'); 我想在使用 ModelFactory 时如何获得随机值卖家或买家？ $factory->define(App\User::class,

在普通的 create-react-app --template typescript 文件夹中安装 eslint 失败

我正在尝试将 eslint 安装到从 TypeScript 模板创建的普通 create-react-app 文件夹中。我运行了以下命令： % npx create-react-app REDACTED --模板打字稿

prisma connectOrCreate 创建重复项或返回错误

我正在尝试在与另一个表具有多对多关系的表上播种一堆记录。模型简历{ id Int @id @default(自动增量()) 名称字符串

CSS Grid 使页面自动滚动

我一直在论坛上寻找解决这个问题的方法，我能找到的最接近的就是这个。但似乎没有解决办法。我有一个 CSS 网格，它是 grid-template-columns: Repeat(auto-fill,...

有没有办法在有条件的情况下隐藏v-data-table中的展开按钮？

借助 v-data-table 中的“show-expand”属性，展开按钮会显示在数据表的所有行中。借助 v-data-table 中的“show-expand”属性，展开按钮会显示在数据表的所有行中。 <v-data-table :expanded.sync="expanded1" :headers="headers1" :items="items" show-expand class="elevation-1" > 有没有办法根据 Vuetify 3 中的条件进行渲染？在 Vuetify 2 中，使用 item.data-table-expand 插槽来实现此目的。 <template #item.data-table-expand="{ item, expand, isExpanded }"> <td v-if="item?.versions?.length > 0" class="text-start"> <v-btn variant="text" density="comfortable" @click="expand(!isExpanded)" class="v-data-table__expand-icon" :class="{ 'v-data-table__expand-icon--active': isExpanded }" > <v-icon>mdi-chevron-down</v-icon> </v-btn> </td> </template> 但是，在 Vuetify 3 中使用相同的代码块会返回类型错误： Uncaught TypeError: expand is not a function expand 现在是 toggleExpand 并期望 internalItem 插槽道具 <template #item.data-table-expand="{ item, internalItem, toggleExpand, isExpanded }"> <td v-if="item?.versions?.length > 0" class="text-start"> <v-btn variant="text" density="comfortable" @click="toggleExpand(internalItem)" class="v-data-table__expand-icon" :class="{ 'v-data-table__expand-icon--active': isExpanded }" > <v-icon>mdi-chevron-down</v-icon> </v-btn> </td> </template>

如何将图像序列输入到卷积层并在之后应用 conv-lstm 单元？

我目前正在尝试实现以下论文：https://research.nvidia.com/sites/default/files/publications/dnn_denoise_author.pdf 我在调整网络方面遇到了麻烦，目前

带有 std::enable_if 的嵌套模板类，C++

我有一个模板类B，其第一个参数T1必须继承类A，第二个参数T2用于嵌套类C： A 类 { ... }; 模板我有一个模板类B，其第一个参数T1必须继承类A，第二个参数T2用于嵌套类C： class A { ... }; template<typename T1, typename T2 = T1, typename = std::enable_if_t<std::is_base_of<A, T1>::value>> class B { class C { T2 data; C(T2 data); void func(); ... }; ... }; 问题是当我尝试定义嵌套类的构造函数和方法时出现错误： template<typename T1, typename T2, typename> B<T1, T2>::C::C(T2 data) : data(data) { ... } template<typename T1, typename T2, typename> void B<T1, T2>::C::func() { ... } E0464“B::value, void>>::C”不是类模板； C3860 类类型名称后面的类型参数列表必须按照类型参数列表中使用的顺序列出参数。如果我不使用嵌套类或不使用 std::enable_if，代码可以正常工作，但在这里我需要它们，而且我真的不明白出了什么问题。定义构造函数时仍然需要提供默认的模板参数： template<typename T1, typename T2, typename D> B<T1, T2, D>::C::C(T2 data) : data(data) { } 或者，由于最后一个参数仅用于 SFINAE 目的并且始终旨在为 void，因此您可以编写： template<typename T1, typename T2> B<T1, T2, void>::C::C(T2 data) : data(data) { } 请注意，最好在 C 中定义构造函数。无论如何，大多数时候你都无法将模板拆分为标头/源代码，并且处理类模板的外线定义可能非常烦人且脆弱。 C++17 和 C++20 的注意事项如果您使用的是 C++20，您可以编写： template<std::derived_from<A> T1, typename T2 = T1> class B { /* ... */ }; template<std::derived_from<A> T1, typename T2> B<T1, T2>::C::C(T2 data) : data(data) { } 如果您使用的是 C++17，您至少可以使用辅助变量模板std::is_base_of_v<A, T1>。

添加plugin:@typescript-eslint/recommended-requiring-type-checking后，提示tsconfig中未包含该文件

我用 npx create-react-app my-app --template typescript 创建一个项目，然后我向其中添加打字稿类型检查，但我的 App.tsx 报告以下错误：解析错误：ESLint 已配置...

错误：链接需要在项目的 Expo 配置（app.config.js 或 app.json）中进行构建时设置 `scheme`

我使用react-native expo bare-workflow创建了该项目 npx create-expo-app --template bare-minimum 创建项目后，我尝试将expo-router安装到项目中，一切都完成了

(0 , core_1.default) 不是使用 @middy/core 的 lambda 处理程序上的函数

我正在尝试在我的 lambda 中间件上使用 middy，我的堆栈是使用 TypeScript 和 Serverless v3、Node.js v18 创建的。有一个最小生殖的例子： tsconfig.json： { “编译器操作...

Angular 材质选项卡 - 响应式选项卡更改

我在 mat-tab-group 中有两个选项卡：我在 mat-tab-group 中有两个选项卡： <mat-tab-group animationDuration="0ms" [disablePagination]="false" mat-stretch-tabs="false" mat-align-tabs="start" > <mat-tab label="First tab"> <ng-template matTabContent> <app-first-tab /> </ng-template> </mat-tab> <mat-tab label="Second tab"> <ng-template matTabContent> <app-second-tab /> </ng-template> </mat-tab> </mat-tab-group> 在第一个选项卡上，我生成了很多组件，因此需要一些时间才能完全渲染。当我选择第二个选项卡并返回第一个选项卡时，应用程序会冻结（几秒钟），直到所有内容都呈现出来。是否可以显示例如。标题（它的更多-更少的静态），一些微调器，当所有内容都渲染时，隐藏微调器？或者让用户以某种方式知道发生了什么事？示例：https://stackblitz.com/edit/stackblitz-starters-sb2saw ..仅用于测试目的。非常感谢。您遇到的问题有两个部分：您的异步请求的模拟实际上是使用同步函数（for循环），该函数在访问服务时正在运行。这不是标准 Observable 在野外的工作方式，也是选项卡之间漫长等待的根源。您可以利用容器和模板在加载异步变量时显示加载微调器。 HTML 示例： <ng-container *ngIf="data$ | async as data; else loading"> <table> <thead> <th>ID</th> <th>Code</th> <th>Buttons</th> </thead> <tbody> <tr *ngFor="let item of data"> <td>{{ item.id }}</td> <td>{{ item.code }}</td> <td> @for (idx of buttonCount; track idx; let index = $index) { <button>{{ idx }}</button> } </td> </tr> </tbody> </table> </ng-container> <ng-template #loading><mat-spinner></mat-spinner></ng-template> 更新了服务以更好地模拟异步数据（也可以作为 Observable 共享）： async fetchData(): Promise<ApiModel[]> { let result: ApiModel[] = []; for (let i = 1; i <= this.cnt; i++) { result.push({ id: i, code: `item_${i}` }); } return new Promise((resolve, reject) => { setTimeout(() => resolve(result), Math.random() * 5000); }); } 结果是立即交换选项卡，在加载数据时显示一个微调器图标： StackBlitz 叉子链接

使用“Vitest，@nuxt/test-utils”的单元测试错误（语法错误：每个文件组件至少需要一个 <template> 或 <script>。）

目标：我想通过 Vuetify 组件中的 useFetch 测试 API。错误发生：为了实现这个目标，我使用了“@nuxt/test-utils/runtime”。但是，我在日志中遇到了错误。给我...

禁用按钮时的角度显示工具提示

<button [disabled]="(!dataConceptSummmaryFlag || dataConceptSummmaryFlag === false) && (!selectedLOBFlag || selectedLOBFlag === false) && (!adsListFlag || adsListFlag === false)" class="lmn-btn lmn-btn-primary" aria-label="Update" (click)="updateSelectedScopes()" [mtTooltip]="disabledContent" > Update </button> <ng-container *ngIf="(!dataConceptSummmaryFlag || dataConceptSummmaryFlag === false) && (!selectedLOBFlag || selectedLOBFlag === false) && (!adsListFlag || adsListFlag === false)"> <ng-template #disabledContent>No New Scopes Values Selected</ng-template> </ng-container> 如果在该条件下禁用按钮，如何在悬停时显示工具提示文本，并且当我将鼠标悬停在其上时，我会看到红色关闭图标。这是我尝试过的，但没有成功将此添加到覆盖材质样式的文件中： // this workaround allows for the tooltips to appear on disabled buttons (since mouse events aren't fired for them) button:disabled.mat-mdc-tooltip-trigger { pointer-events: auto !important; // remove the ripple effect on hover > span:first-child { display: none; } } 悬停时它将显示没有波纹背景的工具提示。

在 Angular 中打开模态时出现ExpressionChangedAfterItHasBeenCheckedError

` `<ngx-datatable-column *ngIf="search_type ==='booking'" [width]="50" [sortable]="false" [canAutoResize]="false" [draggable]="false" [resizeable]="false"> <ng-template ngx-datatable-cell-template let-row="row" let-value="value"> <span class="fa fa-user-plus font-medium-3 text-primary cursor-pointer pl-1" (click)="onUpdateBookingLinguist(row)"></span> </ng-template> </ngx-datatable-column>` 上面是我的html代码，下面是我的ts代码 ` onUpdateBookingLinguist(linguist: Linguist) { const modalRef = this.modalService.open(ScheduledBookingModalComponent, { size: 'lg' }); modalRef.componentInstance.linguist_other_bookings = linguist['scheduled_booking']; modalRef.result.then((result) => { if (!result) { return; } this.cdr.detectChanges(); }).catch((e) => { }); this.cdr.detectChanges(); }` 我试图从 ngx-datatable-column 打开模式，但收到此错误错误错误：NG0100：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。上一个值：“datatable-body-cell sort-active active”。当前值：'datatable-body-cell sort-active'.. 欲了解更多信息，请访问 https://angular.io/errors/NG0100 我尝试使用 ChangeDetectorRef.detectChanges() 手动触发更改检测，但仍然收到错误。当您修改 Angular 在其更改检测周期期间也尝试检查或更新的属性时，通常会出现此错误。因此您可以使用 ChangeDetectorRef 在特定情况下手动触发更改检测。通过从 ChangeDetectorRef 调用 detectorChanges()，您可以手动指示 Angular 对该组件及其子组件重新运行更改检测，从而可能解决问题这是如何在组件中使用ChangeDetectorRef 的示例构造函数（私有 cdr：ChangeDetectorRef）{} ngAfterContentChecked() { this.cdr.detectChanges(); }

将 4 个 div 级联排列为 4 列

我需要排列 4 个层叠的 div，看起来像是 4 列。这是我的html结构（我无法修改它） 1111 我需要排列 4 个层叠的 div，看起来像是 4 列。这是我的html结构（我无法修改它） <div class="col1"> 1111 <div class="col2"> 2222 <div class="col3"> 3333 <div class="col4"> 4444 </div> </div> </div> </div> 我需要它在使用时看起来像： display: grid; grid-template-columns: repeat(4, minmax(200px, 1fr)); 我也尝试过 grid-template-areas 但没有达到预期的结果。好的，所以您需要容器是网格容器，然后元素都属于相同的子级别（即它们都需要属于相同的子元素）。因此你需要重构你的 html 来解决这个问题。这里有一个有用的链接，可以帮助您快速了解如何使用 css 网格。话虽如此，这里有一个 html/css 示例演示了您想要实现的目标。希望这可以帮助您有一个良好的开端。请注意，此示例使用您的值，并将强制每列至少为 200 像素（您显然可以根据您的用例进行更改）。 .grid-container{ display: grid; grid-template-columns: repeat(4, minmax(200px, 1fr)); } <div class="grid-container"> <div class="col1"> 1111 </div> <div class="col2"> 2222 </div> <div class="col3"> 3333 </div> <div class="col4"> 4444 </div> </div>

使用部分进行主动拆解/重新渲染不会重新渲染部分

这是小提琴（对警报感到抱歉）http://jsfiddle.net/PCcqJ/92/ var ractive = new Ractive({ 模板：'#templateOne'，部分：{ aPartial：'哦，看，partia... 这是小提琴（抱歉有警报）http://jsfiddle.net/PCcqJ/92/ var ractive = new Ractive({ template: '#templateOne', partials: { aPartial: '<div>Oh look, the partial is rendered!</div>' } }); function cb() { alert('but now we unrender'); ractive.once('complete', function() { alert('we rendered again, and now you can\'t see the partial content'); }); ractive.render('container'); } ractive.render('container'); ractive.once('complete', function() { alert('so we render the first time, and you can see the partial'); ractive.unrender().then(cb); }); 此处的部分不会重新渲染。为什么是这样？部分仍在部分对象中，并且它们尚未渲染，那么什么会阻止它们再次渲染？这个小提琴会渲染、取消渲染，然后重新渲染，每次发生其中一种情况时都会向您发出警报。我做了一个工作jsfiddle：https://jsfiddle.net/43gLqbku/1/ <div id='container'></div> <script id="templateOne" type="x-template"> {{>aPartial}} </script> var ractive = new Ractive({ el:"#container", template: '#templateOne', partials: { aPartial: '<div>Oh look, the partial is rendered!</div>' } }); function cb() { alert('but now we unrender'); ractive.once('complete', function() { alert('we rendered again, and now you can\'t see the partial content'); }); ractive.render('container'); } //ractive.partials.part = '<div>this is a partial</div>'; ractive.once('complete', function() { alert('so we render the first time, and you can see the partial'); ractive.unrender().then(cb); }); 在调用render之前需要调用ractive.once('completed') 你不需要 ractive.render("container");在活动代码下，因为它在第一次运行时自动呈现在你的jsfiddle中你导入的ractive不起作用你没有在 jsFiddle 活动代码中包含 el:"#container"

如何在VUE中使用参数访问v-model值

我想使用参数访问 v-model 值，我尝试下面的代码我想使用参数访问 v-model 值，我尝试下面的代码 <template> <div v-for="(item, idx) in data"> <input :id="item" :v-model="item"></input> <button @click="submitTest(item)"> testbtn </button> </div> </template> <script setup> var data = {'test1': 'val1', 'test2': 'val2'} function submitTest(itemParam){ alert(itemParam.value) } </script> 实际上在submitTest函数（警报行）中，它不访问输入标签v-model，而是访问itemParam（字符串值本身）值。我想要的是使用由项目参数传递的参数访问输入“项目值”。我尝试了上面的代码，结果，它实际上访问了“itemParam”字符串值本身，而不是传递参数。在Vue.js中，您应该使用v-model进行双向数据绑定。 v-model 指令是绑定数据以形成输入并更新用户输入数据的便捷简写。但是，它不能直接用作 prop 或作为参数传递。相反，您可以传递整个对象并在方法中使用它。以下是修改代码的方法： <template> <div v-for="(item, idx) in data" :key="idx"> <input :id="item" v-model="item.value"></input> <button @click="submitTest(item)">testbtn</button> </div> </template> <script setup> const data = ref([ { id: 'input1', value: '' }, { id: 'input2', value: '' }, // ... other items ]); function submitTest(item) { alert(item.value); } </script> 在此示例中，数据数组中的每个项目都是一个具有 id 和 value 属性的对象。 v-model 指令绑定到 item.value。当您单击按钮时，将使用整个项目对象调用 SubmitTest 函数，您可以从那里访问 value 属性。确保在设置脚本中使用 ref 创建对数据数组的反应性引用。注意： :key="idx" 添加到中，为循环中的每个项目提供唯一的键。这有助于 Vue.js 在数组更改时高效更新和重新渲染组件。

角度 *ngIf; else 在异步上，当未定义是来自 Observable 的有效值时

我正在尝试使用 *ngIf; else 上的可观察对象可以发出未定义的信号。这是我所拥有的我正在尝试使用 *ngIf; else 上的可观察对象可以发出未定义的信号。这是我有的 <span *ngIf="(content$ | async) as content; else loading"> <span *ngIf="content != undefined; else notFound"> // show content </span> </span> 问题在于，如果observable的值未定义，页面会一直显示#loading，并且不会切换到#notFound 有没有办法接受 undefined（可以改为 null）作为有效的输出值，并让 UI 在不同阶段显示相应的部分？因为 Boolean(undefined) 的计算结果为 false，内部条件 content !== undefined 始终为 true 并且 notFound 永远不会加载。您将需要更改您的应用程序逻辑。处理此类场景的最简单方法似乎是使用 ngrxLet ： <ng-container *ngrxLet="content$ as content; suspenseTpl: loading"> <span *ngIf="!content"> <h2>Not found!</h2> </span> <span *ngIf="content"> {{ content }} </span> </ng-container> <ng-template #loading> Loading... </ng-template>

如果类型是从变量进行数据绑定，则通过 <object> 标签在 Angular 中显示 pdf 无法在 Chrome 中工作

我正在尝试通过标签在 Chrome 中显示 pdf。如果我手动编写类型，它会起作用：不工作但是... 我正在尝试通过 <object> 标签在 Chrome 中显示 pdf。如果我手动写 type: 就可以了 <object [data]="getUrl(true)" type="application/pdf"> Not working </object> 但如果我从变量读取类型则不会： <object [data]="getUrl(true)" [type]="file.mimeType"> Not working </object> 为什么？这是一些非常奇怪的错误，还是我做错了什么可怕的事情。这里是plunkr。它可以在 Firefox 中运行（所有 4 个对象都会显示），但不能在 Chrome 中运行 (Version 74.0.3729.169 (Official Build) (64-bit))：我遇到了同样的问题，但我不明白原因。就我而言，我决定在基于 Blink 引擎的浏览器中使用“embed”元素而不是“object”元素。 <ng-template #blinkPlatformViewer> <embed [src]="getUrl(true)" [type]="file.mimeType"/> </ng-template> <object *ngIf="!isBlinkPlatform; else blinkPlatformViewer" [data]="getUrl(true)" [type]="file.mimeType"> Not working </object> import { Platform } from '@angular/cdk/platform'; import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; export class FileContentComponent { constructor(private readonly sanitizer: DomSanitizer, private readonly platform: Platform) { } get isBlinkPlatform(): boolean { return this.platform.BLINK; } }

VueJS [电子邮件受保护] 组件 v-model 最初不会更新父级

我有一个父子组件设置来测试 v-model。当您输入值时，子级会更新父级，但最初不会。家长：从“vue”导入{ref}；导入文本输入...</desc> <question vote="0"> <p>我有一个父子组件设置来测试 v-model。当您输入值时，子级会更新父级，但最初不会。</p> <p>家长：</p> <pre><code><script setup> import { ref } from 'vue'; import TextInput from './TextInput.vue'; const size = ref(1); const color = ref('red'); </script> <template> <TextInput v-model:size="size" v-model:color.capitalize="color" /> <div :style="{ fontSize: size + 'em', color: color }">  <p>{{ size }} {{ color }}</p> </div> </template> </code></pre> <p>子：TextInput.vue</p> <pre><code><script setup> import { ref } from 'vue'; const size = defineModel('size'); const [color, modifier] = defineModel('color', { set(value) { if(modifier.capitalize) { return value.charAt(0).toUpperCase() + value.slice(1); } return value; }, //only this forces color to upper case on start in the input get(value) { if(modifier.capitalize) { return value.charAt(0).toUpperCase() + value.slice(1); } return value; } }); </script> <template> <input v-model="size"> <input v-model="color"> </template> </code></pre> <p>问题2：如果我在defineModel中省略“color”（“color”，{...，我会收到以下错误</p> <p>[Vue warn]：无关的非 props 属性（颜色、colorModifiers）被传递给组件但无法自动继承，因为组件渲染片段或文本根节点。</p> <pre><code>at <TextInput size=1 onUpdate:size=fn color="red" ... > at <ComponentVModel> at <App> </code></pre> <p>如果我只保留</p> <pre><code><input v-model="color"> </code></pre> <p>line，为了让它不是片段，根本不更新。</p> </question> <answer tick="false" vote="0"> <p>问题 1：在调用子元素中的 v-model setter 之前，<pre><code><p></code></pre> 元素中的大写不会发生。 <strong>设置器是同步回父级的设置器</strong>。由于在输入接收到来自用户的一些文本之前不会调用设置器，因此父级中的 <pre><code><p></code></pre> 元素将显示初始值，在您的情况下为“红色”。</p> <p>问题 2：defineModel 根据第一个参数字符串“color”声明一个 prop。该道具旨在匹配父级<strong>上的</strong>v模型的参数，即<pre><code>v-model:color</code></pre>。从defineModel中删除“颜色”意味着父v模型必须从<pre><code>v-model:color</code></pre>更改为<pre><code>v-model</code></pre></p> </answer> </body></html>

Tiptap Lib。如何为 EditorContent 添加边框？

我很难编辑编辑器部分样式我在 Recat 中使用 https://tiptap.dev/docs/editor/ Lib 现在我用这个渲染编辑器我很难编辑编辑器部分样式我正在使用 https://tiptap.dev/docs/editor/ Recat 中的 Lib 现在我用这个渲染编辑器 <EditorContent className='editor' editor={props.editor}/> 我的CSS .editor p{ margin: 1em 0; /* border: 1px solid #000; */ /* border-radius: 2px; */ } 未点击文本框时的结果单击文本框时的结果我想为此自定义 css 样式。有这方面的文档吗？ Tiptap，Vue.js 的富文本编辑器框架。要向 EditorContent 组件添加边框，您可以使用 CSS 自定义样式。但是，请记住，Tiptap 不提供开箱即用的编辑器内容的直接样式，因此您必须将样式应用于 Tiptap 生成的 HTML 元素。🔥 以下是如何向 EditorContent 添加边框的示例： <template> <EditorContent :editor="editor" class="custom-editor-content" /> </template> <style scoped> /* Add your custom styles for the editor content */ .custom-editor-content { border: 1px solid #000; border-radius: 2px; padding: 10px; /* Optional: Add some padding for better aesthetics */ } /* Customize other elements as needed */ .custom-editor-content p { margin: 1em 0; } </style> 在此示例中，custom-editor-content 类应用于 EditorContent 组件，并且标记内的 CSS 规则的范围将仅影响该组件内的元素。🌟 🟢🟡🟣 您可以探索 Tiptap 文档： https://tiptap.dev/docs/editor/guide/styling

我无法用vue.js显示json

我需要使用 v-for 显示 json 中的产品数组，但我无法这样做。我正在尝试显示产品数组中的 json 数据，但它不起作用。 Vue.js 我需要使用 v-for 显示 json 中的产品数组，但我无法这样做。我正在尝试显示产品数组中的 json 数据，但它不起作用。 Vue.js <div class="box" v-for="product in products" :key="product.id"> <h2>Produto {{ product.name }}</h2> <h3>Situação {{ product.situation }}</h3> </div> export default { data() { return { products: [], }; }, methods: { async getData() { try { const req = await fetch("http://localhost:3000/products"); const data = await req.json(); this.products = data.products; console.log("data" + data); } catch (error) { console.error("Error fetching data:", error); } }, mounted() { this.getData(); }, }, }; JSON： { "products": [ { "id": "a898", "name": "Claudio Romano", "situation": "Ativo" } ] } 您问错了问题，因为该问题与 JSON 无关。如果您对此进行调试，您会注意到 console.logs 不执行，这意味着问题更为根本，因为该方法本身并未实际运行。根本问题是mounted()不应该在methods内部。您正在使用 Vue 的选项 API，其中 data()、methods 和 mounted 都是独立的、单独的“选项”。您需要将安装移动到方法之外，它应该是一个“兄弟”选项。 export default { data() { ... }, methods: { ... }, mounted() { this.getData(); }, }; 游乐场演示

Velocity 在 Spring Boot 中找不到模板资源

我使用 Velocity 模板引擎在我的 Spring boot 应用程序中使用电子邮件模板发送电子邮件实用程序。当前的代码如下所示。 pom.xml：我正在使用 Velocity 模板引擎在我的 Spring boot 应用程序中使用电子邮件模板发送电子邮件实用程序。当前代码如下所示。 pom.xml： <dependency> <groupId>org.apache.velocity</groupId> <artifactId>velocity</artifactId> <version>1.7</version> </dependency> <dependency> <groupId>org.apache.velocity</groupId> <artifactId>velocity-tools</artifactId> <version>2.0</version> </dependency> 速度引擎 bean 配置： @Configuration public class VelocityConfig { @Bean public VelocityEngine velocityEngine() { VelocityEngine ve = new VelocityEngine(); ve.setProperty(RuntimeConstants.RESOURCE_LOADER, "classpath"); ve.setProperty("classpath.resource.loader.class", ClasspathResourceLoader.class.getName()); ve.init(); return ve; } } 电子邮件模板放置在 src/main/resources/email-templates/summary-email.vm <!DOCTYPE html> <head> <title>Summary</title> </head> <body> <h1>Claims Summary</h1> </body> </html> 放置在以下目录中： src ├── main │ ├── java │ │ └── com │ │ └── packageNameioot │ │ └── SpringBootApplication.java │ ├── resources │ │ ├── email-templates │ │ │ └── summary-email.vm │ │ └── application.properties 使用模板发送电子邮件的服务类： @Slf4j @Service @RequiredArgsConstructor public class EmailSummaryService { private final EmailConnector connector; private final VelocityEngine velocityEngine; public Mono<Void> sendFinanceClaimsRunEmailSummary(FinancePeriodRunEntity periodRunEntity, int successCount, int errorCount) { EmailDto emailDto = EmailDto.builder() .recipients(Set.of("[email protected]")) .subject("Claims summary") .body(createEmailBody()) .html(true) .build(); return connector.submitEmailRequest(emailDto); } private String createEmailBody() { VelocityContext context = new VelocityContext(); Template template = velocityEngine.getTemplate("email-templates/summary-email.vm"); StringWriter writer = new StringWriter(); template.merge(context, writer); return writer.toString(); } } 但是Velocity无法定位模板，出现以下错误。 ERROR velocity:96 - ResourceManager : unable to find resource 'email-templates/summary-email.vm' in any resource loader. org.apache.velocity.exception.ResourceNotFoundException: Unable to find resource 'email-templates/summary-email.vm' 属性应该这样设置： VelocityEngine ve = new VelocityEngine(); ve.setProperty(RuntimeConstants.RESOURCE_LOADER, "classpath"); ve.setProperty("resource.loader.classpath.class", ClasspathResourceLoader.class.getName()); 根据 Apache Velocity Engine 文档。

如何控制列表元素抛出键盘事件

https://stackblitz.com/edit/react-o1ra7c 用户搜索结果后，用户尝试使用键盘事件箭头需要向下移动。 https://stackblitz.com/edit/react-o1ra7c 用户搜索结果后，用户尝试使用键盘事件箭头需要向下移动。 <div> <input onChange={handleSearchChange}/> <div css={countryDataCss}> {countryList?.map((country) => ( <div key={country.countryCode}> <span css={countryCss}>{country.countryName}</span> <span css={countryDialCodeCss}> {country.countryDialNo} </span> </div> ))} </div> </div> 您可以使用 javascirpt 事件 onkeydown，对于 React 来说是 onKeyDown，它提供了所需的行为，请检查下面的 stackblitz！ import React from 'react'; import './style.css'; import { useState } from 'react'; export default function App() { const [searchText, setSearchText] = useState(''); const [selectedCountry, setSelectedCountry] = useState('SG'); const [activeIndex, setActiveIndex] = useState(0); const [selectedDialCode, setSelectedDialCode] = useState('+65'); const countryCodeListResponse = [ { countryCode: 'IND', countryDialNo: '+91', countryName: 'India' }, { countryCode: 'SG', countryDialNo: '+65', countryName: 'Singpare' }, ]; const [countryList, setCountryList] = useState(countryCodeListResponse); function handleSearchChange(e) { const searchText = e.target.value.toLowerCase(); if (countryCodeListResponse) { const updatedList = countryCodeListResponse .filter((el) => el.countryName.toLowerCase().includes(searchText)) .sort( (a, b) => a.countryName.toLowerCase().indexOf(searchText) - b.countryName.toLowerCase().indexOf(searchText) ); setSearchText(searchText); setCountryList(updatedList); } } const onSelectCountry = (code, dialCode) => { setSelectedCountry(code); setSelectedDialCode(dialCode); setSearchText(''); setCountryList(countryCodeListResponse); }; const onKeyDown = (event) => { console.log(event); switch (event.keyCode) { case 38: // arrow up if (activeIndex > 0 && activeIndex <= countryList.length - 1) { setActiveIndex((prev) => prev - 1); } break; case 40: // arrow down if (activeIndex >= 0 && activeIndex < countryList.length - 1) { setActiveIndex((prev) => prev + 1); } break; case 13: const country = countryList[activeIndex]; onSelectCountry(country.countryCode, country.countryDialNo); break; default: break; } }; return ( <div class="dropdown"> <div class="search"> <div> <span>{selectedCountry}</span> <span>{selectedDialCode}</span> </div> <input class="search-input" onKeyDown={(e) => onKeyDown(e)} placeholder="Search" value={searchText} onChange={handleSearchChange} /> </div> <div class="list"> {countryList?.map((country, index) => ( <div onKeyDown={(e) => onKeyDown(e)} className={index === activeIndex ? 'active' : ''} tabIndex="0" key={country.countryCode} onClick={() => onSelectCountry(country.countryCode, country.countryDialNo) } > <span>{country.countryName}</span> <span>{country.countryDialNo}</span> </div> ))} </div> </div> ); } 堆栈闪电战

无法访问派生模板类中模板基类的成员[重复]

我有一个模板基类。可以说。模板类基类 { 私人的： int成员1；字符成员2； .... }; 我从上面的类派生了另一个类。模板我有一个模板基类。可以说。 template<class KeyF> class Base { private: int member1; char member2; .... }; 我从上面的类派生了另一个类。 template<class KeyF> class Derived : public Base<KeyF> { public: void func1() { <accessing member1/member2> } .... }; 上面的代码不能在 gcc 中编译。说明 member1 不是 Derived 的成员。但它已经从基类派生了，那为什么它不能访问它的成员呢？您需要在基本成员名称前添加 this-> 或 Base<KeyF>:: 前缀，或者向类添加 using 声明以取消隐藏它们。他们的名字是从属名称，并且是隐藏的。 Base中的成员是private。您无法在本课程之外访问课程的 private members（friend 除外）。让它们 protected，或者让 protected getters。您尝试过受保护吗？自从我深入 C++ 以来已经有一段时间了... 我认为解决这个问题需要两个改变：在基类中，将成员定义为“受保护”而不是“私有”，以便在派生类中可访问。在派生类中，在受保护成员前面添加基类名称。在这种情况下，它应该看起来像“Base::member1”。在我的例子中使用 C++17 标准，问题得到了解决。希望这有帮助。感谢 Kerrek SB 提供的信息。

Pinia 对象在 Vue 中的 foreach 后失去反应性

我有这个嵌套的foreach BalanceItemList.vue ... 我有这个嵌套的 foreach BalanceItemList.vue <template> <div v-for="category in categoryItemsStore.balanceCategories" :key="category.id" class="mt-5"> <div class="border-black border-b bg-gray-200"> <span class="font-bold w-full">{{ category.name }}</span> </div> <div v-for="balanceItem in category.balance_items" :key="balanceItem.id"> {{ balanceItem.total = 500 }} <balance-item :balance-item="balanceItem" @update-balance-item="update"/> </div> <div> <balance-item-create :category="category.id" @create-balance-item="update"/> </div> <div v-if="categoryItemsStore.totals[category.id]" class="grid grid-cols-4-b t-2 ml-2"> <div :class="category.is_positive ? '': 'text-red-600' " class="col-start-4 border-t-2 border-black font-bold"> €{{ categoryItemsStore.totals[category.id].total }} </div> </div> </div> </template> 我像这样检查了“balanceItem”的反应性 {{ balanceItem.total = 500 }} 它在商店中更新，但随后我有了我的平衡项目组件： BalanceItem.vue <script setup> import {reactive} from "vue"; import {useForm} from "@inertiajs/vue3"; import NumberInput from "@/Components/NumberInput.vue"; import {UseCategoryItemsStore} from "@/Stores/UseCategoryItemsStore.js"; const categoryItemStore = UseCategoryItemsStore() const props = defineProps({balanceItem: Object, errors: Object}) let item = reactive(props.balanceItem); const form = useForm(item); const emit = defineEmits(['update-balance-item']) const submit = () => { form.post(route('balance-item.update'), { preserveScroll: true, onSuccess: () => { props.balanceItem.total = 500 categoryItemStore.updateBalanceItemsTotals(form) emit('update-balance-item') } }) } </script> <template> <form @submit.prevent="submit"> <div class="grid grid-cols-4-b"> <span>{{ item.name }}</span> <NumberInput v-model="form.count" autofocus class=" mr-4 mt-1 block" type="number" @update:model-value="submit" /> <div :class="item.item_category.is_positive ? '' : 'text-red-600'" class="flex place-items-center"> <div class="pt-1 mr-1">€</div> <NumberInput v-model="form.amount" :class="form.errors.amount ? 'border-red-600' : ''" autofocus class="mt-1 mr-4 w-5/6" type="text" @update:model-value="submit" /> </div> <div :class="item.item_category.is_positive ? '' : 'text-red-600'" class="flex place-items-center"> <div class="pt-1 mr-1 w-5/6">€</div> <NumberInput v-model="form.total" autofocus class="mt-1 block" disabled style="max-width: 95%" type="text" /> </div> </div> </form> </template> 这是我测试反应性的商店。如果我增加输入的数字，则项目的计数保持不变 UseCategoryItemsStore.js import {defineStore} from "pinia"; import {ref} from "vue"; export const UseCategoryItemsStore = defineStore('UseCategoryItemsStore', () => { const balanceCategories = ref([]) const totals = ref([]) function getBalanceItems() { axios.get(route('balance-item.index')).then((response) => { balanceCategories.value = response.data // console.log(balanceCategories.value) }) } function getTotals() { axios.get(route('balance-item.totals')).then((response) => totals.value = response.data) } function getData() { getTotals() getBalanceItems() } function updateBalanceItemsTotals(selectedItem) { balanceCategories.value.forEach((category) => { category.balance_items.forEach((item) => { if (item.id === selectedItem.id) { // item.total = item.count * item.amount console.log(item) } }) }) } getTotals() getBalanceItems() return {balanceCategories, totals, getBalanceItems, getTotals, getData, updateBalanceItemsTotals} }) 在此测试中，我执行“props.balanceItem.total = 500”。但如果我检查商店，它不会更新。看来将“balanceItem”分配给一个道具会失去与我的 Pinia 商店的反应性。我可以使用“form.total = form.count * form.amount”手动更新我的表单，但这对我来说似乎很老套，我想使用 Pinia 商店的反应性。我考虑过根据“BalanceItem”获取 Pina 项目，但这似乎也很棘手。谁知道为什么失去反应性？我有laravel 10.39、vue3.2.41和pinia 2.1.17惯性0.6.11。到目前为止我知道的所有最新版本。我像这样更新我的表格和商店： <script setup> import {useForm} from "@inertiajs/vue3"; import NumberInput from "@/Components/NumberInput.vue"; import {UseCategoryItemsStore} from "@/Stores/UseCategoryItemsStore.js"; const categoryItemStore = UseCategoryItemsStore() const props = defineProps({balanceItem: Object, errors: Object}) let item = categoryItemStore.getItemById(props.balanceItem); let form = useForm(item); const emit = defineEmits(['update-balance-item']) const submit = () => { form.post(route('balance-item.update'), { preserveScroll: true, onSuccess: () => { item = categoryItemStore.updateItem(form) form = useForm(item) emit('update-balance-item') } }) } </script> 我将此功能添加到我的商店： import {defineStore} from "pinia"; import {ref} from "vue"; export const UseCategoryItemsStore = defineStore('UseCategoryItemsStore', () => { const balanceCategories = ref([]) const totals = ref([]) function getBalanceItems() { axios.get(route('balance-item.index')).then((response) => { balanceCategories.value = response.data // console.log(balanceCategories.value) }) } function getItemById(item) { let category = balanceCategories.value.find((category) => { return category.id === item.item_category_id }) return category.balance_items.find((item_from_store) => { return item_from_store.id === item.id }) } function updateItem(form) { const item = getItemById(form) item.count = form.count item.amount = form.amount item.total = item.count * item.amount return item } function getTotals() { axios.get(route('balance-item.totals')).then((response) => totals.value = response.data) } function getData() { getTotals() getBalanceItems() } getTotals() getBalanceItems() return {balanceCategories, totals, getBalanceItems, getTotals, getData, getItemById, updateItem} }) 假设如果帖子获得 200，我的表单值可用于更新商店和更新表单。这是我能想到的最好的

React中react-router-dom最新版本如何实现延迟加载

我想使用Typescript在React中实现延迟加载。我收到打字稿错误。常量应用程序 = () => { 返回（我想使用 Typescript 在 React 中实现延迟加载。我收到打字稿错误。 const App = () => { return ( <RouterProvider router={createBrowserRouter( createRoutesFromElements( <Route> <Route path="/" element={<Outlet/>}> <Route index element={<Home />} /> <Route path="contact" element={<Contact />} /> <Route path="about" element={<About />} /> <Route path="*" element={<Navigate to="/" replace />} /> </Route> </Route> ) )} /> ) }; export default App; 下面的代码不起作用 <Route> <Route path="/" element={<Outlet/>}> <Route index lazy={() => import("./Home")} /> <Route path="contact" lazy={() => import("./Contact")} /> <Route path="about" lazy={() => import("./About")} /> <Route path="*" element={<Navigate to="/" replace />} /> </Route> </Route> const Home= lazy(() => import("./screens/home")); const About= lazy(() => import("./screens/about")); <Route> <Route path="/" element={<Outlet/>}> <Route index element={<Suspense fallback={<div>Loading...</div>}> <Home/> </Suspense> /> } /> <Route path="about" element={<Suspense fallback={<div>Loading...</div>}> <About/> </Suspense> /> } /> <Route path="*" element={<Navigate to="/" replace />} /> </Route> </Route>

汇编和模板类

我正在开发一个小项目，并尝试将一些硬编码值用于内联汇编。为此，我使用模板。我创建了一个代码片段来显示我所看到的 #包括我正在开发一个小项目，并尝试将一些硬编码值用于内联汇编。为此，我使用模板。我创建了一个代码片段来显示我所看到的 #include <iostream> template <size_t T> struct MyClass { size_t myValue = T; void doSomething() { size_t value = T; __asm { mov eax, [T] mov [value], eax } std::cout << value << std::endl; } }; int main() { auto o = new MyClass<999>(); o->doSomething(); return 0; } 事实证明，对于汇编代码，它试图使用数据段而不是“直接将数字粘贴到那里” ; 25 : { push ebp mov ebp, esp push ecx ; 26 : auto o = new MyClass<999>(); push 4 call ??2@YAPAXI@Z ; operator new add esp, 4 ; 14 : size_t value = T; mov DWORD PTR _value$2[ebp], 999 ; 000003e7H ; 26 : auto o = new MyClass<999>(); mov DWORD PTR [eax], 0 mov DWORD PTR [eax], 999 ; 000003e7H ; 15 : __asm ; 16 : { ; 17 : mov eax, [T] mov eax, DWORD PTR ds:0 ; 18 : mov [value], eax mov DWORD PTR _value$2[ebp], eax ; 19 : } ; 20 : std::cout << value << std::endl; 我正在使用 Visual Studio 2015。还有其他方法可以实现此目的吗？啊，多么可爱又扭曲的问题啊！我尝试使用 T 初始化 constexpr 变量。结果是相同的 - 从内存加载值。宏可用于将文字传递给内联汇编，但它们与模板不能很好地混合。使用 T 在类中初始化枚举在理论上应该可行（https://msdn.microsoft.com/en-us/library/ydwz5zc6.aspx提到枚举可以在内联汇编中使用），但是在内联汇编使 Visual Studio 2015 编译器崩溃:-)。似乎有效的是一个函数模板，它使用模板参数声明一个枚举，然后在内联程序集中使用该枚举。如果必须将其放在模板类中，则可以在类中实例化模板函数，如下所示： #include <iostream> template <size_t T> void dosomething() { enum { LOCALENUM = T }; size_t value = 0; __asm { mov eax, LOCALENUM mov[value], eax } std::cout << value << std::endl; } template <size_t T> struct MyClass { size_t myValue = T; void doSomething() { ::dosomething<T>(); } }; int main() { //dosomething<999>(); auto o = new MyClass<999>(); o->doSomething(); return 0; } 这会产生以下汇编代码： auto o = new MyClass<999>(); 001B1015 mov dword ptr [eax],0 001B101B mov dword ptr [eax],3E7h o->doSomething(); 001B1021 mov eax,3E7h <--- Victory! 001B1026 mov dword ptr [ebp-4],eax 001B1029 mov ecx,dword ptr [_imp_?cout@std@@3V?$basic_ostream@DU?$char_traits@D@std@@@1@A (01B2048h)] 001B102F push offset std::endl<char,std::char_traits<char> > (01B1050h) 001B1034 push dword ptr [ebp-4] 001B1037 call dword ptr [__imp_std::basic_ostream<char,std::char_traits<char> >::operator<< (01B2044h)]

将属性值从父级用户控件传递到子级的 DependencyProperty

如何将属性（SomeProperty）从ParentUserControl上下文传递到ChildUserControl的DependencyProperty（MyDProperty）？在 XAML 中，它应该是：如何将 ParentUserControl 上下文中的 property (SomeProperty) 传递到 ChildUserControl 的 DependencyProperty (MyDProperty)？在XAML中，应该是：但是，由于某种原因，MyDProperty 永远不会使用 Parent.DataContext.SomeProperty 设置。就我而言，我正在传递一个操作，但这并不重要。我认为问题出在绑定上。家长用户控制： public Action RemoveEsl1 => throw new NotImplementedException(); <uc:ChildUserControl Title="ESL 1" RemoveEslAction="{Binding RemoveEsl1}" DataContext="{Binding Esl1}"/> 子用户控件： public static readonly DependencyProperty RemoveEslActionProperty = DependencyProperty.Register(nameof(RemoveEslAction), typeof(Action), typeof(ChildUserControl), new PropertyMetadata(delegate { })); public Action RemoveEslAction { get => (Action)GetValue(RemoveEslActionProperty); set => SetValue(RemoveEslActionProperty, value); } 我在这里找到了各种技巧，但没有一个适合我或有效。回答我自己的问题（检查 ParentUserControl）：型号： public class RootModel : ViewModelBase { private ParentModel parentModel = new(); public ParentModel ParentModel { get => parentModel; set => RisePropertyChanged(ref parentModel, value); } } public class ParentModel : ViewModelBase { private ChildModel childModel = new(); public ChildModel ChildModel { get => childModel; set => RisePropertyChanged(ref childModel, value); } public string ParentModelProperty => "Correct value from ParentModel"; } public class ChildModel : ViewModelBase { private string childModelProperty = "Wrong default value from ChildModel"; public string ChildModelProperty { get => childModelProperty; set => RisePropertyChanged(ref childModelProperty, value); } } 主窗口: <Window.DataContext> <model:RootModel/> </Window.DataContext> <uc:ParentUserControl DataContext="{Binding ParentModel}"/> 家长用户控件： <uc:ChildUserControl ChildDependency="{Binding DataContext.ParentModelProperty, RelativeSource={RelativeSource AncestorType=UserControl}}" DataContext="{Binding ChildModel}"/> 子用户控件： <StackPanel> <Label Content="Dependency property:"/> <Label Content="{Binding ChildDependency, RelativeSource={RelativeSource AncestorType=UserControl}}"/> <Separator/> <Label Content="Property:"/> <Label Content="{Binding ChildModelProperty}"/> </StackPanel> public partial class ChildUserControl : UserControl { public static readonly DependencyProperty ChildDependencyProperty = DependencyProperty.Register(nameof(ChildDependency), typeof(string), typeof(ChildUserControl), new ("Wrong default DP value from ChildUserControl")); public string ChildDependency { get => (string)GetValue(ChildDependencyProperty); set => SetValue(ChildDependencyProperty, value); } public ChildUserControl() { InitializeComponent(); } } 这就是如何将属性 (SomeProperty) 从 ParentUserControl 上下文传递到 ChildUserControl 的 DependencyProperty (MyDProperty)。

如何取消点击Primevue的单选按钮？

我正在使用 vue3 和 Primevue 来开发我的应用程序。我想在单击时取消选择 Primevue 的单选按钮。有办法做到吗？这是我的单选按钮代码。我使用 vue3 和 Primevue 来开发我的应用程序。我想在单击时取消选择 Primevue 的单选按钮。有办法做到吗？这是我的单选按钮代码。 <div class="field col-12 md:col-12 lg:col-12"> <template v-for="currency in currencies" :key="currency.id"> <div v-if="v$.currency.$model !== currency.code" class="flex align-items-center mb-2"> <RadioButton v-model="paidInType" :inputId="currency.code" name="payIn" :value="currency.code" /> <label :for="currency.code" class="ml-2">Pay in {{ currency.symbol }}</label> </div> </template> </div> 单选按钮并不意味着不可选择。请针对您的用例使用复选框或切换组件，并根据您的需要重新设计它们。但是如果您确实需要覆盖默认的单选按钮操作，则添加 @click 方法来删除所选值（如果其等于单击的单选按钮值）。从 UI/UX 角度来看，您不应该将单选按钮留空。这就是为什么 PrimeVue 无线电组件没有 required 属性（只是假设需要）。这种行为已经成为几十年来的标准，即必须选择一个单选选项，即使该选项是“不适用”或“不想说”等。如果您确实需要取消选择，请首先考虑使用不同的组件。如果您确实想取消选择单选按钮，您需要做的就是在选择事件时将 v-model 设置回默认的未选择值状态。由于您需要首先确认新选择的值与之前的值相同，因此您需要始终跟踪之前的值。 const paidInType = ref(''); const prevValue = ref(''); function selectRadio(value) { if (prevValue.value === paidInType.value) { paidInType.value = ''; } } <RadioButton v-model="paidInType" @click="prevValue = paidInType" @update:modelValue="selectRadio(currency.code)" :inputId="currency.code" name="payIn" :value="currency.code" /> stackblitz 演示

如何向React.js添加HTML组件轮播

App.html 轮播应用程序.html <!DOCTYPE html> <html> <head> <title>Carousel</title> <link rel="stylesheet" type="text/css" href="./css/materialize.min.css"> </link> <link rel="stylesheet" type="text/css" href="App.css"> </link> </head> <div class="carousel"> <div class="carousel-item"> <img src={require("./1.png")} class="responsive-img"></img> </div> <div class="carousel-item"> <img src={require("./2.png")} class="responsive-img"></img> </div> <div class="carousel-item"> <img src={require("./3.png")} class="responsive-img"></img> </div> <script src="./js/materialize.min.js"></script> <script> const small = document.querySelector('.carousel'); var inst = M.Carousel.init(small, {}); inst.dist(50); </script> </div> </html> 应用程序.js import React from 'react'; var perf = require('./App.html'); class App extends React.Component { render(){ return ( <div dangerouslySetInnerHTML={{ __html: perf }} ></div> ); } } export default App; 有人可以帮我解决如何在 JS 文件中添加 HTML 文件并通过 JS 文件运行 HTML 文件吗？我在 HTML 中使用 Materialize 制作了一个轮播，但我无法在 JS 中编写代码，因此，如果可能的话，有人可以帮助我将 HTML 文件转换为 JS 文件，或者如何导入 HTML 文件在我的 JS 文件中。您可以简单地将所有 html 代码插入 App.js 文件中，reactjs 不需要任何 .html 文件。请按照下面的代码进行操作，希望您能理解。我只是将所有 HTML 代码放入 App.js 的父 div 中。 import React from 'react'; var perf =require('./App.html'); class App extends React.Component { render(){ return ( <div> <div class="carousel"> <div class="carousel-item"> <img src={require("./1.png")} class="responsive-img"></img> </div> <div class="carousel-item"> <img src={require("./2.png")} class="responsive-img"></img> </div> <div class="carousel-item"> <img src={require("./3.png")} class="responsive-img"></img> </div> </div> </div> ); } } export default App; 只需使用react-create-app模板，基本的html（head，meta）东西已经就位，只需修改src目录即可满足您的需求。例如 index.js 会是这样的， import React from 'react'; import './App.css'; // For Your CSS file class App extends React.Component { render(){ return ( <div class="carousel"> <div class="carousel-item"> <img src={require("./1.png")} class="responsive-img"></img> </div> <div class="carousel-item"> <img src={require("./2.png")} class="responsive-img"></img> </div> <div class="carousel-item"> <img src={require("./3.png")} class="responsive-img"></img> </div> ); } } export default App; 如果您需要更改基础html，您可以在公共目录中进行操作。编辑：（对于依赖项）当您使用 materialize-css 时，您可以通过使用 materialize-css@next 和此 cmd npm 将 npm install materialize-css@next 安装为依赖项来使用它有关安装的更多信息可以在此处找到来源：https://materializecss.com/getting-started.html 我看到您对许多正在使用依赖项的答案做出了回应。如果这是通过 CDN 实现的，您只需将其添加到公共文件夹中的 index.html 文件中，并在需要时使用您的依赖项。不过，我认为 Materialise 有一个可以安装的节点方面。

标识符“ChatFeed”已被声明

从 'react-chat-engine' 导入 { ChatEngine, ChatFeed }; 从 './components/chatFeed' 导入 ChatFeed；导入'./App.css'; 常量应用程序 = () => { 返回（ import { ChatEngine, ChatFeed } from 'react-chat-engine'; import ChatFeed from './components/chatFeed'; import './App.css'; const App = () => { return( <ChatEngine height="100vh" projectID="" userName="" userSecret="" renderChatFeed={(chatAppProps) => <ChatFeed {...chatAppProps} />} /> ); } export default App; 服务器运行时显示错误 SyntaxError: D:\PROJECTS\APPLICATION\chat_app\src\App.js: Identifier 'ChatFeed' has already been declared. (3:7) 1 | import { ChatEngine, ChatFeed } from 'react-chat-engine'; 2 | > 3 | import ChatFeed from './components/chatFeed'; | ^ 好吧，错误消息说明了一切，您声明了 ChatFeed 两次。您可以通过以下方式修复它：重命名您的组件，例如 import ChatFeedComponent from './components/chatFeed'; 将命名导入从 react-chat-engine 重命名为 import { ChatEngine, ChatFeed as ChatFeedComp } from 'react-chat-engine'; 当然，随意使用你喜欢的任何名称错误消息显示您导入 ChatFeed 两次。您可以修复它，从第一行删除 chatFeed 用这个从“react-chat-engine”导入{ChatEngine}；从 './components/ChatFeed' 导入 ChatFeed；

在使用 TypeScript 进行 React 时，输入字段在“值”处给出错误

从“react”导入{SetStateAction，useState} const 登录表单 =() =>{ const [名称，setName] = useState(); const [全名，setFullname] = useState import { SetStateAction, useState } from "react" const Loginform =() =>{ const [name, setName] = useState<String | null>(); const [fullname, setFullname] = useState<String | null>(); const inputEvent =(event: { target: { value: SetStateAction< String |null | undefined >; }; })=>{ setName(event.target.value) } const Submit = ()=>{ setFullname(name) } return <> <h1>Enter Your Name </h1> <input type="text" placeholder="Enter your name" onChange={inputEvent} value={name}/> <button onClick={Submit}>Submit</button> <h1>Hi {fullname==null? "Guest" :fullname}</h1> </> } export default Loginform <input type="text" placeholder="Enter your name" onChange={inputEvent} value={name}/> 上一行中的“value”属性显示错误这是错误详细信息： (property) React.InputHTMLAttributes<HTMLInputElement>.value?: string | number | readonly string[] | undefined Type 'String | null | undefined' is not assignable to type 'string | number | readonly string[] | undefined'. Type 'null' is not assignable to type 'string | number | readonly string[] | undefined'.ts(2322) index.d.ts(2398, 9): The expected type comes from property 'value' which is declared here on type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>' 也尝试写 return as any。或者尝试添加 string[]，但出现错误。进行以下调整：将 String 替换为 string，因为原始 Typescript 类型是小写的 (number, string, boolean, etc) TypeScript 报告此错误，因为属性值不接受 null 作为值，而是接受 undefined。将代码更新为： const [name, setName] = useState<string>() 这会使用 string 作为默认类型来初始化状态。初始状态隐式地被视为 undefined，因为如果未显式提供，TypeScript 会将类型的默认值设置为 undefined。为了简单起见，您不需要解构事件。使用内联函数，如下例所示： <input type="text" placeholder="Enter your name" onChange={(e) => setName(e.target.value)} value={name}/> 我使用你的代码创建了一个 CodeSanbox，它似乎只需要很少的修改就可以正常工作。您可以在这里找到沙盒这是我想出的代码 import { SetStateAction, useState } from "react"; const Loginform = () => { const [name, setName] = useState<string | null>(); const [fullname, setFullname] = useState<string | null>(); const inputEvent = (event: { target: { value: SetStateAction<string | null | undefined> }; }) => { setName(event.target.value); }; const Submit = () => { setFullname(name); }; return ( <div> <h1>Enter Your Name </h1> <input type="text" placeholder="Enter your name" onChange={inputEvent} value={name} /> <button onClick={Submit}>Submit</button> <h1>Hi {fullname == null ? "Guest" : fullname}</h1> </div> ); }; export default Loginform;

MazPhoneNumberInput Vue.js 上的自动对焦

我在表单中使用 MazPhoneNumberInput 组件（https://maz-ui.com/components/maz-phone-number-input）：我正在以这种方式使用 MazPhoneNumberInput 组件（https://maz-ui.com/components/maz-phone-number-input）： <MazPhoneNumberInput v-model="phoneNumber" v-model:country-code="countryCode" show-code-on-list :preferred-countries="['DE', 'US', 'GB']" noFlags /> 并且想在手机输入上设置自动对焦。 MazPhoneNumberInput 组件本身没有 autofocus 属性，但它基于具有 autofocus 属性的 MazInput 组件（https://maz-ui.com/components/maz-input）：我尝试通过 javascript 使用 onMounted 方法设置焦点： import AppLayout from "@/Layouts/Auth/AppLayout.vue"; import MazPhoneNumberInput from 'maz-ui/components/MazPhoneNumberInput' import {ref, onMounted} from 'vue' const phoneNumber = ref() const countryCode = ref('DE') const focusInput = () => { phoneNumber.value.focus(); }; onMounted(focusInput); 但是没有成功。如何在手机输入上设置自动对焦？这可以使用 template ref 来完成，它可以访问组件的 DOM 元素。由于根元素只是多个其他元素的包装，因此需要额外的查询来获取实际的电话输入，然后您可以将其聚焦： onMounted(async () => { const phoneEl = phone.value.$el // MazPhoneNumberInput root DOM element const phoneInput = phoneEl.querySelector('input[type=tel]') // inner input DOM element await nextTick() // can focus after next DOM update phoneInput.focus() })

如何在本机反应中强制 TextInput 增长而 multiline={false} ？

<TextInput ref={inputRef} value={text} style={styles.textInput} returnKeyType="next" placeholder={"placeholder"} scrollEnabled={false} blurOnSubmit={false} onFocus={onFocusInput} textAlignVertical="center" onContentSizeChange={onChangeContentSizeChange} onChangeText={onInputChangeValue} onBlur={onInputBlur} onKeyPress={onInputKeyPress} onSubmitEditing={() => NextScript(id)} multiline={false} numberOfLines={5} /> 逻辑是我想要 onSubmitEditing 带我到下一个 TextInput 字段，并且我需要文本来包装输入的多个文本。如果我启用 multiline，一旦按下回车键，它会在进入下一个输入之前进入下一行，这就是我试图避免的。是否可以用onSubmitEditing完全取代回车键？每当我按下回车键时，它都会尝试在移动到下一个TextInput之前输入换行符，因此它会创建一个糟糕的用户界面，其中文本在重新定位然后进入下一行之前会稍微向上移动。如果我将 blurOnSubmit 设置为 true，它会停止，但键盘会在提交时关闭。如果我将 multiline 设置为 false，它会停止但不会换行。我创建了一个示例，onKeyPress将允许您在按下回车键时聚焦下一个文本字段。 import { Text, SafeAreaView, StyleSheet, TextInput } from 'react-native'; export default function App() { return ( <SafeAreaView style={styles.container}> <TextInput multiline={true} placeholder={'PLACEHOLDER'} onKeyPress={(e) => { if (e.nativeEvent.key == 'Enter') { console.log('ENTER'); //focusNextTextField(); } }} style={{ borderColor: '#000000', borderWidth: 1 }} /> </SafeAreaView> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignContent: 'center', padding: 8, }, }); 我也面临同样的问题。后来我找到了解决办法。自定义文本输入处理：您需要一个自定义逻辑来处理文本输入及其在按“Enter”键时的行为。您将以编程方式控制文本换行和导航到下一个输入字段，而不是依赖多行的默认行为。用 onSubmitEditing 替换 Enter 键：要覆盖“Enter”键的默认行为，您可以使用 onKeyPress 事件。检测何时按下“Enter”键并以编程方式触发 onSubmitEditing 函数。维护文本换行：由于 multiline={false} 禁用自动文本换行，因此您需要实现一种方法来根据输入的内容大小或字符数手动处理文本换行。以下是如何实现这一点的概念示例： import React, { useState, useRef } from 'react'; import { TextInput, StyleSheet } from 'react-native'; const CustomTextInput = () => { const [text, setText] = useState(''); const nextInputRef = useRef(null); const onInputKeyPress = (e) => { if (e.nativeEvent.key === 'Enter') { // Replace the Enter key functionality // Call the function you would have in onSubmitEditing handleEnterKeyPress(); } }; const handleEnterKeyPress = () => { // Logic to navigate to next TextInput // Focus the next input field if (nextInputRef.current) { nextInputRef.current.focus(); } // Additional logic if needed to handle text wrapping }; return ( <TextInput value={text} style={styles.textInput} onChangeText={setText} onKeyPress={onInputKeyPress} blurOnSubmit={false} // prevent keyboard from closing // other props /> ); }; const styles = StyleSheet.create({ textInput: { // styling for your text input }, }); export default CustomTextInput;

default-template-argument 相关问题

最新问题