问题标签 [react-class-based-component]

我维护了一个完整的 React Web 应用程序，它专门使用了数百个类组件。虽然该应用程序使用最新版本的 React，但钩子目前并未在任何地方使用。我最近遇到了添加几个新的简单有状态组件的需求。将它们创建为类组件（与所有以前的组件一致）是否合适，或者使用钩子将它们创建为函数组件是否合适。我问是因为这将是我第一次也是唯一一次导入{ useState }模块（和其他钩子模块），而且我不确定导入这些工具的成本是否值得仅在几个组件中使用钩子所获得的任何好处.

谢谢，任何建议表示赞赏

我对功能组件很陌生，而且我已经做了好几个小时了。我只是想将一个来自父功能组件的道具传递给一个类子组件，以便我将使用更新后的道具（它将是一个布尔值）来更改元素的显示。就这样。

在这种情况下，我想根据道具将 sidenav 从打开切换到关闭。

这是父组件（功能）：

和子组件（类）：

它只是不起作用，子组件没有收到更改，我想我没有正确传递道具。我知道代码只需要更正，但我不知道我在哪里没有得到它。

谢谢你。

我想将此反应类组件转换为反应钩子组件。我转换了大部分代码，现在我需要帮助来转换渲染函数和返回函数之间的代码部分。

这是类组件：

这是我创建的新反应钩子组件。正如我之前提到的，它还没有完成。

这些是我转换代码所采取的步骤： 使用 Hooks 将 React 类组件转换为 React 函数式组件的 10 个步骤！

因此，在 Reactjs 类组件中，我的状态中有一个数组，如下所示：

我以这种方式映射了数组：

现在，一切正常，除了不显示的图像，我真的不明白我在哪里弄错了。

请注意，如果我使用 require 方法直接在 src 中复制其中一个图像链接，它就可以工作。请帮忙。

这是一个反应初学者练习，所以我正在寻找最简单的解决方案。我需要将这 3 个类组件转换为功能组件。我目前正在学习 React，所以任何有用的评论也将不胜感激。提前致谢！

APP.JS

列表.JS

项目.JS

我正在学习 React 并遵循视频教程。讲师使用了类组件，而我正在使用功能组件来复习钩子概念。

我想将此代码转换为功能代码：

我试图这样做，但异步似乎没有按我的预期工作。等待不适用于setText.

我们有一个简单的反应应用程序。数据来自 api 并存储在状态中。然后我们使用 map 函数来渲染数据。并使用排序和过滤功能来操作数据。

现在，我们尝试使用查询字符串将过滤器信息与 URL 相关联。因此，在共享页面 URL 时，过滤器数据也会随之传递。

我们正在使用“react-router-dom”库的链接标签更新查询字符串

现在，如何监听查询字符串的变化？componentDidMount 仅在安装组件时运行一次。但是，当使用 Link 标记更改查询字符串时，componentDidMount 不会运行。如果我们从渲染函数中监听，那么它会给出这个错误。

侦听/检测查询字符串更改的正确方法是什么？

我们可以在反应的功能组件中使用道具吗，如果可以，如何使用。我试图做

在功能组件中的返回函数之上，但它一直给我错误。

我有一个基于类的组件，它使用多点触控将子节点添加到 svg，效果很好。现在，我正在尝试更新它以使用带有钩子的功能组件，如果没有其他原因，只是为了更好地理解它们。

为了停止浏览器使用手势的触摸事件，我需要对它们进行preventDefault操作，这要求它们不是被动的，并且由于在我需要使用的合成反应事件中缺乏被动配置的暴露svgRef.current.addEventListener('touchstart', handler, {passive: false})。我在componentDidMount()生命周期钩子中执行此操作，并在类中的钩子中清除它componentWillUnmount()。

当我将其转换为带有钩子的功能组件时，我最终得到以下结果：

这引发的问题是，每次渲染更新时，事件侦听器都会被删除并重新添加。这会导致 handleTouchEnd 在它有机会清除其他奇怪的添加触摸之前被移除。我还发现触摸事件不起作用，除非我使用手势退出触发更新的浏览器，删除现有的侦听器并添加新的集合。

我尝试在 useEffect 中使用依赖项列表，并且我看到几个人引用 useCallback 和 useRef 但我无法使这项工作更好（即，删除然后重新添加事件侦听器的日志仍然每次更新都会触发）。

有没有办法让 useEffect 只在挂载时触发一次，然后在卸载时清理，或者我应该放弃这个组件的钩子并坚持使用基于类的运行良好的钩子？

编辑

我还尝试将每个事件侦听器移到自己的位置useEffect并获取以下控制台日志：

编辑 2

有几个人建议添加一个我尝试过的依赖数组：

但我仍然收到一条日志，说每个useEffects 都已被删除，然后在每次更新时重新添加（所以每个touchstart，touchmove或者touchend导致油漆 - 这很多:)）

编辑 3

我已经替换window.(add/remove)EventListener为useRef()

ta

我有一个包含输入的App组件。每次我输入输入时，输入的值都会更新，并且消息组件会根据输入的长度打印不同的消息。同时，名为Character的第三个组件将字符串的每个字母单独打印到屏幕上。所需的行为是，当我单击其中一个字母时，它会从字符串中删除，新字符串会显示在屏幕上，并且输入也会使用新字符串进行更新。

我使用了一些 console.logs 进行调试，一切似乎都按预期进行，直到我尝试更新状态的最后一步，但由于某种原因，它没有得到更新。

完整的代码在这里：

https://codesandbox.io/s/react-the-complete-guide-assignment-2-list-conditionals-e6ty6?file=/src/App.js:51-1007

我真的不明白我做错了什么，我觉得与生命周期方法有某种关系。任何答案都会有所帮助。谢谢你。