在使用HOC时从外部渲染更新React状态？
在使用HOC（Higher-Order Component）时，可以通过从外部渲染来更新React状态。HOC是一种用于重用组件逻辑的高级技术，它本质上是一个函数，接受一个组件作为参数，并返回一个新的组件。
在React中，组件的状态（state）是用来存储和管理组件数据的。通常情况下，组件的状态只能在组件内部进行更新。但是，通过使用HOC，我们可以将状态的更新逻辑从组件内部移动到外部。
具体实现的步骤如下：
- 创建一个HOC函数，接受一个组件作为参数。
- 在HOC函数内部，创建一个新的组件，并在该组件中管理需要更新的状态。
- 将原始组件作为新组件的子组件，并将需要更新的状态作为props传递给原始组件。
- 在新组件中，通过监听外部事件或者接收外部数据的方式，更新状态。
- 当状态更新时，通过props将更新后的状态传递给原始组件，从而实现从外部渲染更新React状态。
这种方式的优势在于可以将状态的更新逻辑与组件的渲染逻辑分离，提高了代码的可维护性和复用性。同时，通过从外部渲染更新状态，可以更灵活地控制状态的更新时机和方式。
在腾讯云的产品中，与React相关的云产品包括云服务器（CVM）、云数据库MySQL版、云函数（SCF）等。这些产品可以为React应用提供稳定的运行环境、可靠的数据存储和处理能力，以及强大的计算和扩展能力。
更多关于腾讯云产品的信息，请访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
我正在创建一个React小部件，并使用react-jss HOC设置样式。小部件只是较大页面的一小部分，我希望能够通过React呈现之外的页面另一部分上的按钮来通知它打开或关闭。(<Modal />, document.getElementById('widget'))
modal.toggleModal()
那是在JSS之前，但现在widget不返回组件，它返回J
浏览 0提问于2018-02-16得票数 0
1回答
我有一个设置，其中我有一个主容器，它是使用recompose由多个HOC组成的。我正在做的项目是使用react-test-renderer，并使用浅层渲染方法。因此，当测试快照以确保错误状态正在加载时，快照仅测试一级深(由于浅渲染)，并始终返回： <PageWrapper> </LoadingContainer> 正如我所期望的那样，当
浏览 32提问于2019-04-16得票数 0
我写了一些HOC，我需要传递给这个HOC一个动态对象，它是我在某个生命周期级别上创建的，我没有让他作为道具。如果我尝试传递一些静态值(例如，从start初始化myObj )，它会按预期工作，并且我会得到正确的值。假设这是我的组件类： { }
return Hoc;
浏览 14提问于2019-03-14得票数 6
我正在做一个小项目的最后一步，它使用一个高阶组件(HOC)来呈现一个简单的类似Tinder的应用程序。
内部组件是一个基于类的组件，它有自己的fetch()调用，为用户和图片呈现数据。外部HOC是一个功能组件。要让应用程序正常工作，我需要做的就是找到一种方法来刷新内部组件，并在用户按下按钮时触发API调用。我正在尝试用HOC中的useState钩子来做这件事。useState钩子，它停止了应用程序的渲染，并显示了一个非常糟糕的错误消息。React Ho
浏览 2提问于2020-12-06得票数 0
钩子是一个令人惊叹的功能，但当我们过渡到它们时，我发现它们提供了另一个依赖项的入口，这很难管理，因为你必须查看实际的组件代码才能看到它。当然，我们只能在容器组件中使用钩子，但我觉得它们的一些主要卖点是它们减少嵌套和即席的能力。
决定哪个组件应该使用钩子，哪个应该使用渲染道具的最佳实践(目前)是什么？
浏览 0提问于2018-11-20得票数 14
1回答
在我的场景中，当我通过控制台将pass参数记录到另一个组件时，它们在最后一个组件中的实际字符串之前有一个空字符串。它应该只是实际的字符串。组件1： import {dataComponent} from '.);
<div>{<dataComponent callbackfunction={data}/>
浏览 9提问于2019-08-02得票数 0
回答已采纳
我有一个现有的应用程序，它使用React中的高阶组件。我猜你可以通过使用渲染道具来继续/改进HOC，但是现在使用React自定义钩子，我认为这可能是最好的方法。在读取React文档时，所有自定义钩子示例都在其示例中使用状态。在不使用state的情况下，我是否可以/是否应该使用自定义钩子来替换HOC？如果是这样
浏览 1提问于2019-09-03得票数 2
我使用的是一个高阶组件，它不会在渲染更改时渲染子对象。为了简单起见，下面的代码被删减了。this.props.value || ''} /> };我遇到的问题是input没有使用从HOC传回的新值进行更新。我已经将调试和console.logs放在了HOC render中，并且c
浏览 4提问于2018-08-17得票数 1
回答已采纳
1回答
我错误地写了两个版本的HOC实现，但它没有抛给我任何错误并按预期工作，所以我希望有人能向我解释其中的区别。Component {}
下面是我的requireAuthimport { connect } from 'react-redux';
export default
浏览 0提问于2018-08-12得票数 0
回答已采纳
1回答
每当我的redux的一部分声明我订阅了更新时，我的TextInput就会失去焦点，键盘也会消失。当我解构从useSelector返回的部分状态时，这个问题曾经严重得多。我在整个应用程序中使用useSelector和useDispatch钩子，而没有专门的HOC。这些是我正在使用的相关包 "re
浏览 14提问于2020-05-08得票数 1
2回答
我想知道如何在React中管理复杂的状态，限制那些内容没有改变的组件的渲染调用的数量。我有简单的连接到redux存储容器组件与“项目”道具(这是数组)。const ConnectedComponent = connect(mapStateToProps)(MyComponent);
每次复杂商店的任何部分发生变化时-项目属性也会发生变化，即使项目数据没有更新这会导致重新渲染。(我在React Dev Tools中找到了它，它突出显示了更新
浏览 39提问于2019-06-18得票数 4
我正在构建一个简单的待办事项应用程序，在我实现了react-sortable-hoc之后-如果你不知道这是一个实现拖放的react插件-待办事项列表不会再更新最后添加的待办事项。在控制台中我没有得到任何类型的错误。 我尝试使用在react-sortable-hoc onSortEnd函数中排序的状态，但是我得到了传播不可迭代实例错误的无效尝试。This is the application an codesandbo
浏览 34提问于2019-09-17得票数 0
回答已采纳
假设我在React-Apollo中有以下GraphQL查询 query CurrentUserForLayout($avatarIDProfileWithData = graphql(CurrentUserForLayout, {})(Profile);graphql(Cur
浏览 0提问于2017-01-01得票数 12
回答已采纳
4回答
背景 我有一个React组件，它包含另外两个组件。I组件包括一个图表(使用react-charts构建)，另一个是一个简单的输入字段。我最初让它不可见，但当有人单击那里的图标时，它就会变得可见。问题，子对象在状态更改时呈现 现在的问题是，每当我切换此输入字段时，它都会自动刷新我的图形。事实上，当我在我的输入字段中输入时，它也会刷新图形。我认为当我更新状态变量时，它会重新渲染图形。
浏览 41提问于2020-05-27得票数 1
回答已采纳
1回答
在React中，您不能使用继承。在函数式编程中可能有一种使用组合的方法，但如何将渲染和所有方法组合到单独的组件中呢？对于React默认组件函数(如componentDidUpdate )，您是否能够将其组合为一个单独的组件，并引入到更高级别的组件(HoC)中。如何在HoC的每个组成组件中传递或访问属性和状态。
浏览 2提问于2017-11-09得票数 0
我正在写一个库，为我们公司的React应用程序提供一些基本的高阶组件。要点是HOC将从我们的redux状态中拉出一些切换，并有条件地渲染组件或注入道具(取决于所使用的HOC)。只有在HOC中使用connect函数时，才会出现Error: Invalid hook call.错误。它们可以无错误地返回/呈现作为参数提供的React组件。我已经确认在redux状态</
浏览 60提问于2021-07-02得票数 0
2回答
import React, { useState } from "react";
const [name, setName] = useState("");<button type="submit">Submit</button> </div>}
我将使用上面的代码来提出我的问
浏览 15提问于2021-05-22得票数 0
给定一个标准的合成函数和一个“div”组件，您将如何编写这两个HOC，以便：
下面的示例可以获得一个绿色框，并正确地触发处理程序。更新
浏览 0提问于2017-08-28得票数 2
当涉及到将父元素的子元素包装在更高顺序的组件中，然后呈现它们时，我目前遇到了一个问题。然后，称为hoc的高阶组件覆盖了TestComponent的属性，并为其提供了生命周期方法，如下所示： returnclass extends React.Component { return !(child, 'bar&
浏览 10提问于2019-11-19得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
