问题标签 [react-functional-component]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
2525 浏览

reactjs - 当作为道具传递给功能组件时,反应功能未定义

我正在将我的主应用程序类中定义的函数传递给接受道具的功能组件。出于某种原因,我收到函数未定义的错误。有人可以帮我吗?我可能非常明显,但我想不出错误的原因。

0 投票
2 回答
941 浏览

javascript - 我可以在 React 功能组件中添加异步功能吗

请注意,问题与 useState 的异步性质无关。它是异步 的,在这里得到了很好的回答:useState set 方法不会立即反映变化请不要将其与那个混淆!我已经使用 useEffect 让按钮工作,正如在 codepen 中共享的那样

我的问题是我可以在主要组件中添加/包含任何异步函数吗?主组件:HelloWorld 子功能:interestShown => 这可以是异步的吗?在示例中,我使用 console.log 输出尽可能地简化了它。

这是一条可取的路线还是我在尝试一些奇怪的事情?

我曾尝试寻找解决此问题的方法,但我认为所有答案都将我引向课程,如果可能的话,我希望在 React 功能组件中实现这一点。

我已经定义了这样的状态: const [interested, setInterested] = React.useState(false)

当我调用这个函数时:

状态更改后控制台日志需要显示更改后的状态,我无法做到这一点,我尝试了很多选项

我的问题在这个代码笔中:https ://codepen.io/deepeshkr/pen/PowQWwv

控制台日志输出:

pen.js:6 在设置状态触发之前为假

pen.js:8 After Set State Fired false => 这应该是真的,但我猜这是异步更改,这是我的问题,如何在状态更改后触发这个?

pen.js:14 Fire only it's true true

有类似的听起来问题,但我不确定他们问的问题与我问的问题相同,或者问题是否得到很好的解释以证明问题。

0 投票
2 回答
6043 浏览

javascript - 在单页 React 组件 useState 中切换(显示/隐藏)组件 onClick

在下面的单页案例中,如何在组件之间切换?理想情况下,当您单击时menu-item,相关组件将显示,而其他组件将隐藏。

反应

0 投票
2 回答
760 浏览

javascript - 反应钩子useState()的真正奇怪的行为

我目前正在使用 Swiper 编写一个用于简单幻灯片的反应应用程序,并且一切正常。我现在正在尝试通过使用 setActiveSlide 函数显示当前幻灯片来改进导航。第一次加载后,它工作正常。单击调用 setActiveSlide 的按钮后,故事对象设置为 null,这会在您再次单击上一个或下一个按钮时导致错误(未捕获的类型错误:无法读取属性 'slideNext' of null)。为什么调用 setActiveSlide 后故事对象设置为 null?请帮忙

这是应用程序的简化版本

0 投票
1 回答
153 浏览

javascript - 功能组件中的 ContentEditable - 列表项

有没有机会用这个渲染只编辑一个项目?

我现在的编辑代码看起来像这样

当然,在单击按钮后,每个项目都是可编辑的。

0 投票
1 回答
553 浏览

javascript - React 类内部与外部的功能组件

我想知道在 React 类组件中耦合/嵌套功能组件而不通过参数显式传递道具并this.props通过父类使用的效果是什么。我知道在 React 类组件之外拥有一个功能组件更容易测试和阅读,但我很想知道使用this.propsprops通过参数之间在性能/渲染方面的确切区别是什么。

例如:

比。

0 投票
1 回答
756 浏览

reactjs - 更新功能组件道具不会改变样式

我有这个函数组件用于将跨度呈现为条形。当我渲染组件时,我将道具传递scrolledfalse. true然后,当我滚动 150 像素时,jQuery 将属性更新为。我知道使用 jQuery 不是一个好习惯,我正在从中迁移。现在,我想让它工作,因为我还在学习功能组件。

这个样式化的组件定义:

当我滚动时,我看到scrolledDOM 中的属性已从“假”变为“真”,但跨度保持白色。此外,带有的段落标签{scrolled}不会从false.

0 投票
3 回答
73 浏览

javascript - 有没有办法从这些对象中提取数据值

我在图像中有如下数据,我正在尝试Data从下图中的 json 中提取数组。

在此处输入图像描述

数据具有类似的关键值condition_type和其他值。

我可以使用以下代码获取每个单独的值

Data任何人都可以建议是否有任何方法可以使用 React JS 从这 6 个对象中获取数组。

提前谢谢了

0 投票
1 回答
1553 浏览

reactjs - 刷新表不适用于功能组件 - 使用来自 https://material-table.com 的 MaterialTable

我使用来自https://material-table.com/#/docs/features/editable的MaterialTable在我的应用程序中显示数据和 crud 操作。我想在 CRUD 操作(添加、更新、删除)之后刷新表中的数据。

我尝试使用 React 中的 createRef() 但它不起作用。我怎样才能做到这一点?

0 投票
1 回答
225 浏览

reactjs - 将类组件重构为功能组件

我正在分析一个类组件中的一些音频,然后在另一个组件中呈现音频的波形可视化。我正在努力将这些重构为带有钩子的功能组件。StackBlitz URL

问题:

  1. 我不确定如何重写this.tick bind方法AudioAnalyser
  2. 在功能组件中使用标签写入canvas元素。AudioVisualiserref