- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
import React, { useEffect, useState } from "react";
function logProps(WrappedComponent) {
return class extends React.Component {
componentDidUpdate(prevProps) {
console.log("inside componentDidUpdate");
}
componentDidMount() {
console.log("insideComponentDidMount");
}
render() {
return <WrappedComponent {...this.props} />;
}
};
}
const Container = (props) => {
const [name, setName] = useState("");
const handleInputChange = (value) => {
setName(value);
};
return (
<React.Fragment>
<input value={name} onChange={(e) => handleInputChange(e.target.value)} />
</React.Fragment>
);
};
export default logProps(Container);
这里容器组件被包装在 logProps HOC 中。我想在输入更改后触发组件 Did Update 函数。我使用了与官方 React 文档中描述的相同的 HOC。
最佳答案
这里有很多东西要解释
让我们从上到下尊重层次结构
componentDidMount
触发handleInputChange
被触发setName
现在使用新值调用Container
组件重新渲染 (🌟)我们不希望 HOC 现在更新,因为直到现在它还没有发生任何奇怪的事情。如果你想在每次字符更改时调用 componentDidUpdate
,你必须从 logProps(Component)
parent
像这样
import React, { useEffect, useState } from "react";
function logProps(WrappedComponent) {
return class extends React.Component {
componentDidUpdate(prevProps) {
console.log("inside componentDidUpdate");
}
componentDidMount() {
console.log("insideComponentDidMount");
}
render() {
return <WrappedComponent {...this.props} />;
}
};
}
const Container = ({name, handleInputChange}) => {
return (
<React.Fragment>
<input value={name} onChange={(e) => handleInputChange(e.target.value)} />
</React.Fragment>
);
};
export default logProps(Container);
// parent.js
const Parent = () => {
const [name, setName] = useState("");
return <LogPropsContainer handleInputChange={setName} name={name} />
}
现在您将看到每个字符更改的日志 codesandbox
用with
关键字启动HOC很方便
const withLogger = (Component) => {
function HOC(props) {
useEffect(() => {
console.log("component did mount", { CDM: props });
// eslint-disable-next-line
return () => {
console.log("component did unmount", { CDUM: props });
};
}, []);
useEffect(() => {
console.log("component did update", { CDU: props });
return () => {
console.log("component did update rerender", { rerender: props });
};
});
return <Component {...props} />;
};
// rename component for better debuging
if (process.env.NODE_ENV !== 'production') {
const name = Component && (Component.displayName || Component.name)
HOC.displayName = `Logger(${name || 'Anonymous' })`
}
};
关于reactjs - 当容器中的输入值更改时,不会记录 ComponentDidUpdate Inside HOC,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65969001/
假设我有一个表 A 和其中的函数 C 和 B,我可以通过引用自身来调用函数 C 中的表 A 函数 B 吗? A = { B = function() print("I am B
下面的代码 class Foo: bar=[sum( i^j for i in range(9) )for j in range(9)] 加注 NameError: global name '
Column( mainAxisSize: MainAxisSize.min, children: [ Container(
我正试着将按钮宽度扩展到卡内的行间,但都不起作用。我甚至不明白它为什么要断开,它说它在框约束中断开,因为它有无限的宽度
我正试着将按钮宽度扩展到卡内的行间,但都不起作用。我甚至不明白它为什么要断开,它说它在框约束中断开,因为它有无限的宽度
我正在尝试实现一个矩阵框,为了让它工作,我必须在另一个 vector 内的一个 vector 内使用一个集合。 vector > > matrix; 但是我必须在构造函数中设置 vector 的大
我在这里找到了一个类似的问题,但没有对我有用的答案: System Clipboard Vim within TMUX within SSH session 我正在使用 Gnome 终端启动 ssh
这是我的方法: 我有一个自定义 ListView,其中包含一个包含两种不同类型 View 的自定义适配器。其中之一在每个 View 中都有一个 CheckBox。 我只想在单击其中一个复选框时通知 A
我正在尝试访问一个框架内的控件,该框架位于另一个框架内的框架内。 最后(最深的)框架仅用于登录 - 我设法做到了。 问题是登录后我基本上需要回到上框点击一个按钮。出于某种原因,我不断收到错误消息: N
我一直在阅读我能找到的关于 jsoup 和属性、类、跨度等的所有问题。但是没有一个能帮助我从这个网站获取这些数据。 我正在开发一些体育软件并从网站 soccer24.com 检索比赛数据 现在我想从特
我正在尝试在神社中创建以下循环: variable: > [ {% for replaceme in list %} { 'name': "{{ "string-{{r
我正在尝试使用 jQuery Lazy Load插件,但它说 You can also use plugin for images inside scrolling container, such a
我想把来自 JTable 的对象放在它上面,所以使用 JLayeredPane 似乎很自然。然而,让它正确地绘制,正确地做标题等是非常困难的。我该怎么做才能: 滚动时显示行标题并匹配 列标题在滚动时显
背景:这是我第一次在这里发布问题,但我从阅读他人的问题和答案中学到了很多东西,非常感谢您的所有帮助!我花了几个小时研究这个问题,但找不到适合我的解决方案。下面的示例来自 MySQL website到目
我有一些代码 function getSomeInfoFromDB() { let promises = []; let order = []; $("tr").each(fu
给定相同数量的数组/对象层,每个索引指示相同的内容,嵌套数组和对象的最佳顺序是什么? 我正在制作一个基于网格的游戏,我需要存储有关每个方 block 的几条信息。我知道无法绕过多个级别的数组/对象。我
我有 3 个这样的类: public class Subject { String name; ArrayList teachers; public Subject(Strin
我总是难以混合语言,最近我开始使用 MYSQL。在这种情况下,我有这段代码: 我需要它来打印图像而不是它正在打印的链接。 http://www.google.com/s2/favicons?doma
我查看了多个数据库,但没有找到匹配或适用于我的场景的答案,所以我求助于专家,或者至少是更有经验的专家。我对 HTML 和 CSS 相当陌生。我正在尝试弄清楚如何在 ul 中定位 li,即在 ul 下的
我是一名优秀的程序员,十分优秀!