react-props 相关问题

ReactJS是由facebook开发的JS库。道具是反应组件中使用的变量。在对反应道具的使用有疑问时使用标签。

将样式表传递给反应组件

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

reactjs react-native react-props

回答 1 投票 0

通过 props 更改 React 中的元素

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

javascript reactjs jsx react-props

回答 2 投票 0

React 中的 Props 不变性

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

reactjs react-props

回答 1 投票 0

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

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

javascript reactjs typescript onclick react-props

回答 1 投票 0

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

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

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

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

reactjs react-props

回答 1 投票 0

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

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

reactjs react-native react-hooks parent-child react-props

回答 1 投票 0

在 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> ); }

reactjs typescript react-props

回答 2 投票 0

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

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

reactjs typescript class react-props

回答 1 投票 0

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

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

javascript reactjs react-props

回答 1 投票 0

React PropTypes 与 defaultProps 结合并在对象内部出现问题

在以下 React 17.0.2 示例中： // 容器.tsx 常量 InfoPropType = { 图例：PropTypes.string.isRequired，值：PropTypes.number， }; const ContainerPropTypes = { 配置：PropTypes。