react-props 相关问题

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

为什么父组件给值时“undefined”属性是未定义的，所以不能解构它？

我实际上正在使用React for The Odin Project（一个免费的在线cursus来学习Javascript）开发一个假的购物车项目。我正在与 Vite、React-Router 和 Vitest 合作完成这个项目。我...

reactjs react-props

回答 2 投票 0

如何提交拆分为多个子组件的数据，而无需不必要的重新渲染

我在 React 项目中面临的挑战是提交分成多个子项的数据。基本上，我正在开发一个食谱应用程序，并且我有子根组件 RecipeCreator。 ...

javascript reactjs react-hooks react-redux react-props

回答 1 投票 0

根据配置动态推断 prop 类型

是否可以根据同一 prop 中提供的组件类型动态推断正确的 prop 类型？目前我有一个组件可以根据提供的正确推断预期的道具

reactjs typescript react-props

回答 1 投票 0

React TypeError：无法解构属性，因为它未定义

这段代码有什么问题吗？类 App 扩展了 React.Component { 构造函数（道具）{ 超级（道具）；这个.状态={ 姓名： ''，性别： ''，年龄： ''， }; }

reactjs components state react-props

回答 3 投票 0

子组件的 Array 属性未在组件函数中更新

举这个例子， const SelectContainer = ({ exceptIds }) => { const queryItems = (项目) => { 返回 items.filter((item) => !excludeIds.includes(item.id) } 控制台.l...

reactjs react-props

回答 1 投票 0

React 中道具无法正确传递

我正在开发我的第一个 MERN 堆栈项目，这是一个图书馆管理系统，我一直在对大多数 UI 元素使用模态。下面是我的 BookRow 模式的代码（它在......中呈现一本书行）

javascript reactjs redux mern react-props

回答 1 投票 0

道具验证 eslint 中缺少“features2.a”

[在此输入图片描述](https://i.sstatic.net/omC4XzA4.png) 作为 React 的初学者，我发现这个问题很难解决。我尝试过在网上查找解决方案，但我仍然...

reactjs react-native react-props

回答 1 投票 0

为什么父组件给值时“undefined”的属性“xxx”是未定义的，所以无法解构？

我实际上正在使用 React for The Odin Project（一个免费的在线 Cursus 来学习 Javascript）开发一个假购物车项目。我正在与 Vite、React-Router 和 Vitest 合作完成这个项目。我...

reactjs react-props

回答 1 投票 0

React 组件接收未定义的 props

我有一个简单的React应用程序（用vite创建），我将一个对象列表传递给组件Carts，Carts组件简单地解析列表并返回JSX。但有一个错误指出

reactjs undefined vite react-props

回答 1 投票 0

React 组件正在修改自己的 props，而不直接更改它们

我创建了一个 React 组件，它创建了一个包含 n 个输入的表单和一个自定义的 SubmitButton。我正在从父组件传递数据（一个数组属性）作为需要显示的初始值...

reactjs react-hooks react-props

回答 1 投票 0

尝试为自定义组件设置 Key 时出错

将 React 与 Typescript 结合使用我试图做一件简单的事情，即迭代对象集合并基于每个对象 - 创建自定义组件的实例。鉴于我是我们...

javascript reactjs typescript react-props

回答 1 投票 0

Playwright 测试失败：道具在 Playwright 测试 UI 和 Chrome 浏览器上的实际 React 应用程序中返回不同的值

我正在使用 Playwright（版本 1.44.1）为我的应用程序创建 e2e 测试。我有一个用于博客应用程序的 React 18 应用程序（使用 Vite 创建）。当我运行应用程序时，UI 显示正确...

reactjs react-props e2e-testing playwright-test

回答 1 投票 0

如何在react js中使用context api

从“react”导入 React, { useEffect, useState }; 从“axios”导入 axios；导出 const Context = React.createContext(); const Jokefetch = () => { const [笑话，setjok...

javascript reactjs react-hooks react-props react-context

回答 1 投票 0

如何在React中使用不同的默认props？

我有一个react组件，它从它的props接收一个id。导出类型 MyComponentProps = { id: 字符串 } 导出 const MyComponent = 函数(props: MyComponentProps) { 返回（ { 我有一个 React 组件，它从它的 props 接收一个 id。 export type MyComponentProps = { id: string } export const MyComponent = function(props: MyComponentProps) { return ( <div>{props.id}</div> ); } 现在，我想让 id 可选，但我确实需要使用标识符，所以我将 id 设为可选并添加默认属性。 import { v4 } from 'uuid'; export type MyComponentProps = { id?: string } export const MyComponent = function(props: MyComponentProps) { return ( <div>{props.id}</div> ); } MyComponent.defaultProps = { id: `MyComponent-${v4()}` } 完成！但现在，如果我渲染 2 个不同的 MyComponent 实例，它们将具有相同的 id。我该如何解决这个问题？我所做的如下，但我不是反应专家，我不知道是否还有其他方法可以完成此任务。 import { v4 } from 'uuid'; export type MyComponentProps = { id?: string } export const MyComponent = function(props: MyComponentProps) { const id = props.id?? `MyComponent-${v4()}`; return ( <div>{id}</div> ); } 如果您希望每个组件的 ID 在渲染之间保持不变，则需要将其置于状态中。 export const MyComponent = function(props: MyComponentProps) { const [defaultId] = useState(v4) const id = props.id ?? defaultId return ( <div>{id}</div> ); } 从技术上讲，可以通过实现 HOC 来使用柯里化来缓存值。基本实现如下所示： import { useRef } from "react"; import { v4 as uuidv4 } from "uuid"; const withId = (Component: React.FC) => ({ children, ...props }) => { const id = useRef(uuidv4).current; return <Component {...props} id={id} />; } const ComponentWithId = withId(Component); /* Usage */ interface WithId { id: string; } interface Props extends WithId {} const Component = ({ id }: Props) => { return <div id={id}>Some content</div>; }

javascript reactjs typescript react-props

回答 2 投票 0

道具不传递道具

我刚刚开始使用 React，我有这个 ItemMenu，假设将道具传递到侧边栏，但它不起作用。我有 console.log 它，并且 ItemMenu 中的道具似乎正在工作......

reactjs parameter-passing react-props

回答 1 投票 0

传递道具不传递道具

我刚刚开始使用 React，我有这个 ItemMenu，假设将道具传递到侧边栏，但它不起作用。我有 console.log 它，并且 ItemMenu 中的道具似乎正在工作......

reactjs parameter-passing react-props

回答 1 投票 0

自定义 MUI 字段 (<TextField />) 无法识别值的更改

我正在尝试创建自定义表单组件，因此如果我决定更改样式，则不需要更新每个项目。ReportSelect 版本不会在选择菜单项时更新值，并且...