components 相关问题

统一建模语言中的一个组件“代表系统的模块化部分,它封装了其内容,其表现形式可在其环境中替换。组件根据提供的和所需的接口定义其行为”。组件的最佳示例可以在ActionScript-Flash,Flex sdks中找到。你有UI组件,如按钮,标签,DataGrids,可重复使用的图表,可分发等。

Modal 未在 React 中打开

我尝试使用 React 构建一个模态,但它不起作用。当我单击打开按钮时,模式不会打开。我尝试搜索这个问题但没有得到任何结果。 我使用 useState

回答 1 投票 0

连接到通过单个 Qt.createComponent 调用创建的所有 QML 对象

问题 如何创建 QML 组件,使该组件创建的所有对象都以相同的方式连接? 例如。我想要

回答 1 投票 0

使用 ng2-ckeditor、Angular 4 时出现“缺少 CKEditor 4.x (http://ckeditor.com/)”警告

我将在我的 Angular 4 项目中使用 ng2-ckeditor 插件。 我阅读了指南,其中有 systemjs 文件的配置。 但我在我的 Angular 4 cli 项目中找不到 systemjs。 所以我做了其他...

回答 4 投票 0

Angular 13 生成组件显示无需执行任何操作

通过cmd在角度13中生成新组件时 ng g c 复合1 显示“无事可做” 任何建议....

回答 3 投票 0

禁用角度分量中的先前日期

html: 发行日期 html: <div class="col-sm-6 col-md-3 form-group"> <div class="label-mini"> <span>Issue Date</span> </div> <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="issue_date"> </nz-date-picker> </div> <div class="col-sm-6 col-md-3 form-group"> <div class="label-mini"> <span>Delivery Date</span> </div> <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="delivery_date" > </nz-date-picker> </div> ts: initializeForm() { this.purchaseOrderForm = new FormGroup({ issue_date: new FormControl(new Date().toISOString()), delivery_date: new FormControl('', Validators.compose([ Validators.required, ])), }) } 我想根据问题日期禁用之前的日期 如果issue_date是:05-05-2024,那么在delivery_date,它将禁用issue_date的前一个日期,如果我更改它也将作为禁用前一个日期的方式工作。 [n.b:issue_date默认值是第一次设置为当前日期,因此用户可以根据需要更改它,但如果不更改它将设置为当前日期] 您可以向 [nzDisabledDate] 提供包含禁用日期逻辑的功能到您的 delivery_date 日期选择器。 <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="delivery_date" [nzDisabledDate]="disabledDeliveryDate" > </nz-date-picker> disabledDeliveryDate = (date: Date): boolean => { let issueDate = this.purchaseOrderForm.controls.issue_date.value; if (!issueDate || !date) { return false; } return date.getTime() <= new Date(issueDate).getTime(); }; 演示@StackBlitz 您需要使用 nzDisabledDate 属性并提供一个函数,该函数返回一个布尔值,确定是否需要禁用/启用日期。下面是工作示例! HTML <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="delivery_date" [nzDisabledDate]="disabledDate" > </nz-date-picker> TS disabledDate = (current: Date): boolean => { const issueDateCtrl = this.purchaseOrderForm.get('issue_date'); const issueDateValue = issueDateCtrl?.value || null; // Can not select days before today and today return issueDateValue ? differenceInCalendarDays(current, new Date(issueDateValue)) < 0 : false; }; 完整代码: import { Component } from '@angular/core'; import { FormGroup, FormControl, Validators } from '@angular/forms'; import { differenceInCalendarDays, setHours } from 'date-fns'; import { DisabledTimeFn, DisabledTimePartial } from 'ng-zorro-antd/date-picker'; @Component({ selector: 'nz-demo-date-picker-disabled-date', template: ` <form [formGroup]="purchaseOrderForm"> <div class="col-sm-6 col-md-3 form-group"> <div class="label-mini"> <span>Issue Date</span> </div> <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="issue_date"> </nz-date-picker> </div> <div class="col-sm-6 col-md-3 form-group"> <div class="label-mini"> <span>Delivery Date</span> </div> <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="delivery_date" [nzDisabledDate]="disabledDate" > </nz-date-picker> </div> </form> `, styles: [ ` nz-date-picker, nz-range-picker { margin: 0 8px 12px 0; } `, ], }) export class NzDemoDatePickerDisabledDateComponent { purchaseOrderForm = new FormGroup({ issue_date: new FormControl(new Date().toISOString()), delivery_date: new FormControl( '', Validators.compose([Validators.required]) ), }); disabledDate = (current: Date): boolean => { const issueDateCtrl = this.purchaseOrderForm.get('issue_date'); const issueDateValue = issueDateCtrl?.value || null; // Can not select days before today and today return issueDateValue ? differenceInCalendarDays(current, new Date(issueDateValue)) < 0 : false; }; } Stackblitz 演示

回答 2 投票 0

在服务端组件之间共享数据

我可以提高效率,而不必两次调用 getPosts 吗?我想使用初始帖子来创建不同的布局,但我不想继续使用 getPosts() 或者这不是 po...

回答 2 投票 0

如何使用 contentlayer 创建自定义 JSX 组件?

我尝试使用 contentlayer 创建自定义组件,但它没有按预期工作。起初,我认为我必须在 .mdx 文件中导入自定义组件。但是,每次我这样做...

回答 1 投票 0

使用vue.js在子组件中调用父方法

我只想知道如何从子组件调用父函数。 我尝试使用 $parent 来调用父方法,但出现此错误 类型错误:_this.$parent.forceRender 不是

回答 2 投票 0

在 React 中将一个单独的 div 附加到另一个组件中

我创建了一个带有输入框的注释,但我不知道如何将注释附加到输入框的 div 中。输入框位于 CreateArea.jsx 内的 CreateArea 函数中,Note 函数...

回答 1 投票 0

如何在React中泛化动态列表组件

我正在 React Native 中创建一个应用程序,我将在其中多次使用 组件。 现在,所有列表都非常相似,唯一的动态元素是列表内的数据。 ...

回答 1 投票 0

用户访问多个组件的UML聚合

获得以下构建块视图级别 1 的图(此处不允许使用技术单元)。显示的每个组件都与用户进行交互。顶部的 UML 端口 (baz) 应该可视化 u...

回答 1 投票 0

@Value 注解在构造函数中不起作用

为什么 Spring @Value 注解在构造函数中不起作用? 我有这个电子邮件类正在读取一些电子邮件相关的配置。 在构造函数中,如果我放置一个断点,则值是...

回答 4 投票 0

props 可以传递到 tailwindcss 类中吗?

我正在尝试做的事情 - 创建一个可重用的组件,将值传递到扩展的背景图像类中。 问题 - 直到我第一次使用

回答 1 投票 0

删除React组件内容可编辑警告

我创建了一个反应组件,它是弹出悬停中模型内的一个表单。但是每次我加载页面时,都会在控制台中收到以下警告,我想将其删除。 这是战争...

回答 1 投票 0

防止创建样式表文件。离子

我想使用原理图“ionic g c ...”生成一个没有样式表文件的新组件 在此输入图像描述 离子信息 离子 CLI:7.2.0 离子框架...

回答 1 投票 0

Angular 独立组件(使用 LoadComponent)- 延迟加载服务不工作

服务无法在组件中运行。并且控制台上没有错误。保持组件继续加载。当我从组件中删除服务时,它开始正常工作。有一些问题...

回答 1 投票 0

Angular 双列表更改滚动条轨道颜色

我正在使用 AngularDualListBoxModule: 从 'Angular-dual-listbox' 导入 { AngularDualListBoxModule }; 我想将滚动条颜色从蓝色更改为绿色(上图)。 实际双L...

回答 2 投票 0

如何在react JS中使用map函数?我无法使用映射函数来运行循环来循环组件代码。我怎样才能运行它?

App.js具体代码: {blog.map((v, i) => ( ))} App.js具体代码: <Container> <Row> {blog.map((v, i) => ( <ProductItems key={i} blog={v}/> ))} </Row> </Container> function ProductItems() { return ( <Col lg="3" md="6"> <Card > <Card.Img variant="top" src="placeholder.js/100px180" /> <Card.Body> <Card.Title>Card Title</Card.Title> <Card.Text> Some quick example text to build on the card title and make up the bulk of the card's content. </Card.Text> <Button variant="primary">Go somewhere</Button> </Card.Body> </Card> </Col> ); } blog.jsx代码: export let blog = [ { "blog": [ { "userId": 1, "id": 1, "title": "are or do repels provide blacked out to accept the option criticizes", "body": "because and accepts\naccepts the result of refusal convenient and when which is all\nof our things, but they are the thing that will happen to the architect" }, { "userId": 1, "id": 2, "title": "who is to be", "body": "is of things at the time of life\nthey are nothing to follow let the pain of the blessed rebuke those pains and not run away from the caresses of the pleasure, nor any trouble" }, { "userId": 1, "id": 3, "title": "who is to be", "body": "is of things at the time of life\nthey are nothing to follow let the pain of the blessed rebuke those pains and not run away from the caresses of the pleasure, nor any trouble" }, { "userId": 1, "id": 4, "title": "who is to be", "body": "is of things at the time of life\nthey are nothing to follow let the pain of the blessed rebuke those pains and not run away from the caresses of the pleasure, nor any trouble" }, { "userId": 1, "id": 5, "title": "who is to be", "body": "is of things at the time of life\nthey are nothing to follow let the pain of the blessed rebuke those pains and not run away from the caresses of the pleasure, nor any trouble" }, { "userId": 1, "id": 6, "title": "who is to be", "body": "is of things at the time of life\nthey are nothing to follow let the pain of the blessed rebuke those pains and not run away from the caresses of the pleasure, nor any trouble" } ] } ] {描述:blog.jsx 包含 json 代码和我尝试通过地图函数循环的对象。 App.js 文件包含 ProductItems 组件和函数以及映射函数。} 我尝试重复 ProductItems 代码,因为它有卡代码。并期待这个结果并没有发生。 更正您的对象声明。你添加了一些不必要的东西。 代替: export let blog = [{ "blog": [....] }] 应该是: export let blog = [{ "userId": 1, "id": 1, "title": "...", "body": "...." }]; 为了你的对象 blog[0]?.blog?.map((blog)=>{ return <ProductItems key={blog?.id} blog={blog}/> }) 这会起作用

回答 1 投票 0

如何在java中创建加载栏

我需要使用 java swing 创建一个进度条作为我的独立应用程序的加载屏幕。

回答 1 投票 0

我的 CSS 文件未加载到我的 React 项目中

我是新来反应的。尝试将 CSS 应用于我的组件类,但它不适用于该类。 我的文件夹结构: App.jsx 文件代码: 从“./components/FoodItems&...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.