components 相关问题

我有组件Form.js： .... 函数形式（）{ 返回（我有组件Form.js： .... function Form() { return ( <View> <FormButton primary text="Login" /> <FormButton primary={false} text="Register" /> </View> ); } export default Form; 第二个组件 - FormButton.js .... function FormButton(props) { let { primary, } = props return ( <Text>Primary: {primary}</Text> ); } export default FormButton; 它不起作用。为什么？当我像字符串一样传递 props Primary 时： <FormButton primary="abc" text="Login" /> 它有效，但是当我尝试像布尔值一样发送它时： <FormButton primary text="Login" /> 或 <FormButton primary={true} text="Login" /> 或 <FormButton primary={false} text="Login" /> 因为如果您将 props primary 作为布尔值传递，则需要将其转换为字符串。简单使用toString(): function FormButton(props) { let { primary, } = props return ( <Text>Primary: {primary.toString()}</Text> ); } export default FormButton;

react-native components react-props

回答 1 投票 0

映射数组 prop 后获取多个重复值，然后将映射的值作为 prop 传递给 React 中的另一个组件

我正在使用 React 和 Material ui，但我遇到了这个奇怪的错误。我有一个父订单页面，然后将订单数组传递给订单组件，如下所示：我正在使用 React 和 Material ui，但我遇到了这个奇怪的错误。我有一个父订单页面，然后将订单数组传递给订单组件，如下所示： <PendingComponent {...{pendingOrders}} /> 然后在 PendingComponent 中我像这样映射订单数组： <Box m="1rem 0 0 0"> {pendingOrders?.map((order, index) => ( <Accordion key={index} 在这个手风琴内部，还有另一个组件，一个模态，我将订单作为道具传递给它，如下所示： {updateSatus && ( <UpdateOrderStatusModal {...{ order }} /> )} 现在，当我尝试访问 UpdateOrderStatusModal 组件中的订单值时，发生了奇怪的事情，我没有得到我应该期望的映射订单值的正确值。像这样，在 PendingComponent 组件中，我当前仅映射 3 个订单，然后将订单传递给 UpdateOrderStatusModal 组件，而不是获取单个订单，而是在我控制台日志时依次打印它们，并且我无法获取我想要进入 UpdateOrderStatusModal 的实际订单： UpdateOrderStatusModal.jsx:27 The order in the modal {status: 'pending', userEmail: '[email protected]', dateCreated: 'Wed, August 16, 2023 at 6:14 PM', step: 0, orderProducts: {…}, …} UpdateOrderStatusModal.jsx:27 The order in the modal {status: 'pending', userEmail: '[email protected]', dateCreated: 'Wed, August 16, 2023 at 6:14 PM', step: 0, orderProducts: {…}, …} UpdateOrderStatusModal.jsx:27 The order in the modal {status: 'pending', userEmail: '[email protected]', dateCreated: 'Wed, August 16, 2023 at 5:15 PM', step: 0, orderProducts: {…}, …} UpdateOrderStatusModal.jsx:27 The order in the modal {status: 'pending', userEmail: '[email protected]', dateCreated: 'Wed, August 16, 2023 at 5:15 PM', step: 0, orderProducts: {…}, …} UpdateOrderStatusModal.jsx:27 The order in the modal {status: 'pending', userEmail: '[email protected]', dateCreated: 'Wed, August 16, 2023 at 5:08 PM', step: 0, orderProducts: {…}, …} UpdateOrderStatusModal.jsx:27 The order in the modal {status: 'pending', userEmail: '[email protected]', dateCreated: 'Wed, August 16, 2023 at 5:08 PM', step: 0, orderProducts: {…}, …} 我违反了哪些 React 规则？为什么我会出现这种行为？谢谢你。更新 - 详细的可重现代码我在不同的项目中重新创建了相同的问题并遇到了相同的问题。这是该组件的代码。将一些项目添加到收藏夹后，我为用户提供了一个收藏夹产品页面： <ul role="list" className="-my-6 divide-y divide-gray-200" > {products.map((product) => ( <li key={product.id} className="flex py-6"> <div onClick={() => { setOpenFavourites(false); navigate(`/product/${product.id}`); }} className="hover:cursor-pointer h-24 w-24 flex-shrink-0 overflow-hidden rounded-md border border-gray-200" > <img src={product.images[0]} alt={product.imageAlt} className="h-full w-full object-cover object-center" /> </div> <div className="ml-4 flex flex-1 flex-col"> <div> <div className="flex justify-between text-base font-medium text-gray-900"> <h3> <button onClick={() => { setOpenFavourites(false); navigate( `/product/${product.id}` ); }} > {product.name} </button> </h3> <p className="ml-4"> $ {product.price} </p> </div> <p className="mt-1 text-sm text-gray-500"> {product.availability} </p> </div> <div className="flex flex-1 items-end justify-between text-sm"> <p className="text-gray-500"> Min Order{" "} <span className="text-gray-800"> {product.minOrder} Tonne </span> </p> <div className="flex"> <button type="button" onClick={() => handleRemove(product.id) } className="font-medium text-primary hover:text-secondary" > Remove </button> </div> <div className="flex"> <button type="button" onClick={() => setOpen(true)} className="font-medium text-primary hover:text-secondary" > Open this Modal </button> </div> {open && (<TestModal product={product} />)} </div> </div> </li> ))} </ul> 在上面的代码中，如果底部有测试按钮“打开此模态”及其下方的测试模态，则将映射的产品作为道具传递给它。现在这是 TestModal 代码： import React from 'react' const TestModal = ({product}) => { console.log("test modal mounted", product.name) const investigate = () => { console.log("investigate clicked", product.name, product.id) } return ( <> <div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none"> <div className="relative w-auto my-6 mx-auto max-w-3xl"> <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none"> <div className=" items-center justify-end p-6 border-t border-solid border-slate-200 rounded-b" > <button className="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" onClick={investigate} > Investigate </button> </div> </div> </div> </div> <div className="opacity-25 fixed inset-0 z-40 bg-black"></div> </> ) } export default TestModal 现在在此模式上，假设我在 Potatoes 产品上单击了“打开此模式”，在测试模式中，当我单击“调查”按钮时，我希望将 Potato 产品信息控制台登录到该调查功能中，但这并没有发生，我打印了不同的产品信息，例如草莓，如果我将草莓作为我最喜欢的产品之一，喜欢它总是选择位于映射数组底部的产品，而不是那个我真的点击了。我还注意到，当我使用模态（显示在其他组件之上的模态组件）时，会发生这种行为，当我使用没有某种 z 索引属性的组件时，它不会执行这种奇怪的行为。我该如何解决这个问题？我没有发现您的代码有任何问题（特别是因为信息有限......）。不过，按照你说的—— ...当我控制台日志时，它们都被一个接一个地打印出来假设您在开发环境中使用严格模式，这是完全正常的。在初始渲染期间重新渲染两次应该可以帮助您更快地找到错误，而 React 只在开发模式下这样做。违反此规则的组件会出现不可预测的行为并导致错误。为了帮助您意外发现不纯的代码，严格模式会在开发过程中调用您的一些函数（仅那些应该是纯的函数）两次。 https://react.dev/reference/react/StrictMode

reactjs components mapping rendering react-props

回答 1 投票 0

有什么方法可以与 Blazor 页面的主布局进行通信

这里我想传递一些标题到mainlayout.razor页面，以便我的组件或页面可以更新标题的标题。 blazor 有没有可能的方法来做到这一点？任何帮助将不胜感激...

c# components blazor blazor-server-side

回答 2 投票 0

React Native 组件未在页面内更新

我有一个名为 FillBar 的组件，它将填充到一定的百分比。它需要一些样式参数，但只需要一个，而其他参数都有默认值。该参数是一个浮点数...

react-native components

回答 1 投票 0

嵌套路由SAPUI5

我有一个关于 SAPUI5 中路由的问题。我有一个带有两个主视图的 SplitApp 容器。第一个主视图显示设备列表。第二个主视图显示

routes nested components sapui5 parent

回答 1 投票 0

如何在React TypeScript中为组件使用有限的ElementType

我想创建一个可以限制ElementTypes的多态React组件。我为多态组件创建了这种类型输入 ComponentWithElementProps 我想创建一个可以限制ElementTypes的多态React组件。我为多态组件创建了这种类型 type ComponentWithElementProps<Props, E extends React.ElementType | React.JSX.Element> = Props & Omit<React.ComponentProps<E>, keyof Props> type PolymorphicComponentProps<Props, E extends React.ElementType | React.JSX.Element> = {as?: E} & Props & ComponentWithElementProps<Props, E> 我在我的组件中使用了 type FooOwnProps = { someProp: string } type FooProps<E extends React.ElementType = 'div'> = PolymorphicComponentProps<TestOwnProps, E> function Foo<E extends React.ElementType = 'div'>({as, ...props}: FooProps<E>) { const Com = as || 'div' return ( <Com {...props}>Test</Com> ) } 还好。但我希望 Foo 组件中的 prop 接受有限的类型，例如仅获取和标签。所以我从 React.ElementType 中提取有限的元素类型 type LimitedElementType = Extract<React.ElementType, 'h1' | 'p'> 我在我的 Foo 组件中使用了 type LimitedElementType = Extract<React.ElementType, 'h1' | 'p'> type FooProps<E extends ElementType> = PolymorphicComponentProps<FooOwnProps, E> function Foo<E extends LimitedElementType = 'p'>({as, ...props}: FooProps<E>) { const Com = as || 'p' return ( <Com {...props}>Test</Com> ) } 这对于具有相同属性（如 h1 和 p）的元素来说是可以的。但对于具有不同属性的元素（例如 label 和 a）则不行 type LimitedElementType = Extract<React.ElementType, 'a' | 'label'> 我收到了这个错误 Type 'Omit<Foo<E>, "as"> & { children: string; }' is not assignable to type 'IntrinsicAttributes & ((ClassAttributes<HTMLAnchorElement> & AnchorHTMLAttributes<HTMLAnchorElement> & ClassAttributes<...> & LabelHTMLAttributes<...> & ClassAttributes<...> & HTMLAttributes<...>) | LibraryManagedAttributes<...>)'. Type 'Omit<Foo<E>, "as"> & { children: string; }' is not assignable to type 'IntrinsicAttributes & ClassAttributes<HTMLAnchorElement> & AnchorHTMLAttributes<HTMLAnchorElement> & ClassAttributes<...> & LabelHTMLAttributes<...> & ClassAttributes<...> & HTMLAttributes<...>'. Type 'Omit<Foo<E>, "as"> & { children: string; }' is not assignable to type 'ClassAttributes<HTMLAnchorElement>'. Types of property 'ref' are incompatible. Type 'Foo<E>["ref"] | undefined' is not assignable to type 'LegacyRef<HTMLAnchorElement> | undefined'. Type 'ComponentProps<E>["ref"]' is not assignable to type 'LegacyRef<HTMLAnchorElement> | undefined'. Type 'string | ((instance: HTMLAnchorElement | null) => void) | RefObject<HTMLAnchorElement> | ((instance: HTMLLabelElement | null) => void) | RefObject<...> | null | undefined' is not assignable to type 'LegacyRef<HTMLAnchorElement> | undefined'. Type '(instance: HTMLLabelElement | null) => void' is not assignable to type 'LegacyRef<HTMLAnchorElement> | undefined'. Type '(instance: HTMLLabelElement | null) => void' is not assignable to type '(instance: HTMLAnchorElement | null) => void'. Types of parameters 'instance' and 'instance' are incompatible. Type 'HTMLAnchorElement | null' is not assignable to type 'HTMLLabelElement | null'. Type 'HTMLAnchorElement' is missing the following properties from type 'HTMLLabelElement': control, form, htmlForts(2322) 这很有趣，因为我的组件仍然有效 // both of this components are works <Foo as="a" href='' /> <Foo as="label" htmlFor='' /> 我设法使用类似于以下的方法让它工作，不确定这是否是最好的方法，但它现在已经有效。 type AllowedElements = 'a' | 'label' type IsAllowedElement<T> = T extends React.ElementType<AllowedElements> ? T : never type BaseProps<T extends React.ElementType> = { as?: IsAllowedElement<T> } type Props<T extends React.ElementType> = BaseProps<T> & Omit<React.ComponentPropsWithRef<T>, keyof BaseProps<T>> type Component = <T extends React.ElementType>( props: Props<T>, ) => React.ReactNode export const Text: Component = forwardRef( <T extends React.ElementType = 'a'>( { as, ...props }: Props<T>, ref: React.ComponentPropsWithRef<T>['ref'], ) => { const Component = as || 'a' return <Component {...props /> } )

reactjs typescript frontend components

回答 1 投票 0

为什么我的组件没有使用 Observable 返回的数据进行更新？

这是我的组件的 .ts 文件： _myMovieRating：数字= 0；获取 myMovieRating(): 数字 { 返回数字（this._myMovieRating）； } 设置 myMovieRating(值: 数字) { 这个。

angular templates components observable subscribe

回答 1 投票 0

在 React 中映射和打印唯一数据集对象的正确方法是什么？

我正在尝试为我的侧边导航创建一个过滤器部分，我可以在其中打开或关闭每个以仅显示该标题的漫画。目前，我在正确循环数据集时遇到问题我正在尝试为我的侧边导航创建一个过滤器部分，我可以在其中打开或关闭每个<li>以仅显示该标题的漫画。目前，我在正确循环数据集以获取唯一名称值并将其打印为 <li> 时遇到问题。到目前为止我所尝试的是映射 PRODUCTS 对象，获取每个名称值并将其存储在一个数组中，使用单独的索引值循环遍历该数组长度，然后如果满足此条件则返回该名称值 (arr[ i] !== arr[j]). 例如，我的产品数据集可能包含 15 个不同的产品或对象，其中 5 个名为 Alita Battle Angel、5 个名为 Wolverine、5 个名为 Spiderman。预期输出： console.log 这个 (1) Array=[1:'Alita Battle Angel', 2:'Wolverine', 3:'Spiderman'] 归还这个 <li> Alita Battle Angel</li> <li> Wolverine </li> <li> Spiderman </li> 实际产量： console.log 这个 (15) Array=[ 1:'Alita Battle Angel', 2:'Alita Battle Angel', 3:'Alita Battle Angel', 4:'Alita Battle Angel', 5:'Alita Battle Angel', 6:'Wolverine', 7:'Wolverine', 8:'Wolverine', 9:'Wolverine', 10:'Wolverine', 11:'Spiderman', 12:'Spiderman', 13:'Spiderman', 14:'Spiderman', 15:'Spiderman' ] 归还这个 <li>Alita Battle Angel</li> 这是我的代码：（我还分割了每个漫画的名称值，以便它仅返回“，”之前的字符，以确保每个漫画标题都是完全唯一的。示例：“Alita Battle Angel，Vol .1”--->“阿丽塔战斗天使”） import React from "react"; import { PRODUCTS } from "../Utilities/PRODUCTS"; import "./SideNav.scss"; const SideNav = (props) => { let arr = []; return ( <div className="sideNav-container"> <div className="sideNav-title"></div> <ul> {PRODUCTS.map((product) => { // map the PRODUCTS data // loop products data while carrying a singular products 'name' for (let i = 0; Object.keys(PRODUCTS).length > i; i++) { // add that name value to array list arr.push(product.name.split(",", 1)); console.log("products length: " + Object.keys(PRODUCTS).length); // if array greater than 1 item if (arr.length > 1) { console.log(arr); // loop the length of that array for (let j = 0; j < arr.length; j++) { // if array[j] not equal to previous array item return name if (arr[i] !== arr[j]) { let title = `${product.name}`.split(",", 1); return <li key={[product.id]}>{title}</li>; } else return null; } } } })} </ul> </div> ); }; export default SideNav; 问题是我的代码将整个数据集作为单个对象注入。基本上将我的数据集作为单个数组返回 15 次。我不明白为什么要这样做。我知道使用过滤器方法可能是一个可能的解决方案，并且还使用react中的useState钩子。我已经尝试过这两种方法，但收到了某种特定于我的文件设置的错误。任何解决方案的建议将不胜感激。你的代码很混乱。它最终发生的原因是因为您多次循环 PRODUCTS var。一旦使用顶级 PRODUCTS.map 调用，然后再次在 map 回调中使用 for (let i = 0; Object.keys(PRODUCTS).length > i; i++) {。您还在外部维护一个 arr ，这是不好的做法，因为您实际上只想要纯函数。然后你再次循环这个，所以事情变得非常复杂，没有任何收获。不管怎样，最好退后一步。 map 实际上是不适合这里工作的工具。从根本上讲，map将采用长度为n的数组，并对每个项目应用转换，返回一个具有相同长度n的新数组。您真正想要的是一个 reduce，它能够循环 PRODUCTS 数组中的每个元素并构建一个具有不同长度的新数组。您不仅希望获得名称“类别”的平面数组，还希望能够将这些“类别”链接到相关产品。我已经在每个类别中添加了嵌套标题，这样您就可以单击标题来展开它。 import React, { useState } from "react"; import { PRODUCTS } from "../Utilities/PRODUCTS"; import "./SideNav.scss"; import "./styles.css"; const SideNav = (props) => { const [openCategory, setOpenCategory] = useState(null); return ( <div className="sideNav-container"> <div className="sideNav-title"></div> <ul> {Object.entries( PRODUCTS.reduce((productsByTitle, product) => { const category = product.name.split(",", 1)[0]; return { ...productsByTitle, [category]: [...(productsByTitle?.[category] ?? []), product], }; }, {}), ).map(([categoryName, categoryProducts]) => ( <li key={categoryName}> <span style={{ cursor: "pointer" }} onClick={() => setOpenCategory(categoryName)} > {categoryName} </span> <ul style={openCategory !== categoryName ? { display: "none" } : {}} > {categoryProducts.map(({ id, name }) => ( <li key={id}>{name}</li> ))} </ul> </li> ))} </ul> </div> ); }

javascript reactjs components jsx filtering

回答 1 投票 0

Antd Datepicker 中的所有日期在传递值时都会被选中

当使用 Ant Design 中的 DatePicker 组件并使用 value 属性设置其值时，弹出日历中的所有日期都会以蓝色突出显示，就像它们被选中一样。将光标移至...

javascript reactjs datepicker components antd

回答 2 投票 0

React-router 不会在不同路径上重新挂载组件

我的反应应用程序中有一个组件，它是一个表单。该表格用于创建新许可证或编辑现有许可证。无论哪种方式，它都只是一个组件，它会检查 componentDidMount() ，其中“

javascript reactjs react-router components

回答 3 投票 0

AEM6.5处理组件更新

我有以下问题：在我们的 AEM6.5 项目中，有一些旧组件，在许多站点中都使用。问题是，我们必须更新其中一些组件，其中包括选项...