react-props 相关问题

具有默认可选值的 React props 的条件类型

我想要条件道具类型 当我尝试将默认值传递给条件类型内部的可选属性时，类型会中断 导出类型 ChatBase = { id：字符串； 标题：...

如何在vite+react app中通过props动态从src文件夹获取图片

导出默认函数Card(props) { 返回 （ ...

无法将函数传递给React中的子组件

我不明白发生了什么，语法似乎是正确的，但我收到此错误： 类型错误：chooseMessage 不是函数 // 父组件 导入 React, { useState } from 're...

使用 StackNavigator 进行本机注销反应 - 找不到路线

我有一个react-native应用程序，它将登录凭据存储在jwt中。我的注销功能如下所示： 注销={() => { AsyncStorage.getAllKeys() .then((键) ...

使用道具时我的文本不显示（React Native）

组件文件 函数目标项（道具）{ 返回（ {props.text} ）； } 导出默认GoalItem； 应用程序文件 组件文件 function GoalItem(props) { return( <Text style={Styles.prop}>{props.text}</Text> ); } export default GoalItem; 应用程序文件 <FlatList data={(list)} renderItem={(itemData) => { <GoalItem text={(itemData.item.value)} /> }} keyExtractor={(item, index) => { return item.id }}/> ====================================================== =================================================== =================================================== =================================================== =================================================== ========= 您的 renderItem 函数没有 return 语句。试试这个： <FlatList data={(list)} renderItem={(itemData) => { return <GoalItem text={(itemData.item.value)} /> }} keyExtractor={(item, index) => { return item.id }}/>

如何调用react中功能组件中作为prop接收的函数？

我正在尝试调用 **toggleSideBar ** 在 **SideBar ** 组件中作为道具接收。但它给出了一个错误：**toggleSideBar **不是一个函数。实际上我正在尝试在

什么问题导致我的图像无法加载？

我正在努力变得更加“动态”，尝试使用组件等。我将多个值传递给“AdminKachel”，其中一个是图像。我正在尝试将路径传递给...

React (MERN)：组件在数据库中更新，但不在状态中

尝试更新组件时，它在数据库中成功更新，但状态未更新。 主页.js 从“反应”导入{useEffect} 从 '../...

React 中组件之间传递信息

我目前正在尝试制作一个书店应用程序，但我陷入困境。如何将 book._id 作为 prop 传递给 EditBooks 组件？ { （编辑&& 我目前正在尝试制作一个书店应用程序，但我陷入困境。如何将 book._id 作为 prop 传递给 EditBooks 组件？ { (edit && <EditBook editBook={editBook}></EditBook>) } { books.map((book) => { return <div key={book._id}> <AiOutlineEdit onClick={(e) => { editBook(); }}></AiOutlineEdit> </div> } } 我的 editBook 函数显示要由用户填写的表单。由于这是一个 PUT 请求，我需要将 id 传递给 EditBook 组件。 当点击React图标book._id时，如何将数据库中存在的每本书的AiOutlineEdit传递给组件EditBooks？ 如果您想将数据从一个组件传递到其他组件，您应该使用如下代码： const test=10; <Component1 key={key} data={test} /> 在组件 1 中： function Component1(props){ return ( <div>to show your data:{props.data}</div> ) }

将样式表传递给反应组件

我的项目中有一个样式文件，我在其中定义了一些样式表。现在，在我的 App.tsx 中，我导入这些样式表，并将它们传递给我作为 prop 创建的组件。 样式.tsx：

通过 props 更改 React 中的元素

我想制作一个简单的反应组件，发送一个介于 1 和 5 之间的值，然后渲染一个包含 5 个“部分”的进度条，但只对发送的数量进行着色，如果这使得森...

React 中的 Props 不变性

我试图理解 props 的不可变行为并为此做了一个 POC。 我已将一个对象传递给子组件，并更改了子组件中该对象的属性（props）。 我的代码...

传递的onClick函数未识别为函数

我将 onClick 函数作为我的 React 应用程序中的道具从一个组件传递到另一个组件。它给出了一个错误，显示为 Uncaught TypeError: handleOnClick is not a function 。这是我的功能...

将布尔属性传递给组件不起作用

我有组件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;

映射数组 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

将父状态作为 prop 传递给 {children} | 内的所有组件Reactjs

我想授予所有 {children} 组件的访问权限以使用或修改父组件内的状态，代码如下： 父组件： 导出函数 FormStep({ 子级 }) { 常量 [活动...

当状态从子组件更新时，状态挂钩更改不会重新渲染父组件

我有一个父组件和一个子组件。子组件是基于父状态值 props 渲染的弹出窗口。子组件是一个弹出窗口，可以完美地呈现来自...的初始消息

在 ReactJS 中使用 Typescript 时无法传递任何 props

我正在尝试将道具从我的 AllProducts、MenProducts 等组件传递到 AddToCartButton 组件，以便我可以重用 AddToCartButton 组件。如果我尝试传递像这样的道具 我正在尝试将 AllProducts、MenProducts 等组件中的道具传递给 AddToCartButton 组件，以便我可以重用 AddToCartButton 组件。如果我尝试传递像这样的道具 <AddToCartButton id={product.id} /> 我收到错误： 输入 '{ id: 数字; }' 不可分配给类型“IntrinsicAttributes”。 类型“IntrinsicAttributes”上不存在属性“id”。ts(2322) 我也尝试过传递简单的字符串作为 prop，但它给了我同样的错误。 import { useEffect } from 'react' import { Link } from 'react-router-dom' import { useAppSelector, useAppDispatch } from '../hooks/hooks' import { fetchAllProducts } from '../store/features/allProducts/allProductsSlice' import AddToCartButton from '../components/AddToCartButton' export const AllProducts = () => { const product = useAppSelector(state => state.product); const dispatch = useAppDispatch(); useEffect(() => { dispatch(fetchAllProducts()) }, [dispatch]) return ( <div className="products-wrapper"> <h1 className="products-wrapper__heading"> All Products </h1> <div className="products-wrapper__products-cards-wrapper"> {product.products.map(item => ( <div key={item.id} className="product-card"> <Link to={`/product/${item.id}`} className='products-wrapper__product-link'> <div className="product-card__img-wrapper"> <img src={item.image} alt="product" className="product-card__product-img" /> </div> <h3 className="product-card__product-name"> {item.title} </h3> <h4 className="product-card__product-price"> {item.price} € </h4> </Link> <AddToCartButton id={item.id}/> </div> ))} </div> </div> ) } export default AllProducts 错误出现在 AddToCartButton 组件中。我没有在 AddToCartButton 组件中定义 prop 类型。谢谢大家的评论。 export interface IdProp { id: number } const AddToCartButton = ({id}: IdProp) => { const test = () => { console.log(id); } return ( <button className="add-to-cart-btn" onClick={test}> Add To Cart </button> ) } export default AddToCartButton 您遇到的错误与 TypeScript 以及您将 props 传递给 AddToCartButton 组件的方式有关。 TypeScript 似乎无法识别 AddToCartButton 组件中的 id 属性。 // 添加到购物车按钮.tsx import React from 'react'; interface AddToCartButtonProps { id: number; // Other props if needed } const AddToCartButton: React.FC<AddToCartButtonProps> = ({ id }) => { // Your component logic here return ( <button onClick={() => console.log(`Added to cart: ${id}`)}>Add to Cart</button> ); } export default AddToCartButton; 在此示例中，我们定义了一个接口 AddToCartButtonProps 来指定 AddToCartButton 的预期道具类型。它包括一个数字类型的 id 属性。调整界面以包含您的 AddToCartButton 组件可能需要的任何其他道具。 在您的 AllProducts 组件中，确保正确导入并使用 AddToCartButton 组件： import React, { useEffect } from 'react'; import { Link } from 'react-router-dom'; import { useAppSelector, useAppDispatch } from '../hooks/hooks'; import { fetchAllProducts } from '../store/features/allProducts/allProductsSlice'; import AddToCartButton from '../components/AddToCartButton'; export const AllProducts = () => { const product = useAppSelector(state => state.product); const dispatch = useAppDispatch(); useEffect(() => { dispatch(fetchAllProducts()); }, [dispatch]); return ( <div className="products-wrapper"> {/* ... your existing code */} {product.products.map(item => ( <div key={item.id} className="product-card"> <Link to={`/product/${item.id}`} className='products-wrapper__product-link'> {/* ... your existing code */} </Link> <AddToCartButton id={item.id} /> </div> ))} </div> ); }

如何将 props 传递给扩展 Component 的类<Props>？

我有一个类想要将道具传递给： 类型 TestProps = { 地点：任意 setMill：（值：任意）=> void } 类 TestClass 扩展 Component { 组件DidMount() { ...

在 React 中有条件地添加 HTML 属性

我试图在 React 中添加一个 aria-current 条件，只要我的路径变量为 null。 {props.path.map((值，索引) => { 常量路径=值.路径？ `/${values.path}` : null; 常量咏叹调 = p...