react-props 相关问题

Vite+React 项目子组件没有向父组件传递值

我正在开发一个 Vite+React 项目，目前我正在开发移动导航栏，所以我的第一个问题是当我第一次单击移动导航图标时，导航组件正在显示，但在第二个 cli 上...

无法从父元素接收道具

有一个父组件 Products 和另一个组件 SingleProduct 我试图将产品作为道具传递给 SingleProduct 但当我 console.log 时未定义 谁能告诉我我在做什么...

如何在react中为按钮添加disabled属性？

这是我的代码 从“反应”导入反应 从“prop-types”导入 PropTypes； 导出默认功能按钮（{ htmlType，类型，禁用，操作，...props}）{ 返回 （ 这是我的代码 import React from 'react' import PropTypes from "prop-types"; export default function Button({ htmlType, type, disabled, action, ...props}) { return ( <button type={htmlType} onClick={action}> {props.children} </button> ) } Button.propTypes = { htmlType: PropTypes.string.isRequired, action: PropTypes.func, disabled: PropTypes.bool }; 我通过这段代码调用Button组件 <Button disabled={true}>button title</Button> 我想在禁用 props 为 true 时向按钮添加禁用的 html 属性，该怎么做？ 您可以像这样编写单行 if-else 语句： <button disabled={propsDisabled}>button title</button> 这里，propsDisabled是可以通过props传递的变量，它是一个boolean变量，可以是true或false。为了避免混淆，我没有使用 disabled 本身，但您可以将变量名称用作 disabled。 当propsDisabled为true时，该按钮将被禁用，而当propsDisabled为false时，该按钮将不会被禁用。 Aya，我无法完全理解你的问题，看起来你正在试图解决一个问题，而你一开始的问题中有第二个问题。 您使用Ant组件吗？在 disabled 组件本身上使用 <Button /> 属性。 （注意组件名称中的大写字母 B Button）。 <Button disabled={true} /> // or (it's the same but different JSX syntax) <Button disabled /> 这与兄弟@Abdul Qadir的回答相同。 如果您使用原生 HTML elements，您还可以在 <button /> 元素上调用禁用的 属性（请注意元素名称 button 中的小字符 b）同样的方式，它应该可以工作： <button disabled={true}>I'm disabled</button> // or (the same but different syntax) <button disabled>I'm disabled</button> 所以这是两个答案， 如果您正在使用 Ant 组件： import { Button } from 'antd'; const CustomButton = ({ disabled, children }) =>{ return <Button disabled={disabled}>{children}</Button> } 如果您使用原生 HTML 元素： const CustomButton = ({ disabled, children }) =>{ return <button disabled={disabled}>{children}</button> }

React Typescript HOC

我正在尝试实现 HOC，根据用户是否被授权将其重定向到指定路径 从“react-router-dom”导入{Navigate}； 导入 {useAppSelector} f...

如何将值从 openAPIweather 传递到组件

我正在使用React-Native做一个天气应用程序，现在我正在尝试获取API的数据，因此创建了一个文件WeatherData.js，它返回名称、温度和天气。 我想将数据传递给组件

如何指定 prop 在自定义 React 组件中采用 ref？

我在 React 中有一个自定义组件，我希望能够保存 ref （即，它应该将 ref 作为其 props 之一）。 （如果我们想将其用作 ToolTip 组件的子组件，这是必需的。）...

如何避免在 React 组件中钻取 props？

我知道这是一个有点多余的问题，但我在我的 React 应用程序中面临着一个特定的挑战，我希望有人可以帮助解决。我有一个组件需要传递多个 props...

从 Checkbox 切换后 Switch 组件不工作

我之前使用 Ant Design Checkbox 来检查和发布评论，运行良好，没有错误。 我之前使用 Ant Design Checkbox 来检查和发布评论，运行良好，没有错误。 <Checkbox key={record.id} checked={Publish[record?.id]?.["ispublish"] == 'true' ? true : false} onChange={(e) => Update(e.target.checked, record)} /> 我想用 Switch 代替。 <Switch key={record.id} checked={Publish[record?.id]?.["ispublish"] == 'true' ? true : false} onChange={(e) => Update(e.target.checked, record)} /> 我收到错误： 无法读取未定义的属性（读取“已检查”） 我想要Switch工作。 onChange组件的Switch prop 回调需要 两个参数。第一个是当前 checked 值，第二个是 onChange 事件对象。 查看Switch组件API： 财产 描述 类型 onChange 当选中状态发生变化时触发 function(checked: boolean, event: Event) 与CheckBox组件API相比： 财产 描述 类型 onChange 状态改变时触发的回调函数 (e: CheckboxChangeEvent) => void 更新为使用第一个参数，checked: <Switch key={record.id} checked={Publish[record?.id]?.ispublish == 'true'} onChange={(checked) => Update(checked, record)} />

React Props 问题：红色下划线和意外行为

大家好！ 最近，我一直在开发一个以 ReactJs 作为前端的 Meme 项目。它基本上是一个简单的应用程序，可以让用户快速有效地制作表情包。直到昨天我醒来...

动态子布局的 Render Props 与 React Hooks

React hooks 在用作 render-props 模式的替代品时不涵盖哪些用例？有什么实际例子吗？ 我有一个包含三个列表的应用程序，其想法是创建一个通用组件...

“使用客户端”入口文件中的组件Props必须可序列化，“setShow”无效.ts(71007)

我在 vs code 编辑器中针对 React 中的某些 prop 命名收到此 Typescript 警告/错误。 对于“use client”入口文件中的组件，Props 必须是可序列化的，“setShow&quo...

如何在React Native中添加盒子阴影

我正在尝试重新创建下图中的阴影，需要一些帮助。 我应该为此使用什么 CSS 属性？我知道我需要边框半径，但我不确定还有什么其他属性可以帮助我实现......

从 React 父组件中的多个子组件获取计算数据

我想要 2 个功能性 React 组件： 一个 Data 组件，它在状态中保存一个值，该值通过 props 传递： 一个 SummedValue 也保存状态值，但计算该值...

将带有事件的函数从子组件传递到父组件

我有一个带有输入的子组件，我想使用道具在事件中传递信息。将数据发送到父组件的最佳方式是什么？ 在父组件中，我有函数和

在react中从外部功能组件调用函数

假设我在功能组件之外有一个表单，如下所示： 假设我在功能组件之外有一个表单，如下所示： <TextField onChange={handleChange('name')} value={values.name} variant="outlined" label="Name" id="name" required /> 我的组件是这样的： export default function App() { const handleChange = (prop) => (event) => { setValues({ ...values, [prop]: event.target.value }); }; } 如何从组件内部调用 handleChange() 函数？ 您可以将 handleChange 函数作为 prop 传递给您的功能组件： const MyComp = (props) => { ... return <TextField onChange={props.handleChange('name')} value={values.name} variant="outlined" label="Name" id="name" required /> } // Reference function here. <MyComp handleChange={handleChange}/> 如果您有一个表单组件作为组件的子组件，那么您可以执行如下操作：- ParentComponent.js:- import ChildComponent from './ChildComponent' export default function ParentComponent() { const handleChange = (prop) => (event) => { setValues({ ...values, [prop]: event.target.value }) } return ( <ChildComponent handleChange={handleChange} /> ) } ChildComponent.js:- export default function ChildComponent({handleChange}) { return ( <TextField onChange={handleChange('name')} value={values.name} variant="outlined" label="Name" id="name" required /> ) }

如何让 React 应用程序在作为 prop 传递时将 api 数据显示为 html 而不是字符串

我正在尝试显示从菜谱 API 获得的文本块，该文本包括粗体标签和链接等 html 元素，但被包装在字符串中，因此它显示文字文本当前文本 ...

如何将返回值传递给不同的组件

我试图能够在单独的子组件中加载产品（当用户从父组件上呈现的产品列表渲染地图中单击产品时启用）。 我已经设置了一个功能...

带有嵌套数组的React父属性会被传播复制的状态变量改变？

请考虑以下事项： 类型 ObjectWithNestedArray = { 数组：{名称：字符串}[]； }; const App = () => ; const 父 = () => { const objWithNestedArray = { 数组: [{ na...

使用 React：关于解构组件的问题

所以，我正在进行一些 React 学习，目前我只是在做一些小代码。我正在写两个文件。第一个是我的数据在变量中的位置。我正在使用基本的地图方法来循环我的

无法将属性从layout.tsx传递到page.tsx

我正在使用应用程序路由器构建一个 Next.js 应用程序，其中“layout.tsx”文件管理一个按钮状态，我想用它来渲染“page.tsx”中的不同内容。我明白‘layyou...